/* 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: 1px;
}

.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% {transform: scaleY(1); /*scaleX/Y verboten mit font-stretch arbeiten.  */
    } ;
  100% {transform: scaleY(-1); /*scaleX/Y verboten mit font-stretch arbeiten.  */
  }
}
@keyframes animateU {
  0% {transform: scaleX(1); /*scaleX/Y verboten mit font-stretch arbeiten.  */
    } ;
  100% {transform: scaleX(-1); /*scaleX/Y verboten mit font-stretch arbeiten.  */
  }
}
@keyframes animateS {
  0% {transform: skew(30deg, 20deg)
    } 
  100% {transform: skew(-30deg, -20deg)
    };
}
@keyframes animateT1 {
  0% {transform: scale(1)}  /*scaleX/Y verboten mit font-stretch arbeiten.  */
  100% {transform: scale(0.5)}; /*scaleX/Y verboten mit font-stretch arbeiten.  */
}
@keyframes animateD {
  0% {transform: translateY(-30px)} 
  100% {transform: translateY(30px)};
} 
@keyframes animateO {
  0% {transform: translateX(-20px)} 
  100% {transform: translateX(20px)};
} 
@keyframes animateI {
  0% {transform: rotate(0)} 
  100% {transform: rotate(0.5turn)};
} 
@keyframes animateT2 {
  0% {transform: translateX(0.5rem)} 
  100% {transform: translateX(2rem)};
}

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