body{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
    text-align: center;
}

table{
    margin: auto;
}

.loader {
    display: flex;
    justify-content: center;
    perspective: 800px;
    text-align: center;
}

.cube {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 3s linear infinite;
}

.face {
    width: 40px;
    height: 40px;
    position: absolute;
    opacity: 0.8;
}

.front {
    transform: translateZ(20px);
    background-color: #3498db;
}

.back {
    transform: translateZ(-20px);
    background-color: #e74c3c;
}

.left {
    transform: rotateY(90deg) translateZ(20px);
    background-color: #2ecc71;
}

.right {
    transform: rotateY(-90deg) translateZ(20px);
    background-color: #f39c12;
}

.top {
    transform: rotateX(90deg) translateZ(20px);
    background-color: #9b59b6;
}

.bottom {
    transform: rotateX(-90deg) translateZ(20px);
    background-color: #e67e22;
}

@keyframes spin {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

.img {
 width: 110px;
 height: 110px;
}