.rainbow-bg {
  animation: rainbow-bg 2.5s linear;
  animation-iteration-count: infinite;
}

.rainbow {
  animation: rainbow 2.5s linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow-bg {
  100%,
  0% {
    background-color: rgb(255, 0, 0);
  }
  8% {
    background-color: rgb(255, 127, 0);
  }
  16% {
    background-color: rgb(255, 255, 0);
  }
  25% {
    background-color: rgb(127, 255, 0);
  }
  33% {
    background-color: rgb(0, 255, 0);
  }
  41% {
    background-color: rgb(0, 255, 127);
  }
  50% {
    background-color: rgb(0, 255, 255);
  }
  58% {
    background-color: rgb(0, 127, 255);
  }
  66% {
    background-color: rgb(0, 0, 255);
  }
  75% {
    background-color: rgb(127, 0, 255);
  }
  83% {
    background-color: rgb(255, 0, 255);
  }
  91% {
    background-color: rgb(255, 0, 127);
  }
}

@keyframes rainbow {
  100%,
  0% {
    color: rgb(255, 0, 0);
  }
  8% {
    color: rgb(255, 127, 0);
  }
  16% {
    color: rgb(255, 255, 0);
  }
  25% {
    color: rgb(127, 255, 0);
  }
  33% {
    color: rgb(0, 255, 0);
  }
  41% {
    color: rgb(0, 255, 127);
  }
  50% {
    color: rgb(0, 255, 255);
  }
  58% {
    color: rgb(0, 127, 255);
  }
  66% {
    color: rgb(0, 0, 255);
  }
  75% {
    color: rgb(127, 0, 255);
  }
  83% {
    color: rgb(255, 0, 255);
  }
  91% {
    color: rgb(255, 0, 127);
  }
}

.shart {
  text-shadow: 0px 2px 0px white;
  animation-name: shart;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

@keyframes shart {
  /*https://tard.zone/ via https://webring.lain.la/*/
  0% {
    text-shadow: 0px -3px 0px white;
  }
  10% {
    text-shadow: 3px 1px 0px white;
  }
  20% {
    text-shadow: -2px 2px 0px white;
  }
  30% {
    text-shadow: 1px -1px 0px white;
  }
  40% {
    text-shadow: -3px 3px 0px white;
  }
  50% {
    text-shadow: 2px -2px 0px white;
  }
  60% {
    text-shadow: -1px 0px 0px white;
  }
  70% {
    text-shadow: 3px 3px 0px white;
  }
  80% {
    text-shadow: 0px -2px 0px white;
  }
  90% {
    text-shadow: -1px 2px 0px white;
  }
  100% {
    text-shadow: 2px 0px 0px white;
  }
}

.hue-rotate {
  animation: hue-rotation 5s linear 0ms infinite;
}

@keyframes hue-rotation {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}