.header__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  margin: 0;
  font-family: "SuperWoobly", serif;
  font-size: inherit;
  font-weight: normal;
  color: var(--color-black);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header__title span {
  position: relative;
  display: inline-block;
  font-size: clamp(1.5rem, 7vw, 4.5rem);
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Animation */
.header__title span.letter-01 {
  animation-name: float-tilt-1;
  animation-delay: 0.2s;
}

.header__title span.letter-02 {
  animation-name: float-tilt-2;
  animation-delay: 0.4s;
}

.header__title span.letter-03 {
  animation-name: float-tilt-3;
  animation-delay: 0.6s;
}

.header__title span.letter-04 {
  animation-name: float-tilt-4;
  animation-delay: 0.8s;
}

.header__title span.letter-05 {
  animation-name: float-tilt-5;
  animation-delay: 1s;
}

.header__title span.letter-06 {
  animation-name: float-tilt-6;
  animation-delay: 1.2s;
}

.header__title span.letter-07 {
  animation-name: float-tilt-7;
  animation-delay: 1.4s;
}

.header__title span.letter-08 {
  animation-name: float-tilt-8;
  animation-delay: 1.6s;
}

.header__title span.letter-09 {
  animation-name: float-tilt-9;
  animation-delay: 1.8s;
}

.header__title span.letter-10 {
  animation-name: float-tilt-10;
  animation-delay: 2s;
}

.header__title span.letter-11 {
  animation-name: float-tilt-11;
  animation-delay: 2.2s;
}

.header__title span.letter-12 {
  animation-name: float-tilt-12;
  animation-delay: 2.4s;
}

/* Keyframes */
@keyframes float-tilt-1 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(10px) rotate(5deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-2 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(12px) rotate(-5deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-3 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(8px) rotate(3deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-4 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(15px) rotate(-3deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-5 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(12px) rotate(7deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-6 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(8px) rotate(-7deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-7 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(10px) rotate(4deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-8 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(12px) rotate(-4deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-9 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(14px) rotate(6deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-10 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(10px) rotate(-6deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-11 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(12px) rotate(2deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float-tilt-12 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(14px) rotate(-2deg) scale(1.2);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@media (max-width: 560px) {
  .header__title span {
    font-size: clamp(3rem, 6vw, 3.5rem);
  }
}

@media (max-width: 480px) {
  .header__title span {
    font-size: clamp(1.8rem, 9vw, 4rem);
  }
}