/* Cookie Asker Styles */

.cookie-consent {
    position: fixed;
    bottom: 70px;
    right: 20px;
    background-color: rgb(200, 220, 250);
    color: rgb(0, 0, 20);
    z-index: 10;
    width: 380px;
    padding: 4px 8px;
    text-align: justify;
    text-align-last: center;
    border-radius: 4px;
    box-shadow: 0 0 2px 2px rgb(200, 220, 250);
    
    font-family: "Geologica", "Montserrat", "Open Sans", sans-serif;
    font-variation-settings: 'wght' 400, 'CRSV' 1, 'SHRP' 70;
    
    transition: 0.1s ease;
}

.cookie-consent p { color: rgb(0, 0, 20); }

.cookie-consent a { color: rgb(50, 80, 200); transition: 0.1s ease; }
.cookie-consent a:hover { color: rgb(190, 0, 0); }

.cookie-consent button {
    background-color: rgb(20, 40, 80);
    color: rgb(190, 180, 20);
    
    transition: 0.1s ease;
    margin: 2px 1px;
    padding: 0 8px;
}

.cookie-consent button:hover {
    background-color: rgb(0, 20, 40);
    color: rgb(200, 120, 0);
    padding: 0 10px;
}

.header-alerts {
    width: 100%;
    margin: 0 auto;
    padding: 4px 0;
    background-color: var(--a-hover);
    color: var(--background-color);
    
    font-family: "Roboto Mono", monospace;
    text-align: center;
    font-weight: bold;
}
.header-alerts * {
    color: var(--background-color);
}
.header-alerts a {
    text-decoration: underline;
}

/* Header Styles */

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: min(6vw, 6vh);
    background-color: var(--header);
    z-index: 5;
}

.header-alerts {
    position: sticky;
}

.header-contents * {
    transition: 0.15s ease;
}

.header-contents {
    line-height: min(6vw, 6vh);
    vertical-align: middle;
    padding: 0;
    margin: 0 auto;
}

#header-nav-menu {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

#header-nav-menu > li {
    list-style: none;
    display: inline;
    height: 100%;
    width: 80%;
}

#header-nav-menu > li > a, .dropdown-menu li a {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    white-space: nowrap;
    color: var(--a-hover);
    font-weight: bold;
    font-family: "Geologica", "Montserrat", "Open Sans", sans-serif;
    font-variation-settings: 'wght' 500, 'CRSV' 1, 'SHRP' 60;
    text-decoration: none;
    font-size: calc(var(--font-sizing) + 24pt); /*4vw*/
    cursor: pointer;
}
#header-nav-menu > li > a { background-color: var(--header); }

#header-nav-menu a:hover, .dropdown-menu li a:hover {
    cursor: pointer;
    color: var(--color);
}

.dropdown-parent        { padding: 0; }

.dropdown-menu {
    padding: 0;
    background-color: var(--header);
    overflow: hidden;
    height: 100%;
    border: 2px solid var(--color);
    border-top: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.dropdown-menu li {
    width: 100%;
    margin-right: 0;
    list-style: none;
    background-color: var(--background-color);
}

.dropdown-menu li a {
    font-size: calc(var(--font-sizing) + 18pt); /*3.5vw*/
    color: var(--color);
}

.dropdown-menu:hover > li:hover {
    width: 90%;
    margin-left: 10%;
}

.dropdown-parent * {
    display: none;
}

.dropdown-parent:hover *,
.user-tabbing .dropdown-parent a:focus,
.user-tabbing .dropdown-parent a:focus ~ *,
.user-tabbing .dropdown-parent a:focus ~ * *,
.user-tabbing .dropdown-parent:focus-within *
{
    display: block;
}



#nav-burger-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}

#nav-burger-icon > nav {
    overflow-x: hidden;
}

#nav-burger-icon input {
    position: absolute;
    width: min(14vw, 14vh);
    height: min(12vh, 12vw);
    cursor: pointer;
    top: min(1vh, 1vw);
    right: min(2vh, 2vw);
    transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1);
    opacity: 0;
    display: none;
    z-index: 6;
    -webkit-touch-callout: none;
}

#icon-spans {
    position: relative;
    top: min(2vw, 2vh);
    right: min(1vw, 1vh);
    z-index: 5;
    transition-property: box-shadow, margin, padding;
    transition-duration: 0.2s, 1s, 1s;
    transition-timing-function: ease, cubic-bezier(0.8, 0, 0.2, 1), cubic-bezier(0.8, 0, 0.2, 1);
    display: none;
    width: min(14vh, 14vw);
    float: right;
}

#icon-spans span {
    display: block;
    height: min(1.2vw, 1.2vh);
    width: min(13vh, 13vw);
    margin-bottom: min(3vw, 3vh);
    position: relative;
    z-index: 5;
    background-color: var(--color);
    border-radius: min(0.6vw, 0.6vh); /* Supposed to be vw and vh */
    transform-origin: 0 0;
    transition: 0.8s cubic-bezier(0.8, 0, 0.2, 1);
}

#icon-spans span:nth-child(1) {
    transform-origin: 0 75%;
}

#icon-spans span:nth-child(2) {
    transform-origin: 0 50%;
}

#icon-spans span:nth-child(3) {
    transform-origin: 0 25%;
    margin-bottom: 0;
}

#nav-burger-icon input:checked ~ #icon-spans span:nth-child(1) {
    transform: translate(0, min(-0.3vw, -0.3vh)) rotate(45deg);
}

#nav-burger-icon input:checked ~ #icon-spans span:nth-child(2) {
    transform: scale(0);
    opacity: 0;
}

#nav-burger-icon input:checked ~ #icon-spans span:nth-child(3) {
    transform: translate(0, min(0.3vh, 0.3vw)) rotate(-45deg);
}


@media screen and (max-width: 1000px) {
    #header-nav-menu > li > a {
        font-size: calc(var(--font-sizing) + 20pt); /*4vw*/
    }
    
    .dropdown-menu li a {
        font-size: calc(var(--font-sizing) + 14pt);
    }
}

@media screen and (max-width: 600px) {
    .loading-screen { padding-top: min(40vh, 40vw); }
    
    header {
        height: min(14vw, 14vh);
    }
    .header-alerts { font-size: small; }
    .content { padding-top: min(14vh, 14vw); }
    
    .cookie-consent {
        position: fixed;
        bottom: 80px;
        right: auto;
        margin: auto 20px;
        z-index: 10;
        width: auto;
    }
    
    #header-nav-menu {
        display: block;
        align-items: unset;
        justify-content: unset;
    }
    
    #header-nav-menu, #header-nav-menu li, #header-nav-menu li a {
        text-align: center;
    }
    
    
    #nav-burger-icon { top: unset; }
    
    #nav-burger-icon > nav {
        position: sticky;
        display: block;
        width: auto;
        top: 0;
        right: 0;
        left: auto;
        padding: 0 30px 20px;
        margin-top: calc(min(14vw, 14vh) - 2px);
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        background-color: var(--header);
        box-shadow: -2px 2px 2px 1px var(--header);
        border-bottom-left-radius: 15px;
        color: var(--color);
        min-width: 120px;
        height: auto;
        transform-origin: 0 0;
        transform: translate(0, 0);
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto;
        transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1), background-color 0.15s ease;
    }
    
    #header-nav-menu > li {
        display: block;
        width: auto;
        transform-origin: 100% 50%;
        transition: 0.8s cubic-bezier(0.8, 0, 0.2, 1);
        transform: scale(1);
    }
    
    #header-nav-menu li:not(.dropdown-parent), #header-nav-menu .dropdown-parent a {
        display: block;
        height: calc(var(--font-sizing) + min(8vh, 8vw));
        line-height: calc(var(--font-sizing) + min(8vh, 8vw));
    }
    
    .dropdown-parent { margin: min(1vw, 1vh) auto; }
    
    #header-nav-menu li a:not(.dropdown-menu li a) {
        text-align: right;
        /*display: inline;*/
        font-size: calc(var(--font-sizing) + min(6vh, 6vw));
        vertical-align: middle;
    }
    
    #nav-burger-icon {
        width: auto;
        height: 0;
    }
    
    #nav-burger-icon input {
        display: initial;
    }
    
    #icon-spans {
        display: block;
    }
    
    #nav-burger-icon input:not(:checked) ~ nav {
        transform: translate(calc(100% + 4px), 0);
    }
    
    #nav-burger-icon input:not(:checked) ~ nav #header-nav-menu > li {
        transform: scale(-1);
    }
    
    .dropdown-parent {
        border: 2px solid var(--color);
    }
    
    .dropdown-menu {
        display: block;
        border: none;
        border-top: 1px solid var(--color);
    }
    
    .dropdown-menu li a {
        font-size: calc(var(--font-sizing) + min(5vh, 5vw));
    }
    
    .dropdown-menu:hover > li:hover {
        width: 100%;
        margin: 0;
    }
    
    #nav-burger-icon > nav::-webkit-scrollbar {
        background-color: var(--header);
    }
    
    #nav-burger-icon > nav::-webkit-scrollbar-thumb {
        background-color: var(--background-color);
    }
}

.header-alerts {
    padding: 0 2vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.header-alerts a { color: var(--header); }
.header-alerts a:hover { color: var(--background-color); }

/* Apple Devices */
@media not all and (min-resolution:.001dpcm) and (max-width: 600px) { 
    @supports (-webkit-appearance:none) {
        
    }
}