.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 100px auto;
    width: 50%;
}

@keyframes rotate {
    0% {
        transform: rotateX(-37.5deg) rotateY(45deg);
    }

    50% {
        transform: rotateX(-37.5deg) rotateY(405deg);
    }

    100% {
        transform: rotateX(-37.5deg) rotateY(405deg);
    }
}

.cube,
.cube * {
    position: absolute;
    width: 76px;
    height: 76px;
}

.sides {
    animation: rotate 3s ease infinite;
    animation-delay: .8s;
    transform-style: preserve-3d;
    transform: rotateX(-37.5deg) rotateY(45deg);
}

.cube .sides .top {
    box-sizing: border-box;
    background-color: #3A8596;
}

.cube .sides .bottom {
    box-sizing: border-box;
    background-color: #3A8596;
}

.cube .sides .right {
    box-sizing: border-box;
    background-color: #F0686A;
}

.cube .sides .left {
    box-sizing: border-box;
    background-color: #F0686A;
}

.cube .sides .front {
    box-sizing: border-box;
    background-color: #FFC86C;
}

.cube .sides .back {
    box-sizing: border-box;
    background-color: #FFC86C;
}

.cube .sides .top {
    animation: top-animation 3s ease infinite;
    animation-delay: 0ms;
    transform: rotateX(90deg) translateZ(75px);
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

@keyframes top-animation {
    0% {
        opacity: 1;
        transform: rotateX(90deg) translateZ(75px);
    }

    20% {
        opacity: 1;
        transform: rotateX(90deg) translateZ(37.5px);
    }

    70% {
        opacity: 1;
        transform: rotateX(90deg) translateZ(37.5px);
    }

    90% {
        opacity: 1;
        transform: rotateX(90deg) translateZ(75px);
    }

    100% {
        opacity: 1;
        transform: rotateX(90deg) translateZ(75px);
    }
}

.cube .sides .bottom {
    animation: bottom-animation 3s ease infinite;
    animation-delay: 0ms;
    transform: rotateX(-90deg) translateZ(75px);
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

@keyframes bottom-animation {
    0% {
        opacity: 1;
        transform: rotateX(-90deg) translateZ(75px);
    }

    20% {
        opacity: 1;
        transform: rotateX(-90deg) translateZ(37.5px);
    }

    70% {
        opacity: 1;
        transform: rotateX(-90deg) translateZ(37.5px);
    }

    90% {
        opacity: 1;
        transform: rotateX(-90deg) translateZ(75px);
    }

    100% {
        opacity: 1;
        transform: rotateX(-90deg) translateZ(75px);
    }
}

.cube .sides .front {
    animation: front-animation 3s ease infinite;
    animation-delay: 100ms;
    transform: rotateY(0deg) translateZ(75px);
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

@keyframes front-animation {
    0% {
        opacity: 1;
        transform: rotateY(0deg) translateZ(75px);
    }

    20% {
        opacity: 1;
        transform: rotateY(0deg) translateZ(37.5px);
    }

    70% {
        opacity: 1;
        transform: rotateY(0deg) translateZ(37.5px);
    }

    90% {
        opacity: 1;
        transform: rotateY(0deg) translateZ(75px);
    }

    100% {
        opacity: 1;
        transform: rotateY(0deg) translateZ(75px);
    }
}

.cube .sides .back {
    animation: back-animation 3s ease infinite;
    animation-delay: 100ms;
    transform: rotateY(-180deg) translateZ(75px);
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

@keyframes back-animation {
    0% {
        opacity: 1;
        transform: rotateY(-180deg) translateZ(75px);
    }

    20% {
        opacity: 1;
        transform: rotateY(-180deg) translateZ(37.5px);
    }

    70% {
        opacity: 1;
        transform: rotateY(-180deg) translateZ(37.5px);
    }

    90% {
        opacity: 1;
        transform: rotateY(-180deg) translateZ(75px);
    }

    100% {
        opacity: 1;
        transform: rotateY(-180deg) translateZ(75px);
    }
}

.cube .sides .left {
    animation: left-animation 3s ease infinite;
    animation-delay: 100ms;
    transform: rotateY(-90deg) translateZ(75px);
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

@keyframes left-animation {
    0% {
        opacity: 1;
        transform: rotateY(-90deg) translateZ(75px);
    }

    20% {
        opacity: 1;
        transform: rotateY(-90deg) translateZ(37.5px);
    }

    70% {
        opacity: 1;
        transform: rotateY(-90deg) translateZ(37.5px);
    }

    90% {
        opacity: 1;
        transform: rotateY(-90deg) translateZ(75px);
    }

    100% {
        opacity: 1;
        transform: rotateY(-90deg) translateZ(75px);
    }
}

.cube .sides .right {
    animation: right-animation 3s ease infinite;
    animation-delay: 100ms;
    transform: rotateY(90deg) translateZ(75px);
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

@keyframes right-animation {
    0% {
        opacity: 1;
        transform: rotateY(90deg) translateZ(75px);
    }

    20% {
        opacity: 1;
        transform: rotateY(90deg) translateZ(37.5px);
    }

    70% {
        opacity: 1;
        transform: rotateY(90deg) translateZ(37.5px);
    }

    90% {
        opacity: 1;
        transform: rotateY(90deg) translateZ(75px);
    }

    100% {
        opacity: 1;
        transform: rotateY(90deg) translateZ(75px);
    }
}