/* //////////////////////////////////////// PAGE LAYOUT /////////////////////////////////////////// */
#container {
    max-width:1200px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left: 2%;
    padding-right:2%;
    width: 80%;
    min-height: 95vh;
    /* position: relative; */
    @media (max-width:430px) {
      width: 90%;
    }
  }

.page-container {
  display: flex;
  min-height: 100vh;
  width: 100%; /* Ensure the container spans the full width */
  max-width: 1200px; /* Optional: Add a maximum width for wider screens */
  margin: 0 auto; /* Center the container if you have a max-width */
}

.sidebar {
  width: 200px; /* Adjust as needed */
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto; /* Enable scrolling if the content is long */
  background-color: #f8f8f8; /* Light background for contrast */
  border-right: 1px solid #eee;
  z-index: 10;
}

.sidebar h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2em;
  color: #333;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 8px;
}

.sidebar a {
  display: block;
  color: #777;
  text-decoration: none;
  padding: 5px 10px;
  border-left: 3px solid transparent; /* For the active state indicator */
}

.sidebar a:hover {
  color: #333;
  border-left-color: #007bff; /* Highlight on hover */
}

.sidebar a.active {
  color: #000; /* Black for the active link */
  font-weight: bold;
  border-left-color: #007bff; /* Keep the highlight for active */
}

.sidebar .toc-level-2 {
  padding-left: 20px;
}

.sidebar .toc-level-3 {
  padding-left: 40px;
}

/* Add more levels as needed */

.main-content {
  flex-grow: 1;
  padding: 20px;
  margin-left: 200px; /* Match the sidebar width */
}

/* Media query for smaller screens (e.g., mobile) */
@media (max-width: 768px) {
  .page-container {
      flex-direction: column; /* Stack sidebar and content */
  }

  .sidebar {
      position: static; /* Flow with the content */
      width: 100%;
      height: auto;
      border-right: none;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
  }

  .main-content {
      margin-left: 0; /* No left margin needed */
      padding-left: 10px; /* Adjust padding for smaller screens */
      padding-right: 10px;
  }

  .sidebar h2 {
      margin-bottom: 10px;
  }
}

/* /////////////////////////////////// FONTS, COLORS ////////////////////////////////////////////// */
  /* Colors */
  body {
    --theme-color: rgb(0, 50, 98);
    --text-color: #2B2E33;
    --bkg-color: #F9FAFA;
    --bkg-color-light: #eaeaea;
    --bkg-color-lighter: #ddd;
    --link-color: #219ab3;
    --link-hover-color: #11505d;
  }
  body.dark-theme {
    --theme-color: rgb(0, 63, 121);
    /* --theme-color: rgb(0, 39, 76); I'm actually stupid at design I think lighter is better but idk */
    --text-color: #eee;
    --bkg-color: rgb(24, 26, 28);
    --bkg-color-light: rgb(35,38,41);
    --bkg-color-lighter: rgb(40,43,46);
    --link-color: #219ab3;
    --link-hover-color: #11505d;
  }
  
  body {
    background: var(--bkg-color);
    color: var(--text-color);
  }
  
  /* Fonts */
  body {
      font-family: "Avenir Next", "Open Sans", Helvetica, Arial, sans-serif;
  }
  input {
    font-family: "Avenir Next", "Open Sans", Helvetica, Arial, sans-serif;
  }
  
  
  /* /////////////////////////////////// TEXT, LINKS //////////////////////////////////////////////// */
  /* Headers */
  h1, h2, h3, h4, h5, h6 {
      font-weight: bold;
  }
  
  
  /* Body Text, List Text, Table Text */
  p, li {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  }
  th, td {
    font-size: 12px;
    line-height: 1.2;
  }
  
  @media(min-width:600px) {
    p, li {
        font-size: 16px;
        line-height: 1.8;
    }
    th, td {
      font-size: 14px;
      line-height: 1.5;
    }
  }
  
  /* Footer Text */
  footer p {
    font-size: .8em;
    text-align: center;
  }
  
  /* Links */
  a {
    color: var(--link-color);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
        text-decoration: none;
  }
  
  a:hover, a:focus {
    color: var(--link-hover-color);
  }
  
  /* Manual changes */
  .important {
    font-size: 1.1em;
  }
  
  .text-bold {
    font-weight: bold;
  }
  
  .text-justify {
    text-align: justify;
  }
  
  .text-center{
    text-align: center;
  }
  

  /* //////////////////////////////////////// IMAGES //////////////////////////////////////////////// */
  img {
    max-width: 100%;
  }

  
  /* //////////////////////////////////////// DARK MODE ////////////////////////////////////////////////// */
  /* this must be kept at bottom */
  body:not(.dark-theme) .light-hide {
    display: none;
  }
  body.dark-theme .dark-hide {
    display: none;
  }