.scene {
    width: 50vw; /* Cube size relative to viewport width */
    height: 50vw; /* Cube size relative to viewport height */
    max-width: 100px; /* Maximum width of the cube - has to be the same as the .face width and height or cube will move around */
    max-height: 100px; /* Maximum height of the cube */
    perspective: 1000px; /* Perspective value for 3D effect */
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 40s infinite linear; /* Optional: Auto-rotate cube */
}

.face {
    position: absolute;
    width: 100%; /*  */
    height: 100%;
    background-color: rgba(0, 0, 0, 1); /* Black with 100% opacity for the dice */
    border: 3px solid #ccc; /* Optional border for each face */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 24px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    border-radius: 10px; /* Match cube's border-radius for rounded corners */
}

.face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front { transform: translateZ(100px); } /* These have to be 50% of .face img width and height */
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes spin {
    from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    to { transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg); }
}