:root {
  font-size: 100%;
  font-family: 'flexa', 'roboto'; /* Der Name sollte mit den Einstellungen in fonts.css übereinstimmen */
}

body {
  margin: 0;
  background: black;
  padding-top: 100px;
}

.wrapper {
  display: grid;
  max-width: 900px; /* Feste Breite von 900px */
  background-color: none; /* Hier wird 'none' wahrscheinlich keine gültige Hintergrundfarbe sein, vielleicht 'transparent'? */
  grid-template-columns: repeat(2, 1fr); /* Zwei gleich große Spalten */
  grid-template-rows: auto; /* Automatische Höhe der Reihen */
  grid-gap: 20px;
  margin: 0 auto; /* Zentriert den Wrapper */
  transform: rotate(-15deg); /* Hier wird die Drehung um 15 Grad hinzugefügt, nicht 30 Grad */
}

.item3 {
  grid-column: span 1; /* Eine Spalte */
  background-color: darkturquoise;
  transform: rotate(15deg) scaleX(1); /* Rotation um -30 Grad */
  animation-name: dance;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* damit es abwechselnd vor- und rückwärts animiert */
  animation-timing-function: ease-in-out;
  display: inline-block; /* erlaubt Transformation in der Zeile */
}
.item3 h2 {
  font-size: 6vh;
  font-stretch: 100%;
  text-align: center;
  animation: just 2s infinite alternate ease-in-out;
}
.item4 {
  grid-column: span 1; /* Eine Spalte */
  color: greenyellow;
  animation-name: dance-just; /* Der Name des Keyframes sollte eindeutig sein */
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* damit es abwechselnd vor- und rückwärts animiert */
  animation-timing-function: ease-in-out;
  display: inline-block; /* erlaubt Transformation in der Zeile */
}
.item4 h3 {
  font-size: 6vh;
  font-stretch: 100%;
  text-align: center;
  animation: do 2s infinite alternate ease-in-out;
}

.item5 {
  grid-column: span 1; /* Eine Spalte */
  background-color: greenyellow;
  transform: rotate(30deg); /* Rotation um 30 Grad, nicht -30 Grad */
  animation-name: dance-it; /* Der Name des Keyframes sollte eindeutig sein */
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* damit es abwechselnd vor- und rückwärts animiert */
  animation-timing-function: ease-in-out;
  display: inline-block; /* erlaubt Transformation in der Zeile */
}

.item5 h4 {
  font-size: 6vh;
  font-stretch: 100%;
  text-align: center;
  animation: it 2s infinite alternate ease-in-out;
}

@keyframes dance {
  0% {
    /* Keine spezifische Transformation oder Eigenschaft definiert */
  }

  50% {
    transform: skew(30deg, 20deg) translate(50px, 0px);
    opacity: 0.5;
  }

  100% {
    transform: skew(-30deg, -20deg) rotate(-35deg); /* Hier wird die Rotation um 15 Grad ergänzt */
  }
}

@keyframes dance-just {
  0% {
    /* Keine spezifische Transformation oder Eigenschaft definiert */
  }

  50% {
    transform: skew(-30deg, -20deg) scale(0.5) ;
    opacity: 0.5;
  }

  100% {
    transform: skew(30deg, -0deg) rotate(15deg) scaleX(1); /* Hier wird die Rotation und Spiegelung angepasst */
  }
}
@keyframes dance-it {
  0% {
    /* Keine spezifische Transformation oder Eigenschaft definiert */
  }

  50% {
    transform: skew(-30deg, -20deg) scale(0.5) ;
    opacity: 0.5;
  }

  100% {
    transform: skew(30deg, -0deg) rotate(15deg) scaleX(1); /* Hier wird die Rotation und Spiegelung angepasst */
  }
}

@keyframes just {
  0% {
    transform: rotate(0deg);
    scale: 1;
    font-weight: 100;
  }

  100% {
    transform: rotate(30deg);
    scale: 4;
    font-weight: 900;
    
  }
}

@keyframes do {
  0% {
    transform: rotate(-30deg) translate3d(-50 8 8);
    scale: 4;
    font-weight: 900;
  }

  100% {
    transform: rotate(0deg);
    scale: 1;
    font-weight: 100;
  }
}

@keyframes it {
  0% {
      font-weight: 100;
  }

  100% {
    scale: 5;
    transform:rotate(-15deg);
       font-weight: 900;
    
  }
}