body {
    background-color: black;

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

    transform-style: preserve-3d;

    width: 100%;
    height: 100%;

    margin: 0; 
    
    overflow: hidden;

    background-image: url("star_bg.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
}


#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: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
         transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}


.side {
    position: absolute;
    width: 1950px;
    height: 1950px;
    background-color: rgb(0, 0, 0);
    border: 1px solid white;
    border-radius: 50%;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 80%;
}

.bottom {
    transform: rotateX(90deg) translateX(-1000px);
    background-image: url("civilization.jpg");
}

.front {
    transform: translateZ(1000px) translateX(-1000px) translateY(-1000px);
    background-image: url("chameleons.jpg");
}

.back {
   transform: translateZ(-1000px) translateX(-1000px) translateY(-1000px);
   background-image: url("double_planet.jpg");
}

.left {
    transform:  rotateY(90deg) translateY(-1000px);
    background-image: url("fishes.jpg");
}

.right {
    transform:  rotateY(90deg) translateY(-1000px) translateZ(-2000px);
    background-image: url("spheres.jpg");
}

.top {
    transform: rotateX(90deg) translateZ(2000px) translateX(-1000px) ;
    background-image: url("spiral.jpg");
}