* {
    box-sizing: border-box;
    font: inherit; color: inherit; 
    -webkit-tap-highlight-color: transparent;
}


@keyframes initial-loading-animation { to { rotate: 360deg; } }
#initial-load, #login, #disable-mouse {
    display: flex; 
    position: absolute; inset: 0;
    background-color: var(--bg-1);
    justify-content: center; align-items: center; flex-direction: column;

    h1 {
        margin: 0 0 .5em;
        color: var(--fg-2);
        font-size: 3em;
    }
}

#login { z-index: 3; }

#initial-load .loading-animation,
#disable-mouse .loading-animation {
    width: 2em; height: 2em;
    border: .25em var(--fg-1) solid; border-radius: 100%;
    border-left-color: transparent; border-bottom-color: transparent;
    animation: .75s infinite linear initial-loading-animation;
}

#disable-mouse {
    background-color: #0000;
    z-index: 9999999;
    
    .loading-animation {
        font-size: 3em;
    }
}

body {
    display: flex;
    margin: auto; height: 100dvh;
    justify-content: center; flex-direction: row;
    color: var(--fg-1); background-color: var(--bg-1);
    font-family: rubik, sans-serif;

    & > * { height: 100%; }
}


main {
    padding: 2em; max-width: 600px;
    border-left: .06125em var(--bd-1) solid;
    flex-grow: 1;
    overflow: hidden 
}


#sidebar {
    display: flex; font-size: 1.25em;
    padding-top: 1em; height: 2.5em;
    padding: .5 1.5em;
    flex-direction: column; gap: .25em;

    a {
        display: flex;
        padding: .5em 1em; height: 2.5em;
        align-items: center; gap: 1em;
        text-decoration: none;
        
        i, svg {
            height: 1em;
            font-size: 1.5em;
        }
    }
}

/* small tablets */
@media (max-width: 800px) {
    #sidebar {
        a {
            padding: .5em 1em;
            height: 3.5em;
            justify-content: center; 

            i { font-size: 1.75em; }
            span { display: none; }
        }
    }
}

/* polarit tablets */
@media (max-width: 600px) {
    main { padding: 1.5em }
    #sidebar a { padding: .5em .75em }
}

/* phones */
@media (max-width: 500px) {
    body { flex-direction: column-reverse; }

    main { 
        padding: 1em;
        border: none; 
    }

    #sidebar {
        padding: 0 1em .75em; height: unset;
        flex-direction: row; justify-content: space-evenly;

        a {
            padding: 0; flex-grow: 1;
        }
    }
}

/* slim devices */
@media (max-width: 320px) {
    #sidebar .metw { display: none }
}