:root {
    --tiles: rgb(247, 203, 138);
    --gaps: rgb(194, 137, 38);
}

body {
    perspective: 700px;
    perspective-origin: 50% 50%;

    transform-style: preserve-3d;

    width: 100%;
    height: 100%;

    margin: 0; 
    
    overflow: hidden;

    background-image: url("ocean.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


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

    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:translateZ(-5000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
         transform:translateZ(-4000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}


.side {
    position: absolute;
    width: 10000px;
    height: 1000px;
    border: 1px solid white;

    
    background-position: center;
    background-repeat: repeat-x;
    opacity: 80%;
    background-size: 1000px 1000px;
}

.bottom {
    transform: translateX(-5000px)  rotateX(90deg) rotateZ(90deg);
    background:   repeating-linear-gradient(rgba(253, 247, 236, 0) 0%, rgba(253, 247, 236, 0) 9.6%, var(--gaps) 9.6%, var(--gaps) 10%),
  repeating-linear-gradient(to left, var(--tiles) 0%, rgb(241, 184, 78) 49.6%, var(--gaps) 49.6%, var(--gaps) 50%);
    
 
    background-size: 1000px 1000px;
}

.right {
    transform: translateY(-500px) translateX(-4500px) rotateY(90deg);
    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="2000px"><path fill-rule="evenodd" fill="rgb(247, 203, 138)" d="M0.000,2000.000 L0.000,0.000 L2000.000,0.000 L2000.000,2000.000 L1798.000,2000.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,2000.000 L0.000,2000.000 Z"/></svg>');
}

.left {
    transform: translateY(-500px) translateX(-5500px) rotateY(90deg);
    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="2000px"><path fill-rule="evenodd" fill="rgb(247, 203, 138)" d="M0.000,2000.000 L0.000,0.000 L2000.000,0.000 L2000.000,2000.000 L1798.000,2000.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,2000.000 L0.000,2000.000 Z"/></svg>');
}

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