:root {
    --cube-half: 125px;
}

[v-cloak] {
    display: none;
}

.perspective {
    perspective: 1000px;
}

.cube {
    transform-style: preserve-3d;
}

.cube-face {

    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.75rem;
    padding: 1rem;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    backface-visibility: hidden;

}

.cube .front {
    transform: rotateY(0.01deg) translateZ(var(--cube-half));
}

.cube .back {
    transform: rotateY(180deg) translateZ(var(--cube-half));
}

.cube .right {
    transform: rotateY(90deg) translateZ(var(--cube-half));
}

.cube .left {
    transform: rotateY(-90deg) translateZ(var(--cube-half));
}

.cube .top {
    transform: rotateX(90deg) translateZ(var(--cube-half));
}

.cube .bottom {
    transform: rotateX(-90deg) translateZ(var(--cube-half));
}