html, body {
    height: 100%;
    width: 100%;

    margin: 0;
}

#main {
    height: 100%;
    width: 100%;
}

@keyframes multicolor {
    0%  { fill: #1DB2CF; /* color-primary-100 */ }
    33% { fill: #7E6BB6; /* color-secondary-100 */ }
    66% { fill: #D53583; /* color-ternary-100 */ }
}

:root {
    --wallpaper-pattern-height: 128px;
    --spinner-height: calc(32px * 2);
    --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
}

/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
@media (min-height: 0px) and (max-height: 640px) {
    :root {
        --spinner-top: var(--window-center-pos);
    }
}
/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
@media (min-height: 640px) and (max-height: 768px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 1));
    }
}
/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
@media (min-height: 768px) and (max-height: 1024px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
    }
}
/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
@media (min-height: 1024px) and (max-height: 1280px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
    }
}
/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
@media (min-height: 1280px) and (max-height: 1536px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
    }
}
/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
@media (min-height: 1536px) and (max-height: 1792px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
    }
}
/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
@media (min-height: 1792px) and (max-height: 2048px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
    }
}
/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
@media (min-height: 2048px) and (max-height: 2304px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
    }
}
/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
@media (min-height: 2304px) and (max-height: 2560px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
    }
}
/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
@media (min-height: 2560px) and (max-height: 2816px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
    }
}
/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
@media (min-height: 2816px) and (max-height: 3072px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
    }
}
/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
@media (min-height: 3072px) and (max-height: 3328px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
    }
}
/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
@media (min-height: 3328px) and (max-height: 3584px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
    }
}
/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
@media (min-height: 3584px) and (max-height: 3840px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
    }
}
/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
@media (min-height: 3840px) and (max-height: 4096px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
    }
}
/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
@media (min-height: 4096px) and (max-height: 4352px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
    }
}
/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
@media (min-height: 4352px) and (max-height: 4608px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
    }
}
/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
@media (min-height: 4608px) and (max-height: 4864px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
    }
}
/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
@media (min-height: 4864px) and (max-height: 5120px) {
    :root {
        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
    }
}

.loader {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    .wallpaper {
        height: 100%;
        width: 100%;
        z-index: -1;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        .content {
            background-image: url("../images/wallpaper-pattern.svg");
            background-position: center;

            width: 150%;
            height: 150%;
        }
    }

    .spinner {
        height: 5%;
        aspect-ratio: 2;

        position: absolute;

        top: var(--spinner-top);

        svg {
            --fps: 4;
            --duration_sec: 3;
            --steps: calc(var(--duration_sec) * var(--fps));

            height: 100%;
            width: 100%;

            fill: #1DB2CF; /* color-primary-100 */
            stroke: #1B1B1B; /* greyscale-90 */

            animation: 3s multicolor linear infinite;
            animation-timing-function: steps(var(--steps), end);
        }
    }
}