@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #070707;
  overflow: hidden;
  z-index: -1;
}

.background span {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 25;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: #030019;
  top: 38%;
  left: 27%;
  animation-duration: 185s;
  animation-delay: -207s;
  transform-origin: 21vw 24vh;
  box-shadow: -100vmin 0 12.995397018vmin currentColor;
}

.background span:nth-child(1) {
  color: #020618;
  top: 79%;
  left: 23%;
  animation-duration: 238s;
  animation-delay: -139s;
  transform-origin: 9vw -12vh;
  box-shadow: -100vmin 0 13.4475578189vmin currentColor;
}

.background span:nth-child(2) {
  color: #030019;
  top: 52%;
  left: 90%;
  animation-duration: 155s;
  animation-delay: -201s;
  transform-origin: 21vw -21vh;
  box-shadow: -100vmin 0 12.8566308783vmin currentColor;
}

.background span:nth-child(3) {
  color: #0b0316;
  top: 82%;
  left: 99%;
  animation-duration: 69s;
  animation-delay: -107s;
  transform-origin: 2vw -20vh;
  box-shadow: -100vmin 0 12.797924265vmin currentColor;
}

.background span:nth-child(4) {
  color: #030019;
  top: 95%;
  left: 53%;
  animation-duration: 190s;
  animation-delay: -149s;
  transform-origin: -24vw 23vh;
  box-shadow: -100vmin 0 13.3474844892vmin currentColor;
}

.background span:nth-child(5) {
  color: #020618;
  top: 55%;
  left: 29%;
  animation-duration: 249s;
  animation-delay: -18s;
  transform-origin: 12vw -8vh;
  box-shadow: -100vmin 0 13.1722582888vmin currentColor;
}

.background span:nth-child(6) {
  color: #030019;
  top: 3%;
  left: 57%;
  animation-duration: 134s;
  animation-delay: -156s;
  transform-origin: -15vw 15vh;
  box-shadow: 100vmin 0 12.9354619432vmin currentColor;
}

.background span:nth-child(7) {
  color: #030019;
  top: 62%;
  left: 53%;
  animation-duration: 109s;
  animation-delay: -38s;
  transform-origin: 7vw -16vh;
  box-shadow: 100vmin 0 13.1106826285vmin currentColor;
}

.background span:nth-child(8) {
  color: #0b0316;
  top: 20%;
  left: 6%;
  animation-duration: 103s;
  animation-delay: -214s;
  transform-origin: 18vw -17vh;
  box-shadow: -100vmin 0 13.4625138088vmin currentColor;
}

.background span:nth-child(9) {
  color: #020618;
  top: 67%;
  left: 47%;
  animation-duration: 227s;
  animation-delay: -200s;
  transform-origin: 5vw -12vh;
  box-shadow: 100vmin 0 12.7310045498vmin currentColor;
}

* {
  font-family: "Work Sans", sans-serif;
}

::-webkit-scrollbar {
  display: none;
}

header {
  width: 100%;
  height: 90vh;
}
header h1 {
  font-size: clamp(1rem, 5vw, 4rem);
  text-align: center;
  user-select: none;
}

div.scroll-container {
  height: 10vh;
}
div.scroll-container a.scroll-helper {
  text-decoration: none;
  color: white;
  text-align: center;
  transition: 0.5s;
}
div.scroll-container a.scroll-helper:hover {
  transition: 0.5s;
  transform: scale(1.25);
}

.special-emphasis {
  font-family: "Pacifico", cursive;
  letter-spacing: 0.6666666667rem;
  font-weight: bold;
  font-size: 2.5em;
  text-decoration: none;
  color: transparent;
  background: url("/public/assets/wave.svg") repeat-x #fff;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  background-position-x: 0;
  background-position-y: 2em;
  -webkit-transition: background-position-y 0.6sease;
  transition: background-position-y 0.6s ease;
  -webkit-animation: waveAnimation 2s infinite linear;
  animation: waveAnimation 2s infinite linear;
  animation-play-state: running;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.special-emphasis:hover {
  background-position-x: 0;
  background-position-y: 0;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

@keyframes waveAnimation {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 200%;
  }
}

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