/* 1. Setup the 3D scene viewport */
.cube_challenge {
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 1.5rem;
    text-align: center;
	color: #448844;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}


.scene {
  width: 200px;
  height: 200px;
  margin: 80px auto;
  perspective: 600px; /* Adjust for more/less extreme 3D perspective distortion */
}

/* 2. Style the cube container and enable 3D rendering space */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spinCube 48s infinite linear; /* Rotates the cube continuously */
}

/* 3. Common styles for all 6 faces */
.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  background: rgba(255, 255, 255, 0.9); /* Slight transparency looks premium */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube-face img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images scale beautifully on the faces */
}

.cube-face-left img,
.cube-face-right img {
    transform: rotate(180deg); /* Ensures the pictures are mostly seen uninverted */
}

/* 4. Position each face in 3D space (moved out by half the cube's size: 100px) */
.cube-face-front  { transform: rotateY(  0deg) translateZ(100px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(100px); }
.cube-face-right  { transform: rotateY( 90deg) translateZ(100px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(100px); }
.cube-face-top    { transform: rotateX( 90deg) translateZ(100px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(100px); }


/* 5. The continuous rotation keyframe animation */
@keyframes spinCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(720deg) rotateY(360deg);
  }
}