@font-face {
  font-family: 'Norwester';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/norwester@latest/latin-400-normal.woff2') format('woff2');
} 
body   {
    background-color: black;
    margin: 0;
    padding: 0;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    background-color: grey;
    border-radius: 100px;
}



nav img {
    width: 50px;
    height: 50px;
    transition: transform 0.2s ease-in-out;
}

nav img:hover {
    transform: scale(1.1);
}

nav p {
    color: white;
    font-size: 20px;
    font-family: 'Norwester', sans-serif;
    transition: transform 0.2s ease-in-out;
}

.nav-item {
    color: white;
    font-size: 20px;
    font-family: 'Norwester', sans-serif;
    
}

.nav-item p:hover {
    color: yellow; 
    transform: scale(1.1);

}

/* Hauptcontainer */
.grid-container {
  display: grid;
  /* 6 Spalten für ein perfekt zentriertes 3-oben / 2-unten Layout */
  grid-template-columns: repeat(6, 1fr);
  gap: 200px; /* Dieser Wert regelt den Abstand für ALLE Bilder gleichzeitig */
  max-width: 1300px; /* Maximale Breite anpassen, falls es zu gedrungen wirkt */
  margin: 100px auto; /* Zentriert das gesamte Grid auf der Seite */
  justify-items: center; /* Zentriert die Bilder horizontal in ihren Zellen */
  align-items: center; /* Zentriert die Bilder vertikal in ihren Zellen */
}

/* Bilder responsive machen und Hover-Effekt hinzufügen */
.grid-container img {
  max-width: 100%;
  height: auto;
  scale: 1.5;
  transition: transform 0.2s ease-in-out;
}

.grid-container img:hover {
  transform: scale(1.05);
}

/* --- Perfekte, mathematische Positionierung --- */

/* Zayin - Oben Links */
.grid-item1 {
  grid-column: 1 / 3; /* Belegt die Spalten 1 und 2 */
  grid-row: 1;
}

/* Teth - Oben Mitte */
.grid-item2 {
  grid-column: 3 / 5; /* Belegt die Spalten 3 und 4 */
  grid-row: 1;
}

/* He - Oben Rechts */
.grid-item3 {
  grid-column: 5 / 7; /* Belegt die Spalten 5 und 6 */
  grid-row: 1;
}

/* Waw - Unten Links (Zentriert genau zwischen Zayin und Teth) */
.grid-item4 {
  grid-column: 2 / 4; /* Belegt die Spalten 2 und 3 */
  grid-row: 2;
}

/* Aleph - Unten Rechts (Zentriert genau zwischen Teth und He) */
.grid-item5 {
  grid-column: 4 / 6; /* Belegt die Spalten 4 und 5 */
  grid-row: 2;
}

.nav-item a:hover {
    color: yellow; 
    transform: scale(1.1);

}
nav a {
    color: white;
    font-size: 20px;
    font-family: 'Norwester', sans-serif;
    transition: transform 0.2s ease-in-out;
}