*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; border: 0; }

nav ul, nav ol { list-style-type: none; padding: 0; margin: 0; } /* Remove bullets from lists in nav */


:root {
   --nav-width: 230px;
   --menu-button-width: 100px;
}

/* ==========================================================================
   PROJECT STYLES
   ========================================================================== */
body {
   background: black;
   font-family: Ariel, sans-serif;
   font-size: 13px;
}

/* header styles */



.logo {
   display: flex;
   align-items: center;
   border-top: 3px solid black;
   border-bottom: 3px solid black;
   width: 200px;
   margin-top: 10px;
   color: black;
}
.logo #logo-text-large {
   font-size: 48px;
   margin: 0;
   margin-top: 15px;
   margin-bottom: 15px;
   margin-right: 10px;
   display: inline-block;
   font-weight: bold;
   font-style: italic;
}
.logo #logo-text-small {
   font-size: 13px;
   margin: 0;
   display: inline-block;
   margin-left: 3px;
}

.logo a {
   text-decoration: none;
   color: black;
}

.nav-wrapper {
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   background: white;
   width: var(--nav-width);
   /* justify-content: space-between; */
}
.nav-wrapper img {
   margin-top: 45px;
   margin-bottom: auto;
   align-self: center;
}
nav {
   text-align: center;
   margin-top: auto;
   margin-bottom: auto;
}
nav a {
   display: inline-block;
   color: black;
   text-decoration: none;
   font-weight: bold; 
   margin: 3px;
   padding: 10px 15px 10px 15px;
   background: orange;
   border: 5px outset orange;
   width: 150px;
}
nav a:hover {
   border: 5px inset orange;
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* THIS IS FOR THE LARGE SECTION */
   @media(min-width: 750px) {
   #nav-checkbox,
   .overlay {
      display: none;
   }
   header {
      position: fixed;
      display: none;
   }
   .body-wrapper-without-header {
      display: flex;
   }

   .menu-button,
   .nav-close {
      display: none;
   }
   
   header {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: var(--nav-width);
   }
   .empty-nav-div {
      width: var(--nav-width);
      height: 10px;
      flex-shrink: 0;
   }
   
}

/* THIS IS FOR SMALL */
@media (max-width: 750px) {
   #nav-checkbox {
      display: none;
   }
   header {
      position: fixed;
      display: absolute;
      width: 100%;
      background: white;
   }
   
   
   header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      padding-bottom: 10px;
   }
   .menu-button {
      width: var(--menu-button-width);
      text-align: center;
      z-index: 101; 
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }
   .menu-button svg{
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }
   .empty-header-div {
      width: var(--menu-button-width);
   }
   .logo {
      margin-top: 0;
   }
   .nav-wrapper .logo {
      display: none;
   }
   .nav-wrapper {
      display: flex;
      flex-direction: column;
      left: -230px;
      transition: all 0.2s ease;
   }
   #nav-checkbox:checked ~ .nav-wrapper {
      left: 0;
   }
   #nav-checkbox:checked ~ .overlay {
      display: block;
   }
   .close-button{
      cursor: pointer;
   }
   .close-button img{
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }
   .overlay {
      display: none;
      position: fixed;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0);
   }
   .empty-nav-div {
      display: none;
   }
   .body-wrapper-without-header {
      padding-top: 100px;
   }
}

@media(max-width: 450px) {
   header {
      justify-content: space-between;
   }
   .empty-header-div {
      width: 3em;
   }
   .logo {
      width: 200px;
   }
   .menu-button {
      width: 25vw;
   }
}