#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

:root {
    --hue: 223;
    --bg: hsl(var(--hue),90%,90%);
    --fg: hsl(var(--hue),90%,10%);
    --trans-dur: 0.3s;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/****************/

.smiley {
    width: 8em;
    height: 8em;
}
.smiley__eye1,
.smiley__eye2,
.smiley__mouth1,
.smiley__mouth2 {
    animation: eye1 3s ease-in-out infinite;
}
.smiley__eye1,
.smiley__eye2 {
    transform-origin: 64px 64px;
}
.smiley__eye2 {
    animation-name: eye2;
}
.smiley__mouth1 {
    animation-name: mouth1;
}
.smiley__mouth2 {
    animation-name: mouth2;
    visibility: hidden;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),90%,10%);
        --fg: hsl(var(--hue),90%,90%);
    }
}

/* Animations */
@keyframes eye1 {
    from {
        transform: rotate(-260deg) translate(0,-56px);
    }
    50%,
    60% {
        animation-timing-function: cubic-bezier(0.17,0,0.58,1);
        transform: rotate(-40deg) translate(0,-56px) scale(1);
    }
    to {
        transform: rotate(225deg) translate(0,-56px) scale(0.35);
    }
}
@keyframes eye2 {
    from {
        transform: rotate(-260deg) translate(0,-56px);
    }
    50% {
        transform: rotate(40deg) translate(0,-56px) rotate(-40deg) scale(1);
    }
    52.5% {
        transform: rotate(40deg) translate(0,-56px) rotate(-40deg) scale(1,0);
    }
    55%,
    70% {
        animation-timing-function: cubic-bezier(0,0,0.28,1);
        transform: rotate(40deg) translate(0,-56px) rotate(-40deg) scale(1);
    }
    to {
        transform: rotate(150deg) translate(0,-56px) scale(0.4);
    }
}
@keyframes eyeBlink {
    from,
    25%,
    75%,
    to {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0);
    }
}
@keyframes mouth1 {
    from {
        animation-timing-function: ease-in;
        stroke-dasharray: 0 351.86;
        stroke-dashoffset: 0;
    }
    25% {
        animation-timing-function: ease-out;
        stroke-dasharray: 175.93 351.86;
        stroke-dashoffset: 0;
    }
    50% {
        animation-timing-function: steps(1,start);
        stroke-dasharray: 175.93 351.86;
        stroke-dashoffset: -175.93;
        visibility: visible;
    }
    75%,
    to {
        visibility: hidden;
    }
}
@keyframes mouth2 {
    from {
        animation-timing-function: steps(1,end);
        visibility: hidden;
    }
    50% {
        animation-timing-function: ease-in-out;
        visibility: visible;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -351.86;
    }
}