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

body {
    background-color: black;

    perspective: 1000px;
    perspective-origin: 50% 100%;

    transform-style: preserve-3d;

    width: 100%;
    height: 100%;

    margin: 0; 
    
    overflow: hidden;

    background-image: url("348_andere-wereld.jpg");
    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;
    animation: spin 5s infinite linear;

}

.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: 200px;
    height: var(--side-height);

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

.bottom {
    width: 400px;
    height: 400px;
    transform: translateX(-200px) translateY(-50px) 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-image: url("zampanio_landing_png.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.front {
    transform: translateZ(173.2px) translateX(-100px) translateY(-100px);

    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,742.000 C1798.000,742.000 1814.000,402.000 1010.000,402.000 C206.000,402.000 206.000,742.000 206.000,742.000 L206.000,2502.000 L0.000,2502.000 Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.back {
   transform: translateZ(-173.2px) translateX(-100px) translateY(-100px);
}

.left {
    transform:  translateY(-100px) translateX(-248.5px) translateZ(86px) rotateY(-60deg);
}

.right {
    transform:  translateY(-100px) translateX(48.5px) translateZ(86px) rotateY(60deg);
}

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

.frontright {
    transform: translateY(-100px) translateX(48.5px) translateZ(-86px) 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,742.000 C1798.000,742.000 1814.000,402.000 1010.000,402.000 C206.000,402.000 206.000,742.000 206.000,742.000 L206.000,2502.000 L0.000,2502.000 Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.frontleft {
    transform:  translateY(-100px) translateX(-248.5px) translateZ(-86px) 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,742.000 C1798.000,742.000 1814.000,402.000 1010.000,402.000 C206.000,402.000 206.000,742.000 206.000,742.000 L206.000,2502.000 L0.000,2502.000 Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}