:root {
    --boxColor: #0ff7;
    --rotateSpeed: 120s;

    --unitsquare: max(5vh,4vw,2em);
}

.scenebody {
    background-color: #000;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 75px;
    perspective: 10em;
    perspective-origin: 50% calc(50% - 0.35em);
    position: fixed;

    z-index: -1;
}

.scene {
    position: relative;
    transform-style: preserve-3d;
    
    animation: rotateScene var(--rotateSpeed) infinite linear;
    
}
@keyframes rotateScene {
    from {
        transform: translate3d(calc(5vw + 6em), 5em, 20em) rotateY(360deg);
    }
    to {
        transform: translate3d(calc(5vw + 6em), 5em, 20em) rotateY(0deg);
    }
}


.floor {
    width: calc(var(--unitsquare) * 20);
    height: calc(var(--unitsquare) * 20);
    background-image: repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
    background-size: var(--unitsquare) var(--unitsquare);

    position: absolute;

    top: 1em;
    transform: translate(-50%, -50%) rotateX(90deg) translateY(-2em);
}

.floor-shadow {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#fdd1, #000f 38%);
}