body, html {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.container {
  mix-blend-mode: screen;
  display: flex;            
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: container-anim 10s infinite ease;
}


@keyframes container-anim {
  0% {
    transform: scale(2) skewX(10deg) skewY(15deg);
  }
  25% {
    transform: scale(1.5) skewX(20deg) skewY(10deg);
  }
  50% {
    transform: scale(1) skewX(5deg) skewY(5deg);
  }
  75% {
    transform: scale(1.5) skewX(15deg) skewY(10deg);
  }
  100% {
    transform: scale(2) skewX(10deg) skewY(15deg);
  }
}

.container .v p {
  mix-blend-mode: screen;
  font-size: 5rem;
  animation: container-v 10s infinite ease;
}

@keyframes container-v {
  0% {
    transform: scale(1) skewX(0deg) skewY(0deg);
    font-variation-settings: "wght" 900, "opsz" 96;
  }
  25% {
    transform: scale(1.5) skewX(5deg) skewY(5deg);
    font-variation-settings: "wght" 400, "opsz" 6;
  }
  50% {
    transform: scaleX(1.5) skewX(5deg) skewY(5deg);
    font-variation-settings: "wght" 900, "opsz" 6;
  }
  75% {
    transform: scale(1.5) skewX(-5deg) skewY(-5deg);
    font-variation-settings: "wght" 400, "opsz" 6;
  }
  100% {
    transform: scale(1) skewX(0deg) skewY(0deg);
    font-variation-settings: "wght" 900, "opsz" 96;
  }
}


@keyframes wacky {
  0% { font-variation-settings: "wght" 400, "opsz" 6;}
  25% { font-variation-settings: "wght" 400, "opsz" 6;}
  50% { font-variation-settings: "wght" 900, "opsz" 96;}
  75% { font-variation-settings: "wght" 900, "opsz" 96;}
  100% { font-variation-settings: "wght" 400, "opsz" 6;}
}


p {
  animation: wacky 5s infinite ease; 
  font-size: 10vh; 
  color: rgb(255, 213, 0);
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: normal;
  font-family: "Bodoni Moda", serif;
}

p:nth-child(2) { animation-delay: 0.1s; }
p:nth-child(3) { animation-delay: 0.2s; }
p:nth-child(4) { animation-delay: 0.3s; }
p:nth-child(5) { animation-delay: 0.4s; }
p:nth-child(6) { animation-delay: 0.5s; }



/* @keyframes float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(-10px) translateX(10px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(10px) translateX(-10px);
  }
} */