: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);
        
    }
} */

/* @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);}
} */


.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;

}

.smallCube {
    width: .2em;
    height: .2em;
    position: absolute;
    top: -1em;
    left: -1em;
    /* animation: cubeRotateX 5s alternate-reverse, cubeTranslateZ 5s alternate-reverse; */
    /* animation-play-state: running; */
    /* animation-timing-function: ease-in-out; */
    transform-style: preserve-3d;
    

    .faces {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--smallBoxColor);
        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);
        
    }
}

#blockA1 {
    animation: blockA1 7.5s;
    animation-fill-mode: forwards;
}

#blockA2 {
    animation: blockA2 7.5s;
    animation-fill-mode: forwards;
}

#blockA3 {
    animation: blockA3 8.0s;
    animation-fill-mode: forwards;
}

#blockA4 {
    animation: blockA4 8.0s;
    animation-fill-mode: forwards;
}

#blockA5 {
    animation: blockA5 8.5s;
    animation-fill-mode: forwards;
}

#blockA6 {
    animation: blockA6 8.5s;
    animation-fill-mode: forwards;
}

#blockA7 {
    animation: blockA7 9s;
    animation-fill-mode: forwards;
}

#blockA8 {
    animation: blockA8 9s;
    animation-fill-mode: forwards;
}

#blockA9 {
    animation: blockA9 9.5s;
    animation-fill-mode: forwards;
}

#blockA10 {
    animation: blockA10 9.5s;
    animation-fill-mode: forwards;
}

#blockA11 {
    animation: blockA11 10s;
    animation-fill-mode: forwards;
}

#blockA12 {
    animation: blockA12 10s;
    animation-fill-mode: forwards;
}

#blockA13 {
    animation: blockA13 10.5s;
    animation-fill-mode: forwards;
}

#blockA14 {
    animation: blockA14 10.5s;
    animation-fill-mode: forwards;
}

#blockA15 {
    animation: blockA15 11s;
    animation-fill-mode: forwards;
}

#blockA16 {
    animation: blockA16 11s;
    animation-fill-mode: forwards;
}



@keyframes blockA1 {
    0% {}
    100% {transform: translateX(-3.4em) translateZ(4.5em);}
}

@keyframes blockA2 {
    0% {}
    100% {transform: translateX(-2.6em) translateZ(4.5em);}
}

@keyframes blockA3 {
    0% {}
    100% {transform: translateX(-3.4em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockA4 {
    0% {}
    100% {transform: translateX(-2.6em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockA5 {
    0% {}
    100% {transform: translateX(-3.4em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockA6 {
    0% {}
    100% {transform: translateX(-3.2em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockA7 {
    0% {}
    100% {transform: translateX(-3em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockA8 {
    0% {}
    100% {transform: translateX(-2.8em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockA9 {
    0% {}
    100% {transform: translateX(-2.6em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockA10 {
    0% {}
    100% {transform: translateX(-3.4em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockA11 {
    0% {}
    100% {transform: translateX(-2.6em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockA12 {
    0% {}
    100% {transform: translateX(-3.4em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockA13 {
    0% {}
    100% {transform: translateX(-3.2em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockA14 {
    0% {}
    100% {transform: translateX(-3em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockA15 {
    0% {}
    100% {transform: translateX(-2.8em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockA16 {
    0% {}
    100% {transform: translateX(-2.6em) translateY(-0.8em) translateZ(4.5em);}
}

#blockS1 {
    animation: blockS1 7.5s;
    animation-fill-mode: forwards;
}

#blockS2 {
    animation: blockS2 7.5s;
    animation-fill-mode: forwards;
}

#blockS3 {
    animation: blockS3 8.0s;
    animation-fill-mode: forwards;
}

#blockS4 {
    animation: blockS4 8.0s;
    animation-fill-mode: forwards;
}

#blockS5 {
    animation: blockS5 8.5s;
    animation-fill-mode: forwards;
}

#blockS6 {
    animation: blockS6 8.5s;
    animation-fill-mode: forwards;
}

#blockS7 {
    animation: blockS7 9s;
    animation-fill-mode: forwards;
}

#blockS8 {
    animation: blockS8 9s;
    animation-fill-mode: forwards;
}

#blockS9 {
    animation: blockS9 9.5s;
    animation-fill-mode: forwards;
}

#blockS10 {
    animation: blockS10 9.5s;
    animation-fill-mode: forwards;
}

#blockS11 {
    animation: blockS11 10s;
    animation-fill-mode: forwards;
}

#blockS12 {
    animation: blockS12 10s;
    animation-fill-mode: forwards;
}

#blockS13 {
    animation: blockS13 10.5s;
    animation-fill-mode: forwards;
}

#blockS14 {
    animation: blockS14 10.5s;
    animation-fill-mode: forwards;
}

#blockS15 {
    animation: blockS15 10.75s;
    animation-fill-mode: forwards;
}

#blockS16 {
    animation: blockS16 10.75s;
    animation-fill-mode: forwards;
}

#blockS17 {
    animation: blockS17 11s;
    animation-fill-mode: forwards;
}

@keyframes blockS1 {
    0% {}
    100% {transform: translateX(-2.2em) translateZ(4.5em);}
}

@keyframes blockS2 {
    0% {}
    100% {transform: translateX(-2em) translateZ(4.5em);}
}

@keyframes blockS3 {
    0% {}
    100% {transform: translateX(-1.8em) translateZ(4.5em);}
}

@keyframes blockS4 {
    0% {}
    100% {transform: translateX(-1.6em) translateZ(4.5em);}
}

@keyframes blockS5 {
    0% {}
    100% {transform: translateX(-1.4em) translateZ(4.5em);}
}

@keyframes blockS6 {
    0% {}
    100% {transform: translateX(-1.4em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockS7 {
    0% {}
    100% {transform: translateX(-1.4em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockS8 {
    0% {}
    100% {transform: translateX(-1.6em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockS9 {
    0% {}
    100% {transform: translateX(-1.8em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockS10 {
    0% {}
    100% {transform: translateX(-2em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockS11 {
    0% {}
    100% {transform: translateX(-2.2em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockS12 {
    0% {}
    100% {transform: translateX(-2.2em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockS13 {
    0% {}
    100% {transform: translateX(-2.2em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockS14 {
    0% {}
    100% {transform: translateX(-2em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockS15 {
    0% {}
    100% {transform: translateX(-1.8em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockS16 {
    0% {}
    100% {transform: translateX(-1.6em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockS17 {
    0% {}
    100% {transform: translateX(-1.4em) translateY(-0.8em) translateZ(4.5em);}
}

#blockH1 {
    animation: blockH1 7.5s;
    animation-fill-mode: forwards;
}

#blockH2 {
    animation: blockH2 7.5s;
    animation-fill-mode: forwards;
}

#blockH3 {
    animation: blockH3 8.0s;
    animation-fill-mode: forwards;
}

#blockH4 {
    animation: blockH4 8.0s;
    animation-fill-mode: forwards;
}

#blockH5 {
    animation: blockH5 8.5s;
    animation-fill-mode: forwards;
}

#blockH6 {
    animation: blockH6 8.5s;
    animation-fill-mode: forwards;
}

#blockH7 {
    animation: blockH7 9s;
    animation-fill-mode: forwards;
}

#blockH8 {
    animation: blockH8 9s;
    animation-fill-mode: forwards;
}

#blockH9 {
    animation: blockH9 9.5s;
    animation-fill-mode: forwards;
}

#blockH10 {
    animation: blockH10 10s;
    animation-fill-mode: forwards;
}

#blockH11 {
    animation: blockH11 10.5s;
    animation-fill-mode: forwards;
}

#blockH12 {
    animation: blockH12 11s;
    animation-fill-mode: forwards;
}

#blockH13 {
    animation: blockH13 11s;
    animation-fill-mode: forwards;
}

@keyframes blockH1 {
    0% {}
    100% {transform: translateX(-1em) translateZ(4.5em);}
}

@keyframes blockH2 {
    0% {}
    100% {transform: translateX(-0.2em) translateZ(4.5em);}
}

@keyframes blockH3 {
    0% {}
    100% {transform: translateX(-1em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockH4 {
    0% {}
    100% {transform: translateX(-0.2em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockH5 {
    0% {}
    100% {transform: translateX(-1em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockH6 {
    0% {}
    100% {transform: translateX(-0.8em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockH7 {
    0% {}
    100% {transform: translateX(-0.6em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockH8 {
    0% {}
    100% {transform: translateX(-0.4em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockH9 {
    0% {}
    100% {transform: translateX(-0.2em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockH10 {
    0% {}
    100% {transform: translateX(-1em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockH11 {
    0% {}
    100% {transform: translateX(-0.2em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockH12 {
    0% {}
    100% {transform: translateX(-1em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockH13 {
    0% {}
    100% {transform: translateX(-0.2em) translateY(-0.8em) translateZ(4.5em);}
}

#blockT1 {
    animation: blockT1 7.5s;
    animation-fill-mode: forwards;
}

#blockT2 {
    animation: blockT2 7.75s;
    animation-fill-mode: forwards;
}

#blockT3 {
    animation: blockT3 8.0s;
    animation-fill-mode: forwards;
}

#blockT4 {
    animation: blockT4 8.5s;
    animation-fill-mode: forwards;
}

#blockT5 {
    animation: blockT5 9s;
    animation-fill-mode: forwards;
}

#blockT6 {
    animation: blockT6 9.5s;
    animation-fill-mode: forwards;
}

#blockT7 {
    animation: blockT7 10s;
    animation-fill-mode: forwards;
}

#blockT8 {
    animation: blockT8 10.5s;
    animation-fill-mode: forwards;
}

#blockT9 {
    animation: blockT9 11s;
    animation-fill-mode: forwards;
}

@keyframes blockT1 {
    0% {}
    100% {transform: translateX(0.6em) translateZ(4.5em);}
}

@keyframes blockT2 {
    0% {}
    100% {transform: translateX(0.6em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockT3 {
    0% {}
    100% {transform: translateX(0.6em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockT4 {
    0% {}
    100% {transform: translateX(0.6em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockT5 {
    0% {}
    100% {transform: translateX(0.6em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockT6 {
    0% {}
    100% {transform: translateX(0.4em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockT7 {
    0% {}
    100% {transform: translateX(0.8em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockT8 {
    0% {}
    100% {transform: translateX(0.2em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockT9 {
    0% {}
    100% {transform: translateX(1em) translateY(-0.8em) translateZ(4.5em);}
}

#blockO1 {
    animation: blockO1 7.5s;
    animation-fill-mode: forwards;
}

#blockO2 {
    animation: blockO2 7.5s;
    animation-fill-mode: forwards;
}

#blockO3 {
    animation: blockO3 8.0s;
    animation-fill-mode: forwards;
}

#blockO4 {
    animation: blockO4 8.0s;
    animation-fill-mode: forwards;
}

#blockO5 {
    animation: blockO5 8.5s;
    animation-fill-mode: forwards;
}

#blockO6 {
    animation: blockO6 8.5s;
    animation-fill-mode: forwards;
}

#blockO7 {
    animation: blockO7 9s;
    animation-fill-mode: forwards;
}

#blockO8 {
    animation: blockO8 9s;
    animation-fill-mode: forwards;
}

#blockO9 {
    animation: blockO9 9.5s;
    animation-fill-mode: forwards;
}

#blockO10 {
    animation: blockO10 9.5s;
    animation-fill-mode: forwards;
}

#blockO11 {
    animation: blockO11 10s;
    animation-fill-mode: forwards;
}

#blockO12 {
    animation: blockO12 10s;
    animation-fill-mode: forwards;
}

#blockO13 {
    animation: blockO13 10.5s;
    animation-fill-mode: forwards;
}

#blockO14 {
    animation: blockO14 10.5s;
    animation-fill-mode: forwards;
}

#blockO15 {
    animation: blockO15 10.75s;
    animation-fill-mode: forwards;
}

#blockO16 {
    animation: blockO16 11s;
    animation-fill-mode: forwards;
}

@keyframes blockO1 {
    0% {}
    100% {transform: translateX(1.4em) translateZ(4.5em);}
}

@keyframes blockO2 {
    0% {}
    100% {transform: translateX(1.6em) translateZ(4.5em);}
}

@keyframes blockO3 {
    0% {}
    100% {transform: translateX(1.8em) translateZ(4.5em);}
}

@keyframes blockO4 {
    0% {}
    100% {transform: translateX(2em) translateZ(4.5em);}
}

@keyframes blockO5 {
    0% {}
    100% {transform: translateX(2.2em) translateZ(4.5em);}
}

@keyframes blockO6 {
    0% {}
    100% {transform: translateX(1.4em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockO7 {
    0% {}
    100% {transform: translateX(2.2em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockO8 {
    0% {}
    100% {transform: translateX(1.4em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockO9 {
    0% {}
    100% {transform: translateX(2.2em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockO10 {
    0% {}
    100% {transform: translateX(1.4em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockO11 {
    0% {}
    100% {transform: translateX(2.2em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockO12 {
    0% {}
    100% {transform: translateX(1.4em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockO13 {
    0% {}
    100% {transform: translateX(1.6em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockO14 {
    0% {}
    100% {transform: translateX(1.8em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockO15 {
    0% {}
    100% {transform: translateX(2em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockO16 {
    0% {}
    100% {transform: translateX(2.2em) translateY(-0.8em) translateZ(4.5em);}
}

#blockN1 {
    animation: blockN1 7.5s;
    animation-fill-mode: forwards;
}

#blockN2 {
    animation: blockN2 7.5s;
    animation-fill-mode: forwards;
}

#blockN3 {
    animation: blockN3 8.0s;
    animation-fill-mode: forwards;
}

#blockN4 {
    animation: blockN4 8.0s;
    animation-fill-mode: forwards;
}

#blockN5 {
    animation: blockN5 8.5s;
    animation-fill-mode: forwards;
}

#blockN6 {
    animation: blockN6 8.5s;
    animation-fill-mode: forwards;
}

#blockN7 {
    animation: blockN7 9s;
    animation-fill-mode: forwards;
}

#blockN8 {
    animation: blockN8 9s;
    animation-fill-mode: forwards;
}

#blockN9 {
    animation: blockN9 9.5s;
    animation-fill-mode: forwards;
}

#blockN10 {
    animation: blockN10 9.5s;
    animation-fill-mode: forwards;
}

#blockN11 {
    animation: blockN11 10.25s;
    animation-fill-mode: forwards;
}

#blockN12 {
    animation: blockN12 10.25s;
    animation-fill-mode: forwards;
}

#blockN13 {
    animation: blockN13 11s;
    animation-fill-mode: forwards;
}

@keyframes blockN1 {
    0% {}
    100% {transform: translateX(2.6em) translateZ(4.5em);}
}

@keyframes blockN2 {
    0% {}
    100% {transform: translateX(3.4em) translateZ(4.5em);}
}

@keyframes blockN3 {
    0% {}
    100% {transform: translateX(2.6em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockN4 {
    0% {}
    100% {transform: translateX(3.4em) translateY(-0.2em) translateZ(4.5em);}
}

@keyframes blockN5 {
    0% {}
    100% {transform: translateX(2.6em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockN6 {
    0% {}
    100% {transform: translateX(3.4em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockN7 {
    0% {}
    100% {transform: translateX(2.6em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockN8 {
    0% {}
    100% {transform: translateX(3.4em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockN9 {
    0% {}
    100% {transform: translateX(2.6em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockN10 {
    0% {}
    100% {transform: translateX(3.4em) translateY(-0.8em) translateZ(4.5em);}
}

@keyframes blockN11 {
    0% {}
    100% {transform: translateX(2.8em) translateY(-0.6em) translateZ(4.5em);}
}

@keyframes blockN12 {
    0% {}
    100% {transform: translateX(3em) translateY(-0.4em) translateZ(4.5em);}
}

@keyframes blockN13 {
    0% {}
    100% {transform: translateX(3.2em) translateY(-0.2em) translateZ(4.5em);}
}