.primary-header{
     background:#141414;
      position: fixed;
      width:100%;
      z-index:9999;
}
.primary-header.active{
    top:-2px;
    background-color: var(--body-black);
    opacity:1;
    z-index:999999999;
}
.nav_link:hover {
  font-weight: 800;
  background-image:linear-gradient(
    45deg,
    hsl(46deg 67% 51%) 0%,
    hsl(45deg 68% 62%) 9%,
    hsl(46deg 73% 69%) 18%,
    hsl(46deg 81% 75%) 27%,
    hsl(46deg 83% 77%) 36%,
    hsl(45deg 70% 70%) 45%,
    hsl(45deg 63% 62%) 55%,
    hsl(45deg 60% 50%) 64%,
    hsl(45deg 58% 52%) 73%,
    hsl(45deg 58% 60%) 82%,
    hsl(45deg 60% 65%) 91%,
    hsl(46deg 63% 71%) 100%
  );
  
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  transition:0.7s ease;
}
.nav_link.active{
  background-image:linear-gradient(
    45deg,
    hsl(46deg 67% 51%) 0%,
    hsl(45deg 68% 62%) 9%,
    hsl(46deg 73% 69%) 18%,
    hsl(46deg 81% 75%) 27%,
    hsl(46deg 83% 77%) 36%,
    hsl(45deg 70% 70%) 45%,
    hsl(45deg 63% 62%) 55%,
    hsl(45deg 60% 50%) 64%,
    hsl(45deg 58% 52%) 73%,
    hsl(45deg 58% 60%) 82%,
    hsl(45deg 60% 65%) 91%,
    hsl(46deg 63% 71%) 100%
  );
  
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.logo{
  width:120px;
  max-width: 150px;
  margin-top:0.5rem;
  margin-left:2rem;
  margin-bottom: 0.5rem;
}
.nav-wrapper{
  background: #141414;
  color:#fbfbfb;
  position:absolute;
  top:100%;
  left:0;
  width: 100%;
  z-index:999999;
  text-align: center;
  display:flex;
  justify-content: center;
  transform: scale(.5,0);
  transform-origin:top;
  transition: transform 400ms ease-in-out;

}

.primary-navigation:first-child{
  margin-top: 3rem;
}
.primary-navigation:last-child{
  margin-bottom: 7rem;
}
.nav-wrapper li{
  margin-bottom:1.5em;
  margin-left:1em;
  opacity:0;
  transition:opacity 10ms ease-in-out;
}

.nav_toggle{
  display:none;
}
.nav_toggle_label{
  position: absolute;
  top:0;
  right:0;
  z-index:99999;
  margin-right:1em;
  height:100%;
  display: flex;
  align-items: center;
 
}
.nav_toggle_label span{
  position: relative;
}
.nav_toggle_label span,
.nav_toggle_label::before,
.nav_toggle_label::after{
  display: block;
  height:2.5px;
  width:2.5em;
  background:linear-gradient(
    45deg,
    hsl(46deg 67% 51%) 0%,
    hsl(45deg 68% 62%) 9%,
    hsl(46deg 73% 69%) 18%,
    hsl(46deg 81% 75%) 27%,
    hsl(46deg 83% 77%) 36%,
    hsl(45deg 70% 70%) 45%,
    hsl(45deg 63% 62%) 55%,
    hsl(45deg 60% 50%) 64%,
    hsl(45deg 58% 52%) 73%,
    hsl(45deg 58% 60%) 82%,
    hsl(45deg 60% 65%) 91%,
    hsl(46deg 63% 71%) 100%
  );
  border-radius: 2px;
  
}
.nav_toggle_label::before,
.nav_toggle_label::after{
  content:'';
  position: absolute;
}
.nav_toggle_label::before{
  bottom:32px;
}
.nav_toggle_label::after{
  top:32px;
}
.nav_toggle:checked ~ nav{
  transform:scale(1,1);
}
.nav_toggle:checked ~ nav li{
  opacity:1;
  transition:opacity 250ms ease-in-out 250ms;
}

@media (min-width:830px){
  .primary-header{
    background-color: transparent;
  }
  .nav_toggle_label{
    display:none ;
  }
  .nav-wrapper{
    all:unset;
    color:#fbfbfb;

  }
  .logo{
    width:70px;
    margin-left: 1rem;
  }
  .primary-navigation{
    display:flex;
    background: #b4888858;
    background: rgba(20, 20, 20, 0.49);
    padding:0.5rem;
    gap:0.5rem;
    white-space: nowrap;
    font-size:var(--fs-75);
  
    margin-left:1rem;
   margin-right:1rem;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
  }
  .nav-wrapper li{
    opacity:1;
    margin-left:0 !important;
    margin-bottom:0 !important;
  }
  .primary-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (min-width:1024px){
  .primary-navigation{
    display:flex;
    padding:0.5rem;
    justify-content: flex-end;
    gap:1rem;
    white-space: nowrap;
    font-size:var(--fs-100);
   
   
  }
}
@media (min-width:1440px){
  .nav_toggle_label{
    display:none;
  }
  
  .logo{
    width:150px;
    margin-left: 8rem;
  }
  .primary-navigation{
    display:flex;
    padding:1rem;
    justify-content: flex-end;
    gap:1rem;
    white-space: nowrap;
    font-size:var(--fs-200);
    margin-left:1rem;
   margin-right:8rem;
   
  }
  .nav-wrapper li{
    opacity:1;
    margin-left:0 !important;
    margin-bottom:0 !important;
  }
  .primary-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}