:root {
    --boxColor: #10ffff77;
    --groundColor: #0e0e0e;
    --Height: 2em;
    --Width: 2em;
    --Depth: 2em;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 75px;
    overflow: hidden;
    scroll-behavior: smooth;
    background-color: #FFF;
}

.hero {
    perspective: 12em;
    perspective-origin: 50% calc(50% - 2.75em);
}

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

.floor {
    position: absolute;
    top: 1em;
    transform: translate(-50%, -50%) rotateX(90deg);
    width: 150em;
    height: 150em;
    background: 
        radial-gradient(#0000, #000 75%),
        var(--groundColor);
    background-size:100%, 1em 1em;
}

.perimeter {
    transform-style: preserve-3d;
    position: absolute;
    height: calc(var(--Height) + 2em);
    width: calc(var(--Width) + 2em);
    background-color: #FFF;
    
}

.moveableObject {
    position: absolute;
    transform-style: preserve-3d;
    transform: translate3d(calc(var(--x, 4) * 1vmin ), calc(var(--y, 5) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
}

.side {
    position: absolute;
    background: var(--boxColor);
    backface-visibility: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5% 2.5%;
    flex-wrap: wrap;
    box-shadow: 0 0 1.5em #000a inset;
}

.front,
.back {
    --coefficient: 0.5;
    height: var(--Height);
    width: var(--Width);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate3d(0, 0, calc(var(--Depth) * var(--coefficient)));
}

.back {
    --coefficient: -0.5;
}

.left,
.right {
    --rotation: -90deg;
    height: var(--Height);
    width: var(--Depth);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(var(--rotation)) translate3d(0, 0, calc(var(--Width) * 0.5));
}

.right {
    --rotation: 90deg
}

.top,
.bottom {
    --rotation: 90deg;
    height: var(--Depth);
    width: var(--Width);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(var(--rotation)) translate3d(0, 0, calc(var(--Height) * 0.5)) ;
}

.bottom {
    --rotation: -90deg;
}

.floatingMenu {
    top: 20%;
    left: 15%;
}