@keyframes rgb {
  0% {
    color: hsl(120, 39%, 49%);
  }
  20% {
    color: hsl(192, 48%, 48%);
  }
  40% {
    color: hsl(264, 90%, 58%);
  }
  60% {
    color: hsl(357, 89%, 50%);
  }
  80% {
    color: hsl(46, 100%, 51%);
  }
  100% {
    color: hsl(120, 39%, 49%);
  }
}

@keyframes rgb-bg {
  0% {
    background: hsl(120, 39%, 49%);
  }
  20% {
    background: hsl(192, 48%, 48%);
  }
  40% {
    background: hsl(264, 90%, 58%);
  }
  60% {
    background: hsl(357, 89%, 50%);
  }
  80% {
    background: hsl(46, 100%, 51%);
  }
  100% {
    background: hsl(120, 39%, 49%);
  }
}

@keyframes rgb-fill {
  0% {
    fill: hsl(120, 39%, 49%);
  }
  20% {
    fill: hsl(192, 48%, 48%);
  }
  40% {
    fill: hsl(264, 90%, 58%);
  }
  60% {
    fill: hsl(357, 89%, 50%);
  }
  80% {
    fill: hsl(46, 100%, 51%);
  }
  100% {
    fill: hsl(120, 39%, 49%);
  }
}

.pageSettings .section .buttons button.active,
.pageSettings .section.languages .buttons .language.active,
.pageAccount .group.filterButtons .buttons button.active {
  animation: rgb-bg 5s linear infinite;
}

#caret {
  animation: rgb-bg 5s linear infinite !important;
}

header[data-focused] {
  & [data-ui-element="logoSubtext"] {
    animation: none;
  }
  & [data-ui-element="logo"] svg path {
    animation: none;
  }
}

[data-ui-element="logoSubtext"],
#result .stats .group .bottom,
[data-nav-item]:hover,
footer button:hover,
#words.flipped .word,
footer a:hover,
a:not(.button):not([data-ui-variant="button"]):hover {
  animation: rgb 5s linear infinite;
}

#words {
  --correct-letter-animation: rgb 5s linear infinite;
}

#words.flipped {
  --correct-letter-animation: none;
  --untyped-letter-animation: rgb 5s linear infinite;
}

header [data-ui-element="logo"] svg path,
header [data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg path {
  animation: rgb-fill 5s linear infinite;
}

[data-ui-element="accountMenu"] a:hover,
[data-ui-element="accountMenu"] button:hover {
  animation: none;
}