/* Globale Stile */
:root {
  font-size: 100%;
  font-family: 'roboto'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}
body {
  
  background: black;
  /* display: grid;  <- Diese Zeile entfernen */
  place-items: center;
  height: 100vh;
  margin: 10%;
}

/* Stil für die animierten Buchstaben */
.animated-text {
  font-size: 65px;
  text-align: center;
  color: white;
  margin: 0;
  margin-bottom: 0;
  letter-spacing: px;
}

.animated-text .letter {
  display: inline-block;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

/* Keyframe-Animationen für jeden Buchstaben */
.animated-text .j { animation: animateJ 2s linear infinite alternate; } 
.animated-text .u { animation: animateU 2s infinite alternate; } 
.animated-text .s { animation: animateS 2s infinite alternate; } 
.animated-text .t1 { animation: animateT1 2s infinite alternate; } 
.animated-text .d { animation: animateD 2s infinite alternate; } 
.animated-text .o { animation: animateO 2s infinite alternate; } 
.animated-text .i { animation: animateI 2s infinite alternate; } 
.animated-text .t2 { animation: animateT2 2s infinite alternate; }

/* Keyframe-Animationen für jeden Buchstaben */
@keyframes animateJ {
  0% {
    font-weight: 100;
  }
  100% {
    font-weight: 900;
  }
}
@keyframes animateU {
  0% {font-stretch: 10%;
    } ;
  100% {font-stretch: 700%;
  }
}
@keyframes animateS {
  0% {font-stretch: 700%;
  } ;
100% {font-stretch: 900;
}
}
@keyframes animateT1 {
  0% {font-style: normal;
  } ;
100% {font-style: italic;
}
}
@keyframes animateD {
  0% {text-transform:lowercase;
  } ;
100% {text-transform:uppercase;
}
} 
@keyframes animateO {
  0% {font-variation-settings: "YOPQ" 30;
    
  } ;
100% {font-variation-settings: "YOPQ" 175;
}
} 
@keyframes animateI {
  0% {font-variation-settings: "YTLC" 420;
    
  } ;
100% {font-variation-settings: "YTLC" 570;
}
} 
@keyframes animateT2 {
  0% {text-transform:lowercase;
  } ;
100% {text-transform:uppercase;
}

/* Media Query für Bildschirmbreiten kleiner als 390px */
@media screen and (max-width: 390px) {
  .animated-text {
    font-size: 30px;
  }
}