:root {
  font-size: 100%;
  font-family: 'roboto'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}
body {
  background: white;  
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;

}
h1 {
  position: absolute;
  top: 10%;
  font-size: 100px;
  line-height: 100px;
  text-align: center;
  color: white;

}

span {
  animation-name: dance;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /*animation-fill-mode: forwards; der Stil des Elements nach Abschluss der Animation beibehalten wird und nicht auf den ursprünglichen Stil zurückgesetzt wird.*/
  animation-direction: alternate; /* damit es abwechselnd vor- und rückwärts animiert */
  animation-timing-function: ease-in-out;
  mix-blend-mode: multiply; 
  /* Tipp: */
  display: inline-block; /* erlaubt Transformation in der Zeile*/
}

#just { color: darkturquoise}
#do {color: greenyellow}
#it  {color: deeppink}


@keyframes dance {
   /* Bei 0%: Ursprüngliche Position und Größe,  */
   0% {
    transform: rotate3d(1, 1, 1, 360deg) scale(3);
   
  }

  /* Bei 50%: Horizontal und vertikal skalieren, zu einer bestimmten Timing-Funktion wechseln, */
  50% {
    transform: rotate3d(1, 1, 1, 0deg) scale(1);
  
  }

  /* Bei 100%: Zurück zur ursprünglichen Position und Größe, e */
  100% {
    transform: rotate3d(1, 1, 1, -359deg) scale(1);
   
  }
}

/*In deinem speziellen Fall, rotate3d(1, 1, 1, 360deg), bedeutet dies:

Die Rotationsachse ist durch den Vektor (1, 1, 1) definiert. Dieser Vektor zeigt in Richtung einer Diagonale im Raum und bedeutet, dass die Rotation um eine Achse erfolgt, die gleichzeitig in den X-, Y- und Z-Richtungen zeigt.

Der Rotationswinkel beträgt 360 Grad (360deg), was einer vollen Drehung um die oben genannte Achse entspricht.

Zusammengefasst bewirkt rotate3d(1, 1, 1, 360deg), dass das Element um eine 3D-Achse rotiert, die gleichmäßig in alle Raumrichtungen zeigt, und es eine volle Drehung (360 Grad) um diese Achse durchführt.*/