:root {
  font-size: 40vh;
  background-color: black;
  text-align: center;
  font-family: 'muller next'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  height: 100vh;
  display:flex;
  align-items: center; 
}

h1 {
  color: white;
}

.S, .A, .L, .I, .E, .T, .AA, .B, .AAA, .C, .CC, .H, .II {
  animation: my-super-slant 4000ms infinite alternate;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* font-variation-settings: 'wght' 900;
  font-variation-settings: 'wdth' 900;  */
}

.S { 
  animation-delay: 0ms;
}

.A { 
  animation-delay: 500ms; 
}

.L { 
  animation-delay: 1000ms;
}

.I { 
  animation-delay: 1500ms;
}

.E { 
  animation-delay: 2000ms;
}

.T { 
  animation-delay: 2500ms;
}

.AA { 
  animation-delay: 3000ms;
}

.B { 
  animation-delay: 3500ms;
}

.AAA { 
  animation-delay: 4000ms;
}

.C { 
  animation-delay: 4500ms;
}

.CC { 
  animation-delay: 5000ms;
}

.H { 
  animation-delay: 5500ms;
}

.II { 
  animation-delay: 6000ms;
}

@keyframes my-super-slant {
  0% { font-variation-settings: 'wght' 900, 'wdth' 900;    }
  25% {  font-variation-settings: 'wght' 900, 'wdth' 600;   }
  50% {  font-variation-settings: 'wght' 900, 'wdth' 300;   }
  100% {  font-variation-settings: 'wght' 900, 'wdth' 0;   }
}