:root{
    --clr: rgb(17, 255, 0);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #1f1f1f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transform-style: preserve-3d;
}
.container{
    transform-style: preserve-3d;
    transform: rotateX(-30deg);
    /* margin-top: 200px; */
}
.cube{
    transform-style: preserve-3d;
    position: relative;
    animation: animate 3s linear infinite ;
    display: flex;
    justify-content: center;
    align-items: center;

}
@keyframes animate {
    0%{
        transform: rotate3d(0,0,0, 0deg);
    }
    100%{
        transform: rotate3d(0,1,0, 360deg);
    }
}

.side{
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(black , var(--clr));
}

.top{
    transform: translateY(-50%) rotateX(90deg);
    background: #000;

}
.bottom{
    transform: translateY(50%) rotateX(90deg);
    background: var(--clr);

}

.shadow{
    transform: translateY(100%) rotateX(90deg);
    background: var(--clr);
    box-shadow: var(--clr) 0px 0px 10px , var(--clr) 0px 0px 30px , var(--clr) 0px 0px 50px , var(--clr) 0px 0px 100px;

}


.left{
    transform: translateX(-50%) rotateY(90deg);

}
.right{
    transform: translateX(50%) rotateY(90deg);

}
.front{
    transform: translateZ(100px);

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