@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@keyframes turn {
    /* from { transform: rotate3d(0, 0, 0, 180deg); } */
    /* to { transform: rotate3d(1, 1, 0, 360deg); } */
    
    0% {
        transform: rotate3d(0, 0, 0, 180deg);
    }
    50% {
        transform: rotate3d(1, 1, 0, 90deg);
    }
    100% {
        transform: rotate3d(0, 1, 1, 360deg);
    }
}

.cube-container {
    width: 200px;
    height: 200px;
    perspective: 500px;
    margin-top: 7.813rem;
    /* 150px */
    margin-left: 1.25rem;
    /* 20px */
    margin-bottom: 3.438rem;
    /* 55px */
}

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

.face {
    width: 160px;
    height: 160px;
    background: #414141;
    border: 0.4px solid #8bb92e;
    position: absolute;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 500ms;
    color: #8bb92e;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.6rem;
}

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

.back {
    transform: translateZ(-80px) rotateY(180deg);
}

.left {
    transform: translateX(-80px) rotateY(-90deg);
}

.right {
    transform: translateX(80px) rotateY(90deg);
}

.top {
    transform: translateY(-80px) rotateX(90deg);
}

.bottom {
    transform: translateY(80px) rotateX(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .cube {
        animation: none;
        transform: rotate3d(0, 0, 0, 45deg);
    }
}