H1 {
	font-color:white;
}
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: black; /* Sort baggrund */
font-family: 'Orbitron', sans-serif;
background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.90) 60%, rgba(0, 0, 0, 0.6) 100%);
box-shadow: inset 0 0 450px rgba(0, 0, 0, 0.8); 
    }

    .scene {
      width: 292px;
      height: 292px;
      perspective: 800px;
    }

    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(-30deg) rotateY(30deg);
      animation: rotateCube 20s infinite linear; /* hastighed paa rotation */
    }

    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 10px; /* Mellemrum mellem felterne */
      opacity: 1;
    }

    .face div {
      width: 100%;
      height: 100%;
      border: 1px solid #333;
      transition: opacity 2.5s ease-in-out; /* fade-effekt */
      opacity: 0.2; /* Start med lav opacitet */
    }

    /* Transformationer for at placere siderne korrekt */
    .front  { transform: translateZ(150px); }
    .back   { transform: rotateY(180deg) translateZ(150px); }
    .left   { transform: rotateY(-90deg) translateZ(150px); }
    .right  { transform: rotateY(90deg) translateZ(150px); }
    .top    { transform: rotateX(90deg) translateZ(150px); }
    .bottom { transform: rotateX(-90deg) translateZ(150px); }

    @keyframes rotateCube {
      0% {
        transform: rotateX(-30deg) rotateY(30deg);
      }
      100% {
        transform: rotateX(-30deg) rotateY(390deg);
      }
    }