:root {
    --preload-color-background: rgba(33, 33, 33, 0.5);
    --preload-color-foreground: #ffffff;
    --preload-color-accent: #03a9f4;
    --preload-gap: 36px;
    --preload-icon-size: 128px;
    --preload-font: 2em Roboto, arial, sans-serif;
    --preload-spinner-size: 32px;
    --preload-spinner-width: 3px;
}

#app-preloader {
    z-index: 99999999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--preload-gap);
    justify-content: center;
    align-items: center;
    background: var(--preload-color-background);
    color: var(--preload-color-foreground);
    font: var(--preload-font);
    transition: .3s ease-in-out;
    top: 0;
}

#app-preloader .preloader-spinner {
    position: fixed;
    left: calc(50vw - calc(var(--preload-spinner-size) / 2px));
    width: var(--preload-spinner-size);
    height: var(--preload-spinner-size);
    animation: preloader-spinner .5s linear infinite;
}

#app-preloader .preloader-spinner .preloader-spinner-icon {
    width: var(--preload-spinner-size);
    height: var(--preload-spinner-size);
    stroke: var(--preload-color-foreground);
    stroke-width: var(--preload-spinner-width);
    stroke-dasharray: 314%, 314%;
    animation: preloader-spinner-icon-anim 1s linear infinite alternate;
}

@keyframes preloader-logo-anim {
    0% {
        filter: opacity(0);
        transform: translateY(-30px);
    }

    100% {
        filter: opacity(1);
        transform: translateY(0);
    }
}

@keyframes preloader-title-anim {
    0% {
        filter: opacity(0);
    }

    100% {
        filter: opacity(1);
    }
}

@keyframes preloader-spinner {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes preloader-spinner-icon-anim {
    0% {
        stroke-dasharray: 0%, 314%;
    }

    100% {
        stroke-dasharray: 314%, 314%;
    }
}