:root {
  font-family: 'Ruder', sans-serif;
}

body { /* hier braucht es eher keinen Raster */
  background-color: #1D1D1D; 
  align-items: center;
  justify-content: center;
  text-align: center;

}

h1  { /* hier raster*/
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-row-gap: 5px;

}

.lettera {
  font-size: 400px;
  color: #ff352a;
  line-height: 1; /* Verschiebng Y-Achse */
  animation: anim1 1s linear infinite alternate; 

}

.letterab {
  font-size: 400px;
  line-height: 0.1; /* Verschiebng Y-Achse */
  color: #ffc5f4;
  animation: anim2 1s linear infinite alternate; 
}

@keyframes anim1 {
  0% {font-variation-settings: "opsz" 95;}
  50% {font-variation-settings: "opsz" 380; transform: translate(42px, 18px);}
  100% {font-variation-settings: "opsz" 95;}
}

@keyframes anim2 {
  0% {font-variation-settings: "opsz" 95;}
  50% {font-variation-settings: "opsz" 380; transform: translate3d(-2.7rem, 0, 1rem);}
  100% {font-variation-settings: "opsz" 95;}
}