text {
  animation: inherit;
}
.background {
  color: hsl(324, 70%, 45%);
  animation: wheelHueColor 10s infinite;
  background-color: currentColor;
}
@supports (background-blend-mode: overlay) {
  .background {
    background-image: linear-gradient(45deg, white 10%, black 90%);
    background-blend-mode: overlay;
  }
}
@keyframes wheelHueColor {
  from, to { color: hsl(0, 70%, 45%); }
  10%      { color: hsl(40, 65%, 45%); }
  20%      { color: hsl( 36, 80%, 45%); }
  30%      { color: hsl( 72, 75%, 35%); }
  40%      { color: hsl(20, 65%, 35%); }
  50%      { color: hsl(60, 75%, 35%); }
  60%      { color: hsl(340, 75%, 35%); }
  70%      { color: hsl(360, 60%, 45%); }
  80%      { color: hsl(0, 65%, 50%); }
  90%      { color: hsl(30, 60%, 40%); }
}


/* misc */
* { margin: 0; padding: 0; }
.background {
  min-height: 100vh;
  display: flex;
}
.text {
  margin: auto;
  background: rgba(0,0,0,.75);
  padding: 1em;
}