:root {
  --scroll-position: 0px;
}

header {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 192px;
    padding-top: 10em;
    padding-left: 4em;
    padding-right: 4em;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scrolled header {
    transform: translateY(-5.5em);
}

@media screen and (min-width: 2000px) {
  .scrolled header {
    transform: translateY(-6em);
  }
}

@media (max-width: 1200px) {
  .scrolled header {
    transform: translateY(-3em);
  }
  header {
    padding-top: 5em;
    padding-left: 1em;
    padding-right: 1em;
  }
}

@media (max-width: 860px) {
  .scrolled header {
    transform: translateY(-2.5em);
  }
}

@media (max-width: 695px) {
  header {
    position: fixed;
    top: 0;
    width: 100%;
    transition: transform 0.3s ease;
  }

  .scrollDown header {
    transform: translateY(-100%);
  }
  
  .scrollUp header {
    transform: translateY(0);
  }
}

.logo {
  content: var(--avatar);
  opacity: 1;
  transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.15s, 0s;
  transform: scale(1);
  margin-top: -1em;
}

.toggle .logo {
  opacity: 0;
  transition: opacity 0.05s ease;
  transition-delay: 0s;
}

.scrolled .logo {
  transform: scale(0.8);
}