:root {
  font-family: 'PH', sans-serif;
  font-size: 20vh;
}

body {
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rainbow-animation 0.3s linear infinite alternate; 
}

span {
  animation-name: foo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  height: 50px;
  width: 50px;
  mix-blend-mode: difference;

}

@keyframes foo {
  from {font-variation-settings: 'wtun' 100, 'wtsp' 100;}
  to {font-variation-settings: 'wtun' 900, 'wtsp' 900;}
 0% {
    color: red;
  }
  20% {
    color: orange;
  }
  40% {
    color: yellow;
  }
  60% {
    color: green;
  }
  80% {
    color: blue;
  }
  100% {
    color: violet;
  }
}

#s2 { animation-delay: 0.3s; }
#s3 { animation-delay: 0.6s; }
#s4 { animation-delay: 0.9s; }
#s5 { animation-delay: 1.2s; }
#s11 { animation-delay: 1.5s; }
#s22 { animation-delay: 1.8s; }
#s33 { animation-delay: 2.1s; }
#s44 { animation-delay: 2.4s; }
#s55 { animation-delay: 2.7s; }


@keyframes rainbow-animation {
  0% {
    background-color: red;
  }
  20% {
    background-color: orange;
  }
  40% {
    background-color: yellow;
  }
  60% {
    background-color: green;
  }
  80% {
    background-color: blue;
  }
  100% {
    background-color: violet;
  }
}