*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body{
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -10;
}

#cockpit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Über dem Canvas */
  pointer-events: none; /* Klicks durchlassen */
  /* Mehrere box-shadows für einen geschichteten, metallischen Rahmeneffekt */
  box-shadow:
    /* Innerer Schein von der Szene - jetzt neutraler */
    inset 0 0 100px rgba(255, 255, 200, 0.1),
    inset 0 0 50px rgba(255, 255, 200, 0.05),
    /* Äußerer Schein um den Rahmen */
    0 0 50px rgba(255, 255, 200, 0.05),
    /* Rahmenschichten - simulieren Tiefe und metallischen Glanz */
    /* Oben und unten dicker */
    inset 0 20px 0 0 rgba(30, 30, 30, 0.9), /* Dunkle innere Kante oben */
    inset 0 -20px 0 0 rgba(30, 30, 30, 0.9), /* Dunkle innere Kante unten */
    inset 0 0 0 10px rgba(30, 30, 30, 0.9), /* Seiten */
    inset 0 22px 0 0 rgba(80, 80, 80, 0.7), /* Hellere innere Abschrägung oben */
    inset 0 -22px 0 0 rgba(80, 80, 80, 0.7), /* Hellere innere Abschrägung unten */
    inset 0 0 0 12px rgba(80, 80, 80, 0.7), /* Seiten */
    inset 0 25px 0 0 rgba(20, 20, 20, 0.9), /* Dunklere mittlere Schicht oben */
    inset 0 -25px 0 0 rgba(20, 20, 20, 0.9), /* Dunklere mittlere Schicht unten */
    inset 0 0 0 15px rgba(20, 20, 20, 0.9), /* Seiten */
    inset 0 27px 0 0 rgba(60, 60, 60, 0.7), /* Hellere äußere Abschrägung oben */
    inset 0 -27px 0 0 rgba(60, 60, 60, 0.7), /* Hellere äußere Abschrägung unten */
    inset 0 0 0 17px rgba(60, 60, 60, 0.7), /* Seiten */
    inset 0 30px 0 0 rgba(10, 10, 10, 0.9), /* Äußerste dunkle Kante oben */
    inset 0 -30px 0 0 rgba(10, 10, 10, 0.9), /* Äußerste dunkle Kante unten */
    inset 0 0 0 20px rgba(10, 10, 10, 0.9); /* Seiten */
  border-radius: 15px;
  /* Vignettierungseffekt */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
}

.button {
  margin: auto 10%;
  width: 123px;
  height: 123px;
  z-index: 10;
  border: solid black 2px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 1);
  background-repeat: no-repeat;       
  background-position: center center;
  background-size: cover;  
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55), box-shadow 0.3s cubic-bezier(.68,-0.55,.27,1.55);
  box-shadow: 0px 4px 4px #00000030, 0px 12px 12px #00000015;;

  &:hover {
    transform: scale(1.11);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  }
}