/* Clear out these styles to start fresh or use this as a base! */


.rainbow-text.animated .char {
    animation: rainbow-colors 2s linear infinite;
    animation-delay: calc(-2s * var(--char-percent));
}

/* Unfortunately, browsers try to take the shortest distance between transition/animation properties, so a simple `0turn` to `1turn` doesn't get the proper effect. */
@keyframes rainbow-colors {
    0% {
        color: hsl(197, 97%, 66%, 1);
    }
    25% {
        color: hsl(0, 100%, 100%, 1);
    }
    50% {
        color: hsl(348, 83%, 81%, 1);
    }
    75% {
        color: hsl(.75turn, 90%, 65%);
    }
    100% {
        color: hsl(1turn, 90%, 65%);
    }
}