/* Container for loader animation */
.base {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    /* Each animated circle */
    .base .circ {
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        position: absolute;
        transform-style: preserve-3d;
        backdrop-filter: blur(0.5px);
        border: 1.9px solid;
        border-top-color: rgba(220, 128, 109, 0.5);
        border-bottom-color: rgba(151, 93, 193, 0.5);
        border-left-color: rgba(151, 93, 193, 0.5);
        border-right-color: rgba(220, 128, 109, 0.5);
        opacity: 0;
    }

/* Position the loader in the center of the page without fullscreen background */
.loader-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
}


/* Keyframe for horizontal rotation */
@keyframes rotate {
    from {
        opacity: 1;
        transform: rotate3d(0, 1, 1, 360deg);
    }

    to {
        opacity: 1;
        transform: rotate3d(0, 1, 1, 0deg);
    }
}

/* Keyframe for vertical rotation */
@keyframes rotate-2 {
    from {
        opacity: 1;
        transform: rotate3d(1, 0, 1, 0deg);
    }

    to {
        opacity: 1;
        transform: rotate3d(1, 0, 1, 360deg);
    }
}

/* Animations for circ-1 to circ-15 */
.circ-1 {
    transform: rotate3d(0, 1, 0, 24deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.13s;
    opacity: 1;
}

.circ-2 {
    transform: rotate3d(0, 1, 0, 48deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.26s;
    opacity: 1;
}

.circ-3 {
    transform: rotate3d(0, 1, 0, 72deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.4s;
    opacity: 1;
}

.circ-4 {
    transform: rotate3d(0, 1, 0, 96deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.53s;
    opacity: 1;
}

.circ-5 {
    transform: rotate3d(0, 1, 0, 120deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.66s;
    opacity: 1;
}

.circ-6 {
    transform: rotate3d(0, 1, 0, 144deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.8s;
    opacity: 1;
}

.circ-7 {
    transform: rotate3d(0, 1, 0, 168deg);
    animation: rotate 2s linear infinite;
    animation-delay: 0.93s;
    opacity: 1;
}

.circ-8 {
    transform: rotate3d(1, 0, 0, 192deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.06s;
    opacity: 1;
}

.circ-9 {
    transform: rotate3d(1, 0, 0, 216deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.2s;
    opacity: 1;
}

.circ-10 {
    transform: rotate3d(1, 0, 0, 240deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.33s;
    opacity: 1;
}

.circ-11 {
    transform: rotate3d(1, 0, 0, 264deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.46s;
    opacity: 1;
}

.circ-12 {
    transform: rotate3d(1, 0, 0, 288deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.6s;
    opacity: 1;
}

.circ-13 {
    transform: rotate3d(1, 0, 0, 312deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.73s;
    opacity: 1;
}

.circ-14 {
    transform: rotate3d(1, 0, 0, 336deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 1.86s;
    opacity: 1;
}

.circ-15 {
    transform: rotate3d(1, 0, 0, 360deg);
    animation: rotate-2 3s linear infinite;
    animation-delay: 2s;
    opacity: 1;
}