* {
    margin: 0;
    padding: 0;
}
body, html {
    min-height: 100vh;
    width: 100%;
}


#main-wrapper {
    background-color: rgb(23, 160, 46);
        min-height: 100vh;
    width: 100%;
}

        


/* ==========================
           NAV
========================== */
nav {
  font-size: 2.2rem;
  padding-top: 15px;
  letter-spacing: var(--heading-spacing);
  background-color: var(--gray);
  transition: 0.2s ease-in-out;
  width: 100%;
}


.hamburger {
  display: none;
  cursor: pointer;
  padding: 5px;
  user-select: none;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: var(--red);
  margin: 5px 0;
  transition: 0.3s;
  box-shadow: 4px 4px 8px rgba(11, 11, 11, 0.95);
}

.hamburger:hover { color: var(--bright); }


@media (max-width: 920px) {
  nav ul { gap: 2rem; }
} 

@media (max-width: 772px) {
  body, html { font-size: 0.8rem; }
  #wrapper, #content { min-height: 100%;}

  nav { padding: 5px 0 0 5px; }
  .menu {
    width: 100%;
    display: inline-block; 
    text-align: center;
    border-left: 12px solid rgba(0,0,0,0);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .menu.open { max-height: 300px; }

  nav .link-li {
    margin: 10px 5px;
    border-left: 12px solid var(--gray);
    display: flex; justify-content: center; transition: 0.3s ease-in-out; 
    border-bottom: none;
    border-radius: var(--b-radius);
  }

  nav .link-li:hover {
    border-left: 12px solid var(--red2);
    border-radius: var(--b-radius);
  }
  
  nav .link-li-active {
    color: var(--orange);
    background-color: rgba(109, 51, 99, 0.281);
    border-left: 12px solid var(--red2); 
    border-radius: var(--b-radius);
    margin: 10px 5px;
  }

  .menu.open { max-height: 300px; }
  .hamburger { display: block; }
  .hamburger.open div:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open div:nth-child(2) { opacity: 0; }
  .hamburger.open div:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .hamburger:hover, .hamburger:active, .hamburger:focus { color: var(--hilight); }

  .social-icons li { font-size: 1rem;}

  footer { font-size:0.8rem;}
  
  .file-list { font-size: 0.6rem; }
  .td-mtime, .th-mtime { display: none; }

  h1, h2, h3 { letter-spacing: 1px; }
  #specs-block .material-symbols-outlined { font-size: 12px; gap: 0.1rem; }
}