moving rainbow

gistfile1.html

<style>
  html {
      font-size: 2rem;
      /* font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; */
      font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  }
  @keyframes rainbow_animation {
      0% {
	  background-position: 0%
      }
      100% {
	  background-position: 100%
      }
  }
  .rainbow {
      font-weight: 900;
      letter-spacing: -0.0355rem;
      /* font-weight: bold; */
      /* letter-spacing: -0.03rem; */
      /* letter-spacing: -0.09rem; */
      background: repeating-linear-gradient(90deg, #ff3b98, #f87600, #00c200, #00bcff, #9e77ff, #ff3b98, #f87600, #00c200, #00bcff, #9e77ff, #ff3b98);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: rainbow_animation 1s linear infinite reverse;
      background-size: 200% 100%;
      @media (prefers-reduced-motion) {
	  animation-play-state: paused;
      }
      &:hover, &:active {
	  animation-play-state: paused;
      }
  } 
</style>
<p>Hi this is a <span class="rainbow">test of a moving rainbow style</span>.</p>
<p>Hi this is a test of a moving rainbow style.</p>