/* ----------------------------------
        MARK: NAV BUTTON
---------------------------------- */
#nav_wrapper {
    z-index: 80;
    padding-top: 1em;
    padding-left: 1em;
    position: fixed;
}

#nav_icon_wrapper {
    cursor: pointer;
    width: 2.8125em;
    height: 2.8125em;
    position: relative;
    border: solid 0.125em #000;
    background-color: #fff;
    box-sizing: border-box;
    transition: 0.15s background;
}

#nav_icon_wrapper svg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#nav_icon_wrapper:hover {background-color: #cacaca;}

@media only screen and (max-width: 1024px) {
    #nav_wrapper {padding-bottom: 0.5em;}
    #nav_icon_wrapper {
        width: 2.5em;
        height: 2.5em;
    }
}


/* ----------------------------------
        MARK: COLOR THEMES
---------------------------------- */
.classic-blue {
    --accent-color-1: #0056b4;
    --accent-color-2: #009cf3;
    --accent-color-3: #45c7fa;
    --accent-color-4: #001e50;
}

.energy-blue {
    --accent-color-1: #00c7fd;
    --accent-color-2: #6ddcff;
    --accent-color-3: #a0ebff;
    --accent-color-4: #005b85;
}

.cosmos {
    --accent-color-1: #7b00ff;
    --accent-color-2: #944cff;
    --accent-color-3: #b398ff;
    --accent-color-4: #3e0084;
}

.moss {
    --accent-color-1: #8fd700;
    --accent-color-2: #8bae46;
    --accent-color-3: #d8f3a2;
    --accent-color-4: #708542;
}

.cobalt {
    --accent-color-1: #1e2db8;
    --accent-color-2: #5b69ff;
    --accent-color-3: #98a1ff;
    --accent-color-4: #000864;
}

.aqua {
    --accent-color-1: #00d3b0;
    --accent-color-2: #009e8f;
    --accent-color-3: #85f9e8;
    --accent-color-4: #00766f;
}

.carbon {
    --accent-color-1: #808080;
    --accent-color-2: #aeaeae;
    --accent-color-3: #e9e9e9;
    --accent-color-4: #262626;
}

.rust {
    --accent-color-1: #e96016;
    --accent-color-2: #ff8f51;
    --accent-color-3: #ffc699;
    --accent-color-4: #b24501;
}

.coral {
    --accent-color-1: #ff5661;
    --accent-color-2: #ff858a;
    --accent-color-3: #ffb6b9;
    --accent-color-4: #c81327;
}

.geode {
    --accent-color-1: #8f5da2;
    --accent-color-2: #cb95d9;
    --accent-color-3: #eec2f8;
    --accent-color-4: #653071;
}


/* ----------------------------------
    MARK: LEGAL / DISCLAIMER STYLES
---------------------------------- */
#legal_wrapper {word-break: break-word;}

#legal_wrapper p, #legal_wrapper li {
    --max-font-size: 13;
    --min-font-size: 13;
    line-height: 150%;
    margin-block: 0.77em;
    color: #b1b1b1;
}

#legal_wrapper {
    background-color: var(--accent-color-4);
    padding-block: var(--default-margin-block);
}

#legal_wrapper :where(p):first-child {margin-top: 0;} 
#legal_wrapper :where(p):last-child {margin-bottom: 0;}


/* ----------------------------------
        MARK: VIDEO STYLES
---------------------------------- */
.video_wrapper {
    width: 100%;
    position: relative;
    margin-top: 1.875em;
    margin-inline: auto;
}

.video_wrapper video {
    width: 100%;
    height: auto;
}

.video_wrapper .video_ios_click {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}