.cubo, .loading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tablero-juego {
    width: 20%;
    height: 300px;
}

.cubo {
    height: 60%;
    transform-style: preserve-3d;
    animation: rotar 8s linear infinite;
}
.cubo > span {
    position: absolute;
    width: 3em;
    height: 3em;
    border: 2px solid white;
    box-shadow: inset 0px 0px 15px 5px rgba(67, 195, 255, .2), 0px 0px 40px 1px rgba(67, 195, 255, .15);
    border-radius: 4px;
}

.cubo > span:nth-child(1){transform: rotateY(90deg)translateZ(2em);
}
.cubo > span:nth-child(2){transform: rotateY(90deg)translateZ(-2em);
}
.cubo > span:nth-child(3){transform: rotateY(90deg)translateZ(-2em);
}
.cubo > span:nth-child(4){transform: rotateY(90deg)translateZ(2em);
}

.cubo > span:nth-child(5){transform: translateZ(-2em);
}
.cubo > span:nth-child(6){transform: translateZ(2em);
}

.loading {
    padding: 40px;
    height: 40%;
    margin-top: 20px;
}

@keyframes rotar {
    0%{transform: rotateY(0deg)rotateX(0deg);}
    50%{transform: rotateY(360deg)rotateX(360deg);}
    100%{transform: rotateY(0deg)rotateX(0deg);}
}

#tablero-juego .loading h1{
    text-align: center;
    font-weight: 100;
    letter-spacing: 2px;
    font-size: 18px;
}

#tablero-juego .loading p {
    text-align: center;
    font-weight: 100;
    letter-spacing: 2px;
    font-size: 18px;
}