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

@import url(https://fonts.googleapis.com/css?family=Kanit:600);

html { height: 100%; display: flex; }
body { margin: auto; }
html, body {
  background: #black;
  color: #FFF;
  font: normal 600 7vw/1.5 Kanit, sans-serif;
  text-align: center;
}

.rainbow-text .char { 
  
  color: hsl(
    calc(360deg * var(--char-percent)
    ), 
    90%, 
    65%
  );
 
}

.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%); }
}

body {
  background-color: black;
}
a {
  text-decoration: none
}
a {
  color: #ffffff;
}