body {
  background-color: var(--red);
  overflow: hidden;
}

.wrapper {
  font-family: Oddity;
  font-size: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: var(--red);
}

.letter {
  animation: shadow-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: calc(0.4s * var(--i) - 40s);
  animation-timing-function: ease-in-out;
}

@keyframes shadow-animation {
  from {
    text-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    transform: scale(1.02) translateY(-10px) rotate(-2deg);
    color: var(--black);
  }
  to {
    transform: rotate(2deg);
  }
}