:root {
    --BoxColor: #00ffff8f;
    --rotateSpeed: 30s;
    --bounceSpeed: 2s;
}

body {
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 75px;
    /* use font-size as variable by em */
    perspective: 10em;
    perspective-origin: center 1em;
    overflow: hidden;
}

.scene {
    position: relative;
    /* perspective: 10em;
    perspective-origin: center -2em; */
    transform-style: preserve-3d;
    animation: rotate-scene var(--rotateSpeed) infinite linear;
}

.ball {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: lightblue;
    position: absolute;
    left: -0.5em;
    bottom: 1em;
    background-image: radial-gradient(circle at top, lightblue, 40%, #000);
    animation: ballBounce var(--bounceSpeed) infinite ease-out,
        rotate-scene var(--rotateSpeed) infinite linear reverse;
}

.ballShadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#0007, #0000 50%);
    animation: ballShadow var(--bounceSpeed) infinite ease-out;
}

.cube {
    width: 2em;
    height: 2em;
    position: absolute;
    bottom: -1em;
    left: -1em;
    transform-style: preserve-3d;
    animation: cubeSquish var(--bounceSpeed) infinite linear;
}

.cube > *:not(.top, .bottom) {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--BoxColor);
    box-shadow: 0 0 0.8em #000 inset;
}

.cube .front {
    transform: translateZ(1em);
}

.right {
    transform: rotateY(90deg) translateZ(1em);
}

.left {
    transform: rotateY(-90deg) translateZ(1em);
}

.back {
    transform: rotateY(180deg) translateZ(1em);
    /* rotate 180 deg so when you use backface -visibilty the front will stay in front no matter what */
}

.top {
    position: absolute;
    width: 2em;
    height: 2em;
    background-color: var(--BoxColor);
    transform: rotateX(90deg) translateZ(1em);
    top: 0;
    box-shadow: 0 0 0.8em #000 inset;
}

.bottom {
    position: absolute;
    width: 2em;
    height: 2em;
    background-color: #0007;
    transform: rotateX(-90deg) translateZ(1em);
    bottom: 0;
    box-shadow: 0 0 1.5em #000;
}

.floor {
    position: absolute;
    width: 15em;
    height: 15em;
    background-image: radial-gradient(#0000, #000 70%),
        repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
    background-size: 100%, 1em 1em;
    /* width and height */
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(-0.1em);
    top: 1em;
}

@keyframes rotate-scene {
    to {
        transform: rotateY(360deg);
    }
}

@keyframes ballBounce {
    0%,
    100% {
        bottom: 0.5em;
    }
    50% {
        bottom: 3em;
        animation-timing-function: ease-in;
    }
}

@keyframes ballShadow {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(2);
        animation-timing-function: ease-in;
    }
}

@keyframes cubeSquish {
    0%,
    100% {
        height: 1.5em;
    }
    8%,
    93.5% {
        height: 2em;
    }
}