@keyframes anim_colorshift {
  0% { color: red; }
  14.29% { color: orange; }
  28.57% { color: yellow; }
  42.86% { color: green; }
  57.14% { color: cyan; }
  71.43% { color: blue; }
  85.71% { color: violet; }
  100% { color: red; }
/*
  0% { color: hsl(0deg, 100%, 50%); }
  12.5% { color: hsl(45deg, 100%, 50%); }
  25% { color: hsl(90deg, 100%, 50%); }
  37.5% { color: hsl(135deg, 100%, 50%); }
  50% { color: hsl(180deg, 100%, 50%); }
  62.5% { color: hsl(225deg, 100%, 50%); }
  75% { color: hsl(270deg, 100%, 50%); }
  87.5% { color: hsl(315deg, 100%, 50%); }
  100% { color: hsl(360deg, 100%, 50%); }
*/
}

@keyframes anim_spin {
  0% { transform: rotateZ(0turn) rotate3d(0, 1, 0.5, 0turn); }
  100% { transform: rotateZ(1turn) rotate3d(0, 1, 0.5, 1turn); }
}

body {
  /* background-image: url("resources/floppa.jpg"); */
  font-weight: bold;
  color: magenta;

  animation-name: anim_colorshift;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;

  background-image: url("resources/wait.webp");
  /* background-size: 3px; */
  background-size: 100%;
}

h1 {
  animation-name: anim_spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

p {
  display: flex;
  justify-content: center;
  align-items: center;
}