:root {
    --boxColor: #0ff7;
    --smallBoxColor: #80fff93c;
}

body {
    background-color: #000;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 75px;
}

.hero {
    perspective: 10em;
    perspective-origin: 50% calc(50% - 2em);

}

.scene {
    position: relative;
    transform-style: preserve-3d;
}

.ball {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: lightblue;
    position: absolute;
    left: -.5em;
    bottom: 1em;
}


.cube {
    width: 2em;
    height: 2em;
    position: absolute;
    top: -1em;
    left: -1em;
    animation: cubeRotateX 5s alternate-reverse, cubeTranslateZ 5s alternate-reverse;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
    animation-composition: accumulate;
    transform-style: preserve-3d;

    .faces {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--boxColor);
        backface-visibility: inherit;
    }
    
    .front {
        transform: translateZ(1em);
    }
    
    .right {
        transform: 
            rotateY(90deg)
            translateZ(1em);
    }
    
    .back {
        transform: 
            rotateY(180deg)
            translateZ(1em);
    }
    .left {
        transform: 
            rotateY(270deg)
            translateZ(1em);
    }
    
    .top {
        transform: 
            translateY(-50%)
            rotateX(90deg);
    }
    
    .bottom {
        transform: 
            translateY(50%)
            rotateX(90deg);
        
    }
}

.floor {
    position: absolute;
    top: 1em;
    transform: 
        translate(-50%, -50%)
        rotateX(90deg);
    width: 15em;
    height: 15em;
    background-image: repeating-conic-gradient( 
        from 45deg, 
        #111 0deg 90deg, 
        #222 90deg 180deg);
    background-size: 1em 1em;

}


@keyframes cubeRotateY {
    0% {transform: rotateY(0);}
    100% {transform: rotateY(360deg);}
}

@keyframes cubeRotateX {
    0% {transform: rotateX(360deg);}
    100% {transform: rotateX(-360deg);}
}
@keyframes cubeTranslateZ {
    0% {transform: translateZ(-5.5em);}
    100% {transform: translateZ(5.5em);}
}