body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}


.box {
  transform: scale(200%);
  height: 33vh;
  width: 33vw;
  display: flex;
  justify-content: center;
  align-items: center;
}


.text {
  font-size: 24px;
  font-family: 'Bodoni Moda';
  color: #ffb700;
}


span[class^="l"] {
  transition: all 0.3s ease-in-out;
}


.l1 {
  animation: 2.4s letter ease-in-out infinite;
}

.l2 {
  animation: 2.4s letter ease-in-out infinite;
  animation-delay: 0.2s;
}

.l3 {
  animation: 2.4s letter ease-in-out infinite;
  animation-delay: 0.4s;
}

.l4 {
  animation: 2.4s letter ease-in-out infinite;
  animation-delay: 0.6s;
}

.l5 {
  animation: 2.4s letter ease-in-out infinite;
  animation-delay: 0.6s;
}

.l6 {
  animation: 2.4s letter ease-in-out infinite;
  animation-delay: 0.4s;
}

.l7 {
  animation: 2.4s letter ease-in-out infinite;
  animation-delay: 0.2s;
}

.l8 {
  animation: 2.4s letter ease-in-out infinite;
}







@keyframes letter {
  0% { 
    font-size: 2rem; font-variation-settings: "wght" 400, "opsz" 96;
    padding-left: 0;
    padding-right: 0;
  }
  50% { 
    font-size: 4rem; font-variation-settings: "wght" 900, "opsz" 6;
    padding-left: 0;
    padding-right: 0;
  }
  100% {
    font-size: 2rem; font-variation-settings: "wght" 400, "opsz" 96;
    padding-left: 0;
    padding-right: 0;
  }
}