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

.grid-container {
  display: grid;
  grid-template-columns: auto auto; /* Ä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: 150px;
  height: 150px;
  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: 100px;
  text-align: center;
  /* Animationseffekt */
  animation-name: moveit;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

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

.j2 {
  background: yellowgreen; /* Hintergrundfarbe für das zweite 'j' */
  transform: skewY(-45deg) translateY(-75px) translateX(-38px) scaleX(0.5);
  /* Anpassung der Werte, um die Lücke zu minimieren */
}
.j2.letter {
  background: yellowgreen; /* 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: 1;
  }
  to {
    font-weight: 950;
  }
}

@keyframes moveit-reverse {
  from {
    font-weight: 950;
  }
  to {
    font-weight: 1;
  }
}