<div class="rainbow-text">RAINBOW</div>

<footer>inspired by <a href="https://www.mockofun.com/template/rainbow-font-generator/">Rainbow Text Generator</a> <br/>
original article <a href="https://www.coding-dude.com/wp/css/css-rainbow-text/">CSS Rainbow Text</a></footer>

:root{
  b:0.05em;
  background:black;
  display:flex;
  place-content:center;
  place-items:center;
  width:100vw;
  height:100vh;
  font-family:sans-serif;
}
.rainbow-text {
  font-size: max(30vh, 30px);
  font-weight:bold;
  color: transparent;
  text-shadow: 
    0 0 0 red;
  animation-direction: alternate;
  animation:accordion 4s infinite;
  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay:0;
}


@keyframes accordion{
  0% {
    --shadow-space:0em;
    text-shadow: 
    0 0 0 red,
    0 0 0 orange,
    0 0 0 yellow,
    0 0 0 green,
    0 0 0 blue,
    0 0 0 indigo,
    0 0 0 violet;
  } 
  
  49% {
    --shadow-space:0.1em;
    text-shadow: 
    0 calc(1 * var(--shadow-space)) 0 red,
    0 calc(2 * var(--shadow-space)) 0 orange,
    0 calc(3 * var(--shadow-space)) 0 yellow,
    0 calc(4 * var(--shadow-space)) 0 green,
    0 calc(5 * var(--shadow-space)) 0 blue,
    0 calc(6 * var(--shadow-space)) 0 indigo,
    0 calc(7 * var(--shadow-space)) 0 violet;
  } 
}

footer{
  position:absolute;
  bottom:0;
  right:0;
  color:white;
  padding:0.5em;
  font-family:sans-serif;
}
footer a{
  color:white;
  font-weight:bold;
}