* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: #000;
}
body {
  display: flex;
  justify-content: center;
  align-items: top;
  max-height: 98vh; /* Macht den Body mindestens so hoch wie das Viewport */
  max-width: 98vw;
  background-color: #000; /* Beispiel-Hintergrund */
  overflow: hidden;
}
#gameWrapper {
  position: relative; /* WICHTIG: Erlaubt absolute Positionierung der Kinder */
  width: 95%;
  /* height: 100%; */
  background-image: url("../assets/img/loading.webp");
  /* background-image: url("../assets/img/efh_title.webp"); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 100%;
  /* border: 2px solid greenyellow; */
  /* width: 1750px;/*
  /* height: 900px;*/
  transition: opacity, 5s ease-in-out;
}
.buttons {
  visibility: hidden;
  opacity: 0;
  position: absolute; /* Positioniert die Buttons relativ zum #gameWrapper */
  transform: translate(-50%, -50%); /* ZENTRIERT die Buttons exakt */
  font-size: 5px;
  padding: 3px;
  align-items: center;
  top: 50%;
  left: 15%;
  transition: all 5s ease-in-out;
}
#startButton {
  top: 40%;
}
#instrButton {
  top: 50%;
}
#optionsButton {
  top: 60%;
}
#creditsButton {
  top: 70%;
}
#returnButton {
  top: 62%;
  left: 50%;
}
#mainCanvas {
  display: none; /* Entfernt eventuelle Leerräume unter dem Canvas */
  background-color: #000;
  width: 100%; /* Macht Canvas so breit wie der Wrapper */
  height: 100%; /* Macht Canvas so hoch wie der Wrapper */
  opacity: 100%;
  z-index: 5; /* Stellt sicher, dass das Canvas über anderen Elementen liegt */

  /* background-image: url("images/wallpaper.png");
  background-position: 95px 100px;
  background-size: 90%;
  background-repeat: no-repeat; */
}
#canvas2 {
  display: block; /* Entfernt eventuelle Leerräume unter dem Canvas */
  z-index: 1; /* Stellt sicher, dass das Canvas unter dem Haupt-Canvas liegt */
  background-color: #000;
  width: 100%;
  height: 100%;
  opacity: 0%;
  transition: all 5s ease-in-out;
}