@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('assets/fonts/CeraPro-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Book.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-BookItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('assets/fonts/Gotham-Ultra.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('assets/fonts/Gotham-UltraItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-XLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-XLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

:root {
    --doc-height: 100%;
    --doc-width: 100%;
}

:root {
    --gl-light-blue: #2184BE;
    --gl-medium-blue: #1666AA;
    --gl-dark-blue: #0B304E;
    --gl-midnight-blue: #0F2135;
    --gl-accent-cucumber: #7F9F49;
    --gl-accent-celery: #A3CA61;
    --gl-accent-danube: #67B2CF;
    --gl-accent-ripe-lemon: #F4CA14;
}

:root {
    --atom-gray: #343233;
    --atom-tan: #EFDAB9;
    --atom-yellow: #FFD152;
    --atom-green: #3B9B6D;
    --atom-red: #C13F21;
    --atom-orange: #D36E2d;
    --atom-gold: #DDA032;
    --atom-steel: #78AF9F;
    --atom-blue: #659CC8;
    --atom-ice: #DEECE8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100vw;
    width: var(--doc-width);
    height: 100vh;
    height: var(--doc-height);
    font-family: 'Gotham', sans-serif;
}

body {
    width: 100%;
    width: var(--doc-width);
    height: 100%;
    height: var(--doc-height);
    padding-top: 10vh;
}

h1, h2, h3, h4, h5, h6, button {
    font-family: 'Cera Pro', sans-serif;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: 10;
    background-color: color-mix(in srgb, var(--gl-dark-blue) 75%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.site-logo {
    height: 2vh;
    margin: 0 auto 0 60px;
}

.site-logo-mobile {
    display: none;
}

.site-title {
    color: #FFF;
    text-transform: uppercase;
}

.site-login-button {
    height: 4vh;
    width: 160px;
    margin: 0 60px 0 auto;
    border-radius: 1.2vh;
    border: 2px solid #FFF;
    color: #FFF;
    font-weight: 500;
    font-size: 1.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.2s, border 0.2s;
    cursor: pointer;
}

.site-login-button:hover {
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid var(--gl-dark-blue);
}

[hidden] {
    display: none !important;
}

::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {

    .site-header {
        height: 8vh;
    }

    .site-logo {
        display: none;
    }

    .site-logo-mobile {
        display: block;
        height: 2vh;
        margin: 0 10px 0 25px;
    }

    .site-title {
        font-size: 1em;
        text-align: center;
    }

    .site-login-button {
        width: 100px;
        height: 3.5vh;
        font-weight: 400;
        font-size: 0.8em;
        margin-right: 25px;
    }

}