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

.container {
  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);
  }
}



@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; }