body {
text-align: center;

  background-color: black;
  background-image: url(hintergrund.webp);
  background-size: 1800px;
  background-repeat: no-repeat;
 background-position-y: -260px;
 background-position-x: center;

} 
div {
  display: grid;
  grid-template-columns: repeat(3, 200px);
 justify-content: center
 }

.spielTasten {
 /* Basis-Styling für den krisförmigen Button */

 background-color: black; /* Hintergrundfarbe */
 border-color: white;
 border-width: 2px;
 color: white;
 width: 160px;
   text-align: center; /* Textzentrierung */
   display: inline-block; /* Inline-Block-Element */
   font-size: 30px; 
   padding: 20px;/* Schriftgröße */
   line-height: 124px; /* Liniehöhe zum Zentrieren des Textes */
   cursor: pointer; /* Mauszeiger beim Hover */
   border-radius: 50%; /* Runde Ecken (Kreis) */
   transition: background-color 0.3s; /* Übergang für Hintergrundfarbe */
   position: relative;
   margin-top: 90px;
 
}

/* Hover-Effekt */
.spielTasten:hover  {
 width: 170px;
 height: 180px;
 filter: drop-shadow(0 0 10px white);
 transition: ease-in-out  0.2ms;
 

}

img {
  z-index: -1;
}

 p{
  color: white;
 }

#titel {
  margin-top: 120px;
  font-size: 100px;
  margin-top: 0px;
  font-style:oblique;

  color: #fff;
  text-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px #ff00ff,
      0 0 30px #ff00ff,
      0 0 40px #ff00ff,
      0 0 55px #ff00ff,
      0 0 75px #ff00ff;
}


.spielTasten {


  text-shadow: 
  0 0 10px #fff,
  0 0 15px #fff,
  0 0 20px #fff,
  0 0 30px #9f1f9f,
  0 0 40px #6b1e6b,
  0 0 50px #792679,
  0 0 70px #843784,
  0 0 90px #9b3e9b;
}
#spruch{
  font-size: 30px;
  font-style:oblique;
  margin-top: -30px;
  color: #fff;
  text-shadow: 
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px #fff,
      0 0 30px #9f1f9f,
      0 0 40px #6b1e6b,
      0 0 50px #792679,
      0 0 70px #843784,
      0 0 90px #9b3e9b;
}

#resetButton {
  background-color: black;
  color: darkred;
  font-size: 25px;
 font-weight: 555;
  margin-top: 80px;
  border-radius: 5px;
 border-width: auto;
 width: fit-content;
 height: fit-content;
 border-width: 10px;
 border-color: #6b1e6b;

  
}

#resetButton:hover {

  filter: drop-shadow(0 0 40px red);
}


@media screen and (min-width: 600px) and (max-width: 1024px) {
     
 

  div {
    padding: 10px 20px; /* Optional: Größe der Buttons */

    display: flex;
    gap: 20px; /* Abstand zwischen den Buttons */
  }
     .spielTasten {
      width: 160px;
        text-align: center; 
        font-size: 30px; 
        padding: 20px;
        line-height: 124px; 
        cursor: pointer; 
        border-radius: 50%; 
        transition: background-color 0.3s; 
        margin-top: 20px;
     }

     #titel {
      margin-top: 0px;
     }

     body {
      background-position-y: -260px;
     }

};