.loader {
    /* cube size can be adjusted here; clamp prevents it from becoming too big on large screens */
    --cube-size: clamp(24px, 3.5vw, 40px);
    --cube-half: calc(var(--cube-size) / 2);
    perspective: 800px;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: transparent;
}

.loader[aria-hidden="true"] {
    display: none;
}

.cube {
    width: var(--cube-size);
    height: var(--cube-size);
    position: relative;
    transform-style: preserve-3d;
    animation: spin 3s linear infinite;
}

.face {
    width: var(--cube-size);
    height: var(--cube-size);
    position: absolute;
    opacity: 0.8;
}

.front {
    transform: translateZ(var(--cube-half));
    background-color: #165343;
}

.back {
    transform: translateZ(calc(-1 * var(--cube-half)));
    background-color: #8db5a6;
}

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

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

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

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

@keyframes spin {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}