:root {
    /* Colors for dark theme (default) */
    --color-surface: #121212;
    --color-on-surface: #FFFFFA;
    --color-on-surface-rgb: 255, 255, 250;
}

@media (prefers-color-scheme: light) {
    :root {
        /* Colors for light theme */
        --color-surface: #FFFFFF;
        --color-on-surface: #000000;
        --color-on-surface-rgb: 0, 0, 0;
    }
}

html,
body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Source: https://cssloaders.github.io */
.loader {
    width: 48px;
    height: 40px;
    margin-top: 30px;
    display: inline-block;
    position: relative;
    background: var(--color-on-surface);
    border-radius: 15% 15% 35% 35%;
}

.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 45px;
    top: 8px;
    border: 4px solid var(--color-on-surface);
    width: 16px;
    height: 20px;
    border-radius: 0 4px 4px 0;
}

.loader::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 10px;
    color: var(--color-on-surface);
    top: -15px;
    left: 11px;
    box-sizing: border-box;
    animation: animloader 1s ease infinite;
}

@keyframes animloader {
    0% {
        box-shadow: 2px 0px rgba(var(--color-on-surface-rgb), 0), 12px 0px rgba(var(--color-on-surface-rgb), 0.3), 20px 0px rgba(var(--color-on-surface-rgb), 0);
    }

    50% {
        box-shadow: 2px -5px rgba(var(--color-on-surface-rgb), 0.5), 12px -3px rgba(var(--color-on-surface-rgb), 0.5), 20px -2px rgba(var(--color-on-surface-rgb), 0.6);
    }

    100% {
        box-shadow: 2px -8px rgba(var(--color-on-surface-rgb), 0), 12px -5px rgba(var(--color-on-surface-rgb), 0), 20px -5px rgba(var(--color-on-surface-rgb), 0);
    }
}