:root {
  font-size: 100%;
  font-family: 'roboto';
  --rotation-speed: 4s;
  --font-scale: 3;
  --font-weight-start: 100;
  --font-weight-end: 700;
 }
 
 body {
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
 }
 
 h1 {
  font-size: 50px;
  text-align: center;
  font-weight: 700;
  color: white;
  position: relative;
  animation-name: animateText;
  animation-duration: var(--rotation-speed);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: easeInOutBack;
 }
 
 span.rotating-letter {
  color: darkturquoise;
  opacity: 0.7;
  animation-name: rotateAndMove;
  animation-duration: var(--rotation-speed);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: easeInOutBack;
  display: inline-block;
  transform-origin: center; /* Setze den Transformationsursprung auf das Zentrum des rotating-letter */
 }
 
 @keyframes rotateAndMove {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    font-variation-settings: "wght" var(--font-weight-start);
  }
  50% {
    transform: scale(var(--font-scale)) rotate(360deg) ;
    font-variation-settings: "wght" var(--font-weight-end);
  }
 }
 
 @keyframes animateText {
  from {
    transform: scale(1) rotate(0deg);
    font-variation-settings: "wght" var(--font-weight-start);
  }
  to {
    transform: scale(var(--font-scale)) rotate(360deg) ;
    font-variation-settings: "wght" var(--font-weight-end);
  }
 }
 
 .grid-container {
  display: grid;
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
 }