/* region VARIABLES */

:root {
    --header-height: 8vh;
    --nav-height: 8vh;
    --subnav-height: 4vh;
    --main-height: calc(100dvh - (var(--subnav-height) + var(--nav-height) + var(--header-height)));

    --header-top: 0;
    --nav-top: calc(var(--header-height) + var(--subnav-height) + var(--main-height));
    --main-top: calc(var(--header-height) + var(--subnav-height));
    --subnav-top: var(--header-height);
}

/* endregion VARIABLES */

/* #region LOADING SCREEN */

div#splashscreen {
    display: fixed;
    visibility: hidden;
    /*color: #FFC72C;*/
    color: white;
    background-color: black/*#DA291C*/;
    position: fixed;
    z-index: 5;
    min-height: 100dvh;
    min-width: 100dvw;
    left: 0;
    padding-top: 20vh;
    /*align-content: center;*/
}
div#splashscreen.active {
    visibility: visible;
}

/*
div#splashscreen.active svg {
    animation: svg_glow 2s linear forwards;
    animation-delay: 0.5s;
}
@keyframes svg_glow {
    0% {
        filter: drop-shadow(  0px  0px  0px rgba(0, 0, 0, 0.5));
    }
    25% {
        filter: drop-shadow( 15px  5px  0px rgba(0, 0, 0, 0.5));
    }
    50% {
        filter: drop-shadow(  0px 15px  0px rgba(0, 0, 0, 0.5));
    }
    75% {
        filter: drop-shadow(-15px  5px  0px rgba(0, 0, 0, 0.5));
    }
    100% {
        filter: drop-shadow(  0px  0px  0px rgba(0, 0, 0, 0.5));
    }
}
*/

div#loadscreen {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
div#loadscreen.active {
    display: block;
}
div#loadscreencontent {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 35vh;
    color: rgba(40, 40, 40, 0.4);
    font-size: 15vw;
}

/* #endregion LOADING SCREEN */


/* region GENERAL */

body {
    touch-action: auto;
    -webkit-user-drag: none;
    overflow-x: hidden;
    background: white;
}

/* endregion GENERAL */

/* region UTILITY STYLES */

div.scrollable {
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    height: 100%;
}

/* endregion UTILITY STYLES */


/* #region POSITIONING */

header {
    position: fixed;
    width: 100%;
    top: var(--header-top);
    height: var(--header-height);
}

main {
    position: fixed;
    width: 100%;
    top: var(--main-top);
    height: calc(var(--main-height));
}

main > div {
    height: 100%;
}

navbar {
    position: fixed;
    width: 100%;
    top: var(--nav-top);
    height: var(--nav-height);
}

subnavbar {
    position: fixed;
    width: 100%;
    top: var(--subnav-top);
    height: var(--subnav-height);
}

div#dummy {
    display: none;
    height: 101vh;
    min-height: 101vh;
}

/* #endregion POSITIONING */

/* region STYLING */

header {
    background-color: #333;
    color: white;
    text-align: center;
    font-size: 4cqh;
    display: flex;
    justify-content: center;
    align-items: center;
}

header > img {
    max-height: 70%;
    max-width: 25%;
    background-color: white;
}

main {
    background-color: white;
    max-width: 100vh;
    overflow-x: scroll;
}

/* endregion STYLING */




/*
nav {
    height: var(--nav-height);
    background-color: green;
    container-type: size;
}
*/