#loading {

    position: absolute;

    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 50vh;
    grid-template-areas:
        "circle"
        "text";

    justify-items: center;

    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    overflow: hidden;

    opacity: 1;

    background-color: black;

    pointer-events: all;

    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;

}



#loading.done {

    opacity: 0.0;

    pointer-events: none;

}



#loading #loading-screen-circle {

    grid-area: circle;

    align-self: flex-end;

    border: 5px solid var(--background-grey);
    border-top: 5px solid var(--highlight-rgb);
    border-radius: 50%;

    width: 50px;
    height: 50px;

    animation: spin 2s linear infinite;
    animation-play-state: running;

}



#loading.done #loading-screen-circle {

    animation-play-state: paused;

}



#loading>p {

    grid-area: text;

    align-self: flex-start;

    font-weight: 600;
    color: var(--highlight-rgb);

    text-align: center;

}