.navigation {position: sticky; 
  top: 0; 
  height: 4rem;
  z-index: 1; 
  background-color: var(--background-color);
}

@media only screen and (max-width:599px){
.navspace {
  margin: 0 auto;
  width: 96%;}
  
}
@media only screen and (min-width:600px){
  .navspace {
    margin: 0 auto;
    width: 80%;}
  }

.navbar {
  font-family: "Raleway";
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-shadow: 0.3rem 0.3rem 0.5rem black;
}

.brand {font-size: 1.6rem; font-weight: bold;}
.brand a {color: var(--notwhite); transition: 0.25s ease;}
.brand a:hover {color: var(--hover-color);}

.nav-links {padding-top: 0.2rem}
.nav-links ul {font-size: 1.4rem; gap: 20px;}
.nav-links ul li a {color: var(--link-color); transition: 0.25s ease;}
.nav-links ul li a:hover {color: var(--hover-color);}

.burger {display: none; cursor: pointer; position: relative; right: 0px; width: 35px;}
.bar {background-color: var(--brand-color); display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

/* ================================================== */
@media(max-width: 1023px) {
  .burger {display: block;}
  .burger.active .bar:nth-child(2){opacity: 0;}
  .burger.active .bar:nth-child(1){transform: translateY(8px) rotate(45deg);}
  .burger.active .bar:nth-child(3){transform: translateY(-8px) rotate(-45deg);}
  .nav-links {position: fixed; left: -100%; top: 4rem; gap: 0; flex-direction: column; width: 100%; background-color: rgba(255, 255, 255, 0.20); backdrop-filter: blur(8px); transition: 0.3s;}
  .nav-links ul {margin: 0; padding-top: 1rem; line-height: 2rem; justify-content: center; padding-bottom: 2rem; font-size: 1.4rem;}
  .nav-links.active {left: 0;}
}
@media(min-width: 1024px) {
  .nav-links ul {display: flex;}
}