.cubeContainer {
    --cubeSize: calc(6vw);
    
    display: flex;
    justify-content: center;
    align-items: center;

    perspective: calc(var(--cubeSize) * 2);
    perspective-origin: center;

    height: calc(var(--cubeSize) * 2.2);
}

.cube
{
    transform-style: preserve-3d;
    position: absolute;
    width: var(--cubeSize);
    height: var(--cubeSize);
    
    animation: stepsRotate 15s infinite ease-in-out;
}

.cubeSmall
{
    --cubeSize: calc(6vw / 3);
    animation: smoothRotate 5s infinite linear reverse;
}

.cubeSmall .side
{
    /* background-color: var(--themeBlue); */
    opacity: 0.2;
}

.side
{
    opacity: 0.6;
    position: absolute;
    width: var(--cubeSize);
    height: var(--cubeSize);
    border: 0.2rem solid var(--themeBlue);    
}

.side.front
{
    transform: translateZ(calc(var(--cubeSize) / 2));
}

.side.back
{
    transform: translateZ(calc(var(--cubeSize) / -2)) rotateY(180deg);
}

.side.left
{
    transform: translateX(calc(var(--cubeSize) / -2)) rotateY(-90deg);
}

.side.right
{
    transform: translateX(calc(var(--cubeSize) / 2)) rotateY(90deg);
}

.side.top
{
    transform: translateY(calc(var(--cubeSize) / -2)) rotateX(90deg);
}

.side.bottom
{
    transform: translateY(calc(var(--cubeSize) / 2)) rotateX(-90deg);
}

@keyframes stepsRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    10% {
        transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    20% {
        transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg);
    }
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    }
    40% {
        transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg);
    }
    50% {
        transform: rotateX(0deg) rotateY(-180deg) rotateZ(90deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(-180deg) rotateZ(90deg);
    }
    70% {
        transform: rotateX(90deg) rotateY(-180deg) rotateZ(0deg);
    }
    80% {
        transform: rotateX(0deg) rotateY(-180deg) rotateZ(0deg);
    }
    90% {
        transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}

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