@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }

  :root{
    --primary_color: #9ffe1f;
    --secondary_color: #010101;
  }

  body {min-height: 100vh;line-height: 1.5;-webkit-font-smoothing: antialiased;}

  img, picture, video, canvas, svg {display: block;max-width: 100%;}
  input, button, textarea, select {font: inherit;}
  p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
  h1, h2, h3, h4, h5, h6 {text-wrap: balance;}

  #root, #__next {
    isolation: isolate;
  }
}


header{position: fixed;top: 0;width: 100%;padding:30px 10%;display: flex; justify-content: space-between;align-items: center;z-index: 5;}
#logo_wrap{flex-basis: 80px;}
nav ul{display: flex;flex-direction: row;list-style-type: none;}
nav ul a{text-decoration: none;color: #010200;padding: 15px 30px;}
nav ul a:hover{text-decoration: underline;text-underline-offset: 6px;}

#menu_but {
  display: none;
}

#cta_postJob{background-color: var(--primary_color);border-radius: 100px;}

@keyframes header_bg {
  from {background-color: transparent;padding: 30px 10%;}
  to {background-color: #fff;padding: 10px 10%;}
}
  
.add_header_bg{animation-name: header_bg;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: forwards;box-shadow: 0px 0px 10px #b8c0cc;}

@media (max-width: 864px){


#logo_wrap{flex-basis: 60px;}
#menu_but {
  display: block;
}

.bar1,.bar2,.bar3 {width: 26px;height: 2px;background-color: var(--secondary_color);margin: 6px 0;transition: 0.4s;}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-4px, 6px);
  background-color: #c7c7c7;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
  background-color: #c7c7c7;
}

nav ul {
    display: none;
    width: 100%;
    position: absolute;
    background: #020202;
    top: 120px;
    z-index: -1;
    left: 0;
    padding:0 10%;
    overflow: hidden;
    transition: height 2s;
    height: 0px;
}

nav ul li{margin: 30px 0;}
nav ul a{text-decoration: none;color: #fff;padding: 10px 15px;}
nav ul a:hover{text-decoration: underline;text-underline-offset: 6px;}
#cta_postJob{background-color: var(--primary_color);color: var(--secondary_color);border-radius: 100px;}

@keyframes appear_nav {
  from {height: 0px;}
  to {height: 317px;}
}
  .nav_show {
    display: block;
    animation-name: appear_nav;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }


@keyframes fadeIn_bg {
  from {opacity: 0.5;}
  to {opacity: 0.95;}
}

.animate_header{
background: #020202;
animation-name: fadeIn_bg;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
}