:root {
  font-size: 100%;
  font-family: 'gridlite'; /* Der Name 'invert' korrespondiert mit den Einstellungen in fonts.css */
}
body {
  background: black;
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px; /* Änderung: Statt 1fr verwenden wir auto für gleichmäßige Spaltenbreite */
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  width: 100%;
}

/* Container für Quadrat mit Buchstaben */
.square {
  position: relative;
  width: 100px; /* Änderung: Breite auf 100px setzen */
  height: 910px; /* Änderung: Höhe auf 450px setzen */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; /* Änderung: Kein Außenabstand für die Quadrate */
}

/* Stil für Buchstaben */
.letter {
  color: white;
  font-size: 75px; /* Änderung: Schriftgröße auf 100px setzen */
  text-align: center;
  line-height: 1.2; /* Änderung: Zeilenhöhe erhöhen */
  /* Animationseffekt */
  animation-name: moveit;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/* Farben für die Buchstaben */
.j1 {
  background: black; /* Hintergrundfarbe für das erste 'j' */
  color: white;
  animation-name: moveit-reverse;
}

.j2 {
  background: black; /* Hintergrundfarbe für das zweite 'j' */
  transform: skewY(-45deg) translateY(-50px) translateX(-25px) scaleX(0.5);
  /* Anpassung der Werte, um die Lücke zu minimieren */
}
.j2.letter {
  background: black; /* Hintergrundfarbe für das zweite 'j' */
  transform: translateY(2px);
  /* Anpassung der Werte nur für den zweiten Buchstaben, um die Lücke zu minimieren und die Position zu korrigieren */
}

/* Keyframe-Animation für den Font Weight-Effekt */
@keyframes moveit {
  from {
    font-weight: 100;
    font-variation-settings: "BACK" 100, "RECT" 100, "ELSH" 1;
  }
  to {
    font-weight: 700;

  }
}

@keyframes moveit-reverse {
  from {
    font-weight: 700;
  }
  to {
    font-weight: 100;
    font-variation-settings: "BACK" 400, "RECT" 600,  "ELSH" 3;
  }
}