:root {
    --side-height: 1250px;
}

body {
    background-color: black;
    
    perspective: 700px;

    transform-style: preserve-3d;

    width: 100%;
    height: 100%;

    margin: 0; 
    
    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


#world {
    width: 10px;
    height: 10px;


    background-color: aliceblue;

    position: absolute;

    transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;

}

.cube {
    width: 0px;
    height: 0px;
    position: absolute;
    transform-style: preserve-3d;

}

@keyframes  spin {
    0% {
         transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
         transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
    }
}


.side {
    position: absolute;
    width: 1000px;
    height: var(--side-height);

    transform-style: preserve-3d;

    background-color: rgba(110, 10, 10, 0.632);
}

.bottom {
    width: 2000px;
    height: 2000px;
    transform: translateX(-1000px) translateY(-250px) rotateX(90deg);
    
    border: none;
    background-color: blue;
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.front {
    transform: translateZ(866px) translateX(-500px) translateY(-500px);

    background-color: rgba(0, 0, 0, 0);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2502px"><path fill-rule="evenodd" fill="rgb(235, 211, 169)" d="M0.000,2502.000 L0.000,0.000 L2000.000,0.000 L2000.000,2502.000 L1798.000,2502.000 L1798.000,521.855 C1798.000,521.855 1814.000,181.855 1010.000,181.855 C206.000,181.855 206.000,521.855 206.000,521.855 L206.000,2502.000 L0.000,2502.000 Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.back {
   transform: translateZ(-866px) translateX(-500px) translateY(-500px);
}

.left {
    transform:  translateY(-500px) translateX(-1242.5px) translateZ(430px) rotateY(-60deg);
}

.right {
    transform:  translateY(-500px) translateX(242.5px) translateZ(430px) rotateY(60deg);
}

.top {
    transform: translateY(-1000px) translateX(-500px) rotateX(90deg);
}

.frontright {
    transform: translateY(-500px) translateX(242.5px) translateZ(-430px) rotateY(-60deg);
    
    background-color: rgba(0, 0, 0, 0);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2502px"><path fill-rule="evenodd" fill="rgb(235, 211, 169)" d="M0.000,2502.000 L0.000,0.000 L2000.000,0.000 L2000.000,2502.000 L1798.000,2502.000 L1798.000,521.855 C1798.000,521.855 1814.000,181.855 1010.000,181.855 C206.000,181.855 206.000,521.855 206.000,521.855 L206.000,2502.000 L0.000,2502.000 Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.frontleft {
    transform:  translateY(-500px) translateX(-1242.5px) translateZ(-430px) rotateY(60deg);

    background-color: rgba(0, 0, 0, 0);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2502px"><path fill-rule="evenodd" fill="rgb(235, 211, 169)" d="M0.000,2502.000 L0.000,0.000 L2000.000,0.000 L2000.000,2502.000 L1798.000,2502.000 L1798.000,521.855 C1798.000,521.855 1814.000,181.855 1010.000,181.855 C206.000,181.855 206.000,521.855 206.000,521.855 L206.000,2502.000 L0.000,2502.000 Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}