main {
  height: 100dvh;
  display: flex;
    overflow: hidden;
    margin: 0;
    top:0;
   
  flex-direction: column;
}
      

      
            header {
       
               /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffe500+0,a00000+5,b00000+10,c00000+20,d00000+50,c00000+80,b00000+90,a00000+95,ffe500+100 */
              background: linear-gradient(to bottom,  
                #ffe500 0%,
                #a00000 5%,
                #b00000 10%,
                #c00000 20%,
                #d00000 50%,
                #c00000 80%,
                #b00000 90%,
                #a00000 95%,
                #ffe500 100%); 
              
              /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */





                padding-left: 12px;
                /* Use a flexbox layout */
                display: flex;

                /* Make a horizontal flexbox (the default) */
                flex-direction: row;

                /* The important part: vertically center the items */
                align-items: center;

                border-bottom-color: #b49800;
                border-bottom-style: ridge;
                border-bottom-width: 5px;

                border-top-color: gold;
                border-top-style: ridge;
                border-top: 5px;
                
              height: 3.5em;
                justify-content: space-between;
            }
 
      
            footer {
                
                color: #ad9e89;

                  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffe500+0,4120f9+5,db3327+10,db3327+20,e50000+50,db3327+80,e05f28+90,4120f9+95,ffe500+100 */
              /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffe500+0,a00000+5,b00000+10,c00000+20,d00000+50,c00000+80,b00000+90,a00000+95,ffe500+100 */
              background: linear-gradient(to bottom,  
                #ffff00 0%,
                #a00000 5%,
                #b00000 10%,
                #c00000 20%,
                #d00000 50%,
                #c00000 80%,
                #b00000 90%,
                #a00000 95%,
                #ffff00 100%); 
              
              /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

                padding-left: 1em;
                padding-right: 1em;
                /* Use a flexbox layout */
                display: flex;

                /* Make a horizontal flexbox (the default) */
                flex-direction: row;

                /* The important part: vertically center the items */
                align-items: center;
               
                justify-content: space-between;
                height: 2.5em;
            }      
      
      
section {
    margin:1em;
   flex: 1;
  overflow: auto;
     
          
      }
content {
    
    flex: 1;
    overflow: scroll;
    scroll-behavior: smooth;
}
      
body, html{
  margin: 0;
  padding: 0;
  height: 100dvh;
  width: 100%;
  top:0;
  overflow-y: hidden;
  
}      
      
p{
        
        font-size: clamp(1em, 1em + 0.390625vw, 2.1rem);
        line-height: 1.3em;
        padding: .2em;
        color: black;
        margin: .5em;
        font-family: "Libron"; 
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
            hyphens: auto;
         }
      
    h1, h2, h3, h3, h4, h5, h6 {
        font-family: "Bitter";
        font-weight: 700;
        font-style: normal;
        font-display: swap; 
        /* 1. Unvisited link */
        a:link {
            color: #1a73e8; /* Blue */
                }

        /* 2. Visited link */
        a:visited {
            color: #701a75; /* Purple */
                }

        /* 3. Hover state (mouse over) */
            a:hover {
                color: #e03131; /* Red */
                }

        /* 4. Active state (while being clicked) */
        a:active {
            color: #f59f00; /* Yellow/Orange */
                }
        }       
         
        h1 {color:#5b2bc0;
            font-size: calc(1.9em + 1vw);
        }     
         
        h2 {color:#005eff;
            font-size: calc(1.8em + 1vw);
        }
        
        h3 {color:#00a3bd;
            font-size: calc(1.7em + 1vw);
        }   
        
        h4 {color:#009e1e;
            font-size: calc(1.6em + 1vw);
        }   
        
        h5 {color:#d57700;
            font-size: calc(1.5em + 1vw);
        }   
        
        h6 {color:#d40000;
            font-size: calc(1.4em + 1vw);
        }       
 
/* Base Navigation Bar Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(102, 37, 5, 0.2);
  padding: 1rem 1.5rem;
  color: white;
  position: relative;
}

.logo {
  font-size: 1.5rem;
  color: #fcd000;
  font-weight: bold;
    margin-right: 1em;
}

/* Base Navigation Links (Desktop view) */
.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: #00adb5;
}

/* Hide the checkbox controller completely */
.menu-toggle {
  display: none;
}

/* Hide the hamburger icon by default (Desktop view) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger .bar {
  width: 25px;
  height: 3px;
  background-color: white;
  transition: all 0.3s ease;
}

/* Responsive Mobile Layout (Screens smaller than 768px) */
@media (max-width: 768px) {
  .hamburger {
    display: flex; /* Show the hamburger lines */
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #333;
    max-height: 0;         /* Collapsed height by default */
    overflow: hidden;     /* Hides the links while collapsed */
    transition: max-height 0.3s ease-in-out; /* Smooth slide-down animation */
    gap: 0;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #444;
  }

  /* 💡 THE MAGIC: When checkbox is checked, expand the menu */
  .menu-toggle:checked ~ .nav-links {
    max-height: 300px; /* Adjust based on the total height of your links */
  }

  /* OPTIONAL: Animate hamburger lines into an "X" when checked */
  .menu-toggle:checked ~ .hamburger .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  .menu-toggle:checked ~ .hamburger .bar:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle:checked ~ .hamburger .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}      
      
/* Style D: Glassmorphism */
.btn-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #d8ddf9;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
}  
      
.btn-primary {
  background-color: #2563eb;
  color: #d8ddf9;
}
.btn-primary:hover {
  background-color: #1d4ed8;
}
.btn-primary:active {
  transform: scale(0.98);
}