@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Tilt+Prism&display=swap');

body {
  margin: 0;
  padding: 0;
}
.rotation {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-family:  'Pacifico', cursive;
  font-size: 4vw;
  transform:  translateY(-50%) translateX(-50%);
}
.rotation span {
  font-size: 1em;
  list-style: none;
  float: left;
  animation: rotate 5s ease-out forwards;
}

@keyframes rotate {
  100% {transform:rotateY(360deg)
  }
}
span:nth-child(1) {
  color: red;
  animation-delay: 0s;
  
}
span:nth-child(2) {
  animation-delay: .3s;
}
span:nth-child(3) {
  animation-delay: 1.6s;
}
span:nth-child(4) {
  animation-delay: .7s;
}
span:nth-child(5) {
  animation-delay: 1.5s;
}
span:nth-child(6) {
  animation-delay: .9s;
}
span:nth-child(7) {
  animation-delay: 1.3s;
}
span:nth-child(8) {
  animation-delay: .6s;
}
span:nth-child(9) {
  animation-delay: .7s;
}
span:nth-child(10) {
  animation-delay: 1.5s;
}
span:nth-child(11) {
  animation-delay: .9s;
}
span:nth-child(12) {
  animation-delay: 1.3s;
}
span:nth-child(13) {
  animation-delay: .5s;
}
span:nth-child(14) {
  animation-delay: 1.7s;
}
span:nth-child(15) {
  animation-delay: .5s;
}
@media (max-width: 1024px) {
  .rotation {
    font-size: 6vw;
}
}
@media (max-width: 599px) {
  .rotation {
    font-size: 7vw;
}
}