@media (max-width: 768px) {
  #sidebar {
    position: absolute;
    width: 100%;
    height: auto;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 101;
  }

  #main {
    left: 0;
    top: 70px; /* Below the fixed header */
  }

  header {
    flex-direction: column;
    height: auto;
    padding: 1rem;
  }
}

    
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden; /* prevent double scrollbars */
      font-family: 'Latin Modern Roman', 'Computer Modern', 'STIX', 'Times New Roman', serif;
      font-size: 18px;
      line-height: 1.6;
      margin: 0;
      background-color: #ffffff;
      color: #000000;
    }
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #dfd7d7;
      color: #060000;
      z-index: 100;
      display: flex;
      align-items: center;
      padding: 0 1rem;
      justify-content: center; /* ← Add this */
    }

    header img {
      height: 100px;
    }

    #sidebar {
      position: fixed;
      top: 70px; /* below header */
      bottom: 0;
      left: 0;
      width: 20%;
      max-width: 300px;
      min-width: 200px;
      background: #f5f5f5;
      overflow-y: auto;
      border-right: 1px solid #ccc;
      padding: 1rem;
      font-size: 1.2rem; /* ~24px */
      
      
    }

    #sidebar ul li {
  margin-bottom: 1.5rem; /* ~24px spacing */
}

#sidebar .subitems {
  list-style: none;
  margin: 1rem 0 0 1rem; /* top margin adds space above first subsection */
  padding: 0 0 0 1rem;
  display: none; /* hide by default */
  
  
}

#sidebar .subitems a{

  color: #006400; /* dark green, change to your preferred color */

}


#sidebar .section .toggle {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 1.2rem;     /* match subsection size */
  font-family: inherit;  /* inherit the sidebar font */
  color: rgb(12, 15, 215);          /* set text color */
}
#sidebar .section .toggle.open::after {
  content: " ▼"; /* arrow down when open */
}
#sidebar .section .toggle::after {
  content: " ▶"; /* arrow right when closed */
}

#sidebar .section {
  margin-bottom: 2rem; /* adjust as needed */
  
}


    #main {
      position: absolute;
      top: 60px;
      left: 20%;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      padding: 1rem;
      
    }