* {
  padding: 0;
  margin: 0;
  border: 0;
}
/* Das '*' ist ein Wildcard, der die Standardstile für alle Elemente entfernt, da einige Browser möglicherweise Standardstile hinzufügen, was zu Layoutproblemen führen könnte. */

body {
  width: 100%;
  height: 100%;
}
/* Setzt die Höhe und Breite des Body auf 100%, sodass es sich automatisch an die Browser-Bildschirmgröße anpasst. */

#container {
  position: relative;
  width: 660px;
  height: 450px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 1px;
}
/* Dies ist das DIV, das alle Elemente umschließt. Es hat eine Breite von 620px und eine Höhe von 450px. Diese Größe kann erhöht werden, aber nicht verringert. Sie sollte groß genug sein, um alle internen Elemente zu enthalten. */

#game {
  position: absolute;
  width: 500px;
  height: 400px;
  border-radius: 5px;
  display: inline-block;
  background-color: #ffe171;
  box-shadow: 0 0 10px #ffe171;
}
/* Dies ist das DIV für den Spielbereich. Die Größe wird basierend auf der Größe der kleineren Blöcke berechnet. Hier sind die Blöcke auf 150px x 150px gesetzt, sodass der Spielbereich 150px * 3 = 450px beträgt. */

#game div {
  position: absolute;
  width: 99px;
  height: 99px;
  box-shadow: 1px 1px 2px #777;
  background-color: #20a6fa;
  color: white;
  text-align: center;
  font-size: 100px;
  line-height: 100px;
  cursor: pointer;
  -webkit-transition: 0.3s; /* Browser-Präfix für Chrome-Kompatibilität */
  -moz-transition: 0.3s; /* Für Firefox */
  -ms-transition: 0.3s; /* Für IE */
  -o-transition: 0.3s; /* Für Opera */
  transition: 0.3s;
}
/* Dies setzt die Größe der kleinen Blöcke. Sie werden als absolut positioniert, sodass Änderungen an der Position nicht die Position anderer Elemente beeinflussen. Die Breite und Höhe sind beide 149px. Bemerkenswert ist die Box-Shadow, die die Gesamtgröße erhöht. Die Eigenschaft 'transition:0.3s' lässt Änderungen als Animation erscheinen, sodass wenn die Position des Blocks sich ändert, automatisch eine Animation abgespielt wird. */

#game div:hover {
  color: #ffe171;
}
/* Setzt die Maus-Hover-Animation für die Blöcke. Wenn die Maus über einem Element schwebt, ersetzen diese Eigenschaften die oben genannten, und es kehrt zurück zum Ursprung, wenn die Maus weg bewegt wird. Hier ändern wir die Schriftfarbe. */

#control {
  width: 150px;
  height: 450px;
  display: inline-block;
  float: right;
}
/* Steuersektion. 'display:inline-block' lässt das Element die Block-Eigenschaften beibehalten, ohne eine volle Zeile zu beanspruchen, und 'float:right' positioniert es auf der rechten Seite. */

#control rowspan {
  height: 25px;
  font-size: 20px;
  color: #222;
  margin-top: 10px;
}
/* Allgemeine Stile für die Buttons in der Steuersektion. */

#start {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #4c98f5;
  text-align: center;
  cursor: pointer;
}
/* Stile für den 'Start'-Button. 'cursor:pointer' lässt den Cursor sich zu einer Hand-Symbol ändern, wenn man darüber schwebt. */

#reset {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171; /* Schrift-Schatten */
  border-radius: 5px; /* Runde Ecken */
  box-shadow: 2px 2px 5px #4c98f5; /* Box-Schatten */
  text-align: center; /* Text zentrieren */
  cursor: pointer;
}
/* Stile für den 'Reset'-Button. */

#d1 {
  left: 0px;
}
#d2 {
  left: 150px;
}
#d3 {
  left: 300px;
}
#d4 {
  top: 150px;
}
#d5 {
  top: 150px;
  left: 150px;
}
#d6 {
  top: 150px;
  left: 300px;
}
#d7 {
  top: 300px;
}
#d8 {
  left: 150px;
  top: 300px;
}
#d9 {
  left: 150px;
  top: 300px;
}
#d10 {
  left: 150px;
  top: 300px;
}
#d11 {
  left: 150px;
  top: 300px;
}
#d12 {
  left: 150px;
  top: 300px;
}
/* Vordefinierte Positionen für jedes der Blöcke in der Reihenfolge. */