:root {
    --cube-size: clamp(10rem, 15vw, 15rem);
}

/* 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:var(--cube-size);
    height:var(--cube-size);
    margin:clamp(2rem,5vw,5rem) auto;
    perspective:600px;
}

/* 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:var(--cube-size);
	height:var(--cube-size);
	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(calc(var(--cube-size) / 2)); }
.cube-face-back   { transform:rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-right  { transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-left   { transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-top    { transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-bottom { transform:rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }


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

.cube_container {
    width:100%;
    min-width:0;
	grid-area: overlay;             /* Stacks on top of the side panel */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.cube_container.hidden {
    opacity: 0;
    visibility: hidden;
}