header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  padding: var(--site-header-padding) var(--container-padding);
  font-family: var(--body-font-family);

  #logo > a > svg {
    width: 190px;
    pointer-events: none;
  }
}

.hidden {
  pointer-events: none;
  animation: hide-header 0.6s cubic-bezier(.54,.38,.25,.98) forwards;
}
.visible {
  animation: show-header 0.6s cubic-bezier(.54,.38,.25,.98) forwards;
}

@keyframes hide-header {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes show-header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding-top: 45px;
}

.header-holder {
  height: var(--site-header-height);
}

/* MOBILE HEADER */

.mobile-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  padding: 20px;
  background-color: var(--color-brown);
  -webkit-clip-path: polygon(0 0,100% 0,100% 0,0 0);
  clip-path: polygon(0 0,100% 0,100% 0,0 0);
  transition: clip-path .5s cubic-bezier(.86,0,.07,.995), -webkit-clip-path .5s cubic-bezier(.86,0,.07,.995);

  .mobile-menu-links {
    
    & ul {
      display: flex;
      flex-direction: column;
      font-family: var(--title-font-family);
      font-size: 2.5rem;

      & li {
        transition: opacity .35s cubic-bezier(.86,0,.07,.995);
        opacity: 0;
      }

      & :nth-child(1) {
        transition-delay: .2s;
      }
      & :nth-child(2) {
        transition-delay: .25s;
      }
      & :nth-child(3) {
        transition-delay: .3s;
      }
      & :nth-child(4) {
        transition-delay: .35s;
      }
    }
  }

  .references {
    display: flex;
    justify-content: space-between;
  }
}

.mobile-header.active {
  transition-duration: 1s;
  pointer-events: auto;
  -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);

  .mobile-menu-link {
    transition-duration: .5s;
    opacity: 1;
  }
}

.mobile-link-active {
  color: var(--color-light-reduced-opacity);
}

/* HAMBURGER ICON */

.hamburger {
  display: none;
  width: 50px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: flex-end;
  padding-bottom: 5px;
  z-index: 10;

  .top {
    stroke-dasharray: 20 139;
  }
  
  .middle {
    stroke-dasharray: 40 180;
  }
  
  .bottom {
    stroke-dasharray: 30 180;
  }
}

.hamburger.active .top {
  stroke-dashoffset: -120px;
}

.hamburger.active .bottom {
  stroke-dashoffset: -138px;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:var(--color-light);
  stroke-width:4;
  stroke-linecap:round;
}

/* RESPONSIVE */

@media screen and (width <= 768px) {
  #logo > a > svg {
    width: 160px;
  }

  .main-header {
    display: none;
  }

  .hamburger {
    display: block;
  }
}