header {
  height: var(--header-height);
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  z-index: 10;
}
header .icon-button {
  margin: 0 0.5rem;
}
header > div {
  height: 70%;
  margin: 0 auto;
  backdrop-filter: blur(var(--blur-heavy));
  border-radius: var(--radius);
  min-height: fit-content;
}
header > div input {
  display: none;
}
header > div input:checked + label {
  border: 2px solid var(--text-main);
}
header > div label {
  box-sizing: border-box;
  padding: 0 0.5rem;
  display: inline-flex;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  height: 100%;
  align-items: center;
  text-shadow: 1px 1px 2px black;
}
header > div label:hover {
  cursor: pointer;
  border: var(--border-width) solid var(--text-main-muted);
}
header > span {
  display: flex;
  align-items: center;
}
header > span:hover {
  cursor: default;
}
header > span input {
  display: none;
}
header > span input:checked + label {
  cursor: default;
  color: var(--text-main);
  font-weight: 500;
}
header > span label {
  color: var(--text-main-muted);
}
header > span label:hover {
  cursor: pointer;
}

a:hover > .animation-email {
  animation: slide_mail 2s ease 0s 1 normal forwards;
}
a:hover > .animation-linkedin {
  animation: slam_linkedin 1.5s ease 0s 1 normal forwards;
}
a:hover > .animation-github {
  animation: bow_github 2s linear 0s 1 normal forwards;
}

@keyframes slide_mail {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(-10px) scaleX(-1);
  }
  75% {
    transform: translateX(0px) scaleX(-1);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}
@keyframes slam_linkedin {
  0% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(45deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(30deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes bow_github {
  25% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1.5) rotateX(-60deg);
  }
  75% {
    transform: scale(1.5) rotateX(0);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (width < 480px) {
  header .icon-button {
    display: none;
  }
  header {
    display: contents;
    height: var(--header-height);
  }
  header > div {
    position: sticky;
    top: calc((var(--header-height) - var(--header-height) * 0.7) / 2);
    z-index: 10;
    width: fit-content;
    height: calc(var(--header-height) * 0.7);
  }
  header > span {
    position: absolute;
    right: var(--padding-x);
    top: calc(var(--header-height));
  }
  :root {
    --hero-items-height: calc(100vh - var(--header-height) * 0.7 * 2 - var(--header-gap) * 2);
  }
  #content > div:first-child {
    padding-top: calc(var(--header-height) * 0.7 / 2 + var(--header-gap) + 1rcap);
  }
}

/*# sourceMappingURL=header.css.map */