*,
body {
  background-color: rgb(255, 238, 0);
  overflow: hidden;

}
/* Grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 3px;
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 238, 0);
}
/* Grid */

/* Ausgangslage alle SVG */

svg {
  width: 100%;
  height: 100%;
  fill: black;
  transform: scale(1, 1);
}

/* alle Buchstaben im Anfangszustand*/
.letter {
  opacity: 100;
  display: flex;
  transform: translateX(-50px) scale(1);
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: 0s;
  align-items: center;
  justify-content: center;
}

.letter path {
  transition: transform 0.3s ease-in-out;
  transform-origin: left;
}

/* Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Platzierung von jedem einzelnen Buchstaben; breiter Bildschirm */
.letter.N {
  grid-column: 1/5; /* Position Spalte */
  grid-row: 1/2; /* Position Zeile */
  transition: transform 0.3s ease-in-out; /* smoother Übergang */
  animation-delay: 0.5s; /* Animation, jeder Buchstabe kommt 0.5 Sekunden versetzt*/
}

.letter.N:hover path {
  transform: scale(5, 1);
}

.letter.O-1 {
  grid-column: 5/9;
  grid-row: 1/2;
  transition: transform 0.3s ease-in-out;
  animation-delay: 1s;
}
.letter.O-1:hover path {
  transform: scale(4, 1);
}

.letter.M-1 {
  grid-column: 1/5;
  grid-row: 2/3;
  transition: transform 0.3s ease-in-out;
  animation-delay: 1.5s;
}

.letter.M-1:hover path {
  transform: scale(2, 1);
}

.letter.O-2 {
  grid-column: 5/9;
  grid-row: 2/3;
  animation-delay: 2s;
}
.letter.O-2:hover path {
  transform: scale(4, 1);
}
.letter.R-1 {
  grid-column: 1/3;
  grid-row: 3/4;
  animation-delay: 2.5s;
}

.letter.R-1:hover path {
  transform: scale(2, 1);
}

.letter.E-1 {
  grid-column: 3/5;
  grid-row: 3/4;
  animation-delay: 3s;
}

.letter.E-1:hover path {
  transform: scale(2, 1);
  animation-delay: 3.5s;
}

.letter.R-2 {
  grid-column: 5/7;
  grid-row: 3/4;
  animation-delay: 4s;
}

.letter.R-2:hover path {
  transform: scale(2, 1);
}

.letter.O-3 {
  grid-column: 7/9;
  grid-row: 3/4;
  animation-delay: 4.5s;
}

.letter.O-3:hover path {
  transform: scale(2, 1);
}

.letter.O-4 {
  grid-column: 1/5;
  grid-row: 4/5;
  animation-delay: 5s;
}
.letter.O-4:hover path {
  transform: scale(4, 1);
}

.letter.M-2 {
  grid-column: 5/9;
  grid-row: 4/5;
  animation-delay: 5.5s;
}

.letter.M-2:hover path {
  transform: scale(2, 1);
}

/* Media Query für kleine Bildschirme */
@media screen and (max-width: 640px) {
  /* Neue Gridanordnung */

  .grid {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-template-rows: repeat(8, minmax(90px, 1fr));
  }

  /* Neue Platzierungen */
  .letter.N {
    grid-column: 1/5;
    grid-row: 1/2;
  }
  .letter.O-1 {
    grid-column: 1/5;
    grid-row: 2/3;
  }
  .letter.M-1 {
    grid-column: 1/5;
    grid-row: 3/4;
  }
  .letter.O-2 {
    grid-column: 1/5;
    grid-row: 4/5;
  }
  .letter.R-1 {
    grid-column: 1/3;
    grid-row: 5/6;
  }
  .letter.E-1 {
    grid-column: 3/5;
    grid-row: 5/6;
  }
  .letter.R-2 {
    grid-column: 1/3;
    grid-row: 6/7;
  }
  .letter.O-3 {
    grid-column: 3/5;
    grid-row: 6/7;
  }
  .letter.O-4 {
    grid-column: 1/5;
    grid-row: 7/8;
  }
  .letter.M-2 {
    grid-column: 1/5;
    grid-row: 8/9;
  }
}