/* universal colors */
:root {
    --white: #ffffff;
    --gold: hsl(30, 50%, 35%);
    --bronze: #998133;
    --red: #c02a19;
    --maroon: #772e25;
    --turq: #51c8ff;
    --dusk: #13a0ec;
    --orange: #bf8040;
    --tcotta: #86592d;
    --bg_gray: #8c8c8c;
    --matrix_green: #00F73F;
}

/* universal fonts */
@font-face {
    font-family: 'Resamitz';
    src: url('fonts/Resamitz.otf');
}

@font-face {
    font-family: 'Prida01';
    src: url('fonts/Prida01.otf');
}

@font-face {
    font-family: 'Prida02';
    src: url('fonts/Prida02Calt.otf');
}

@font-face {
    font-family: 'Prida36';
    src: url('fonts/Prida36.ttf');
}

@font-face {
    font-family: 'Prida61';
    src: url('fonts/Prida61.otf');
}

@font-face {
    font-family: 'Prida65';
    src: url('fonts/Prida65.otf');
}

body,
html {
    margin: 0;
}

.header {
    width: 100%;
    overflow: hidden;

    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.header_background {
    mask: linear-gradient(black, black, transparent);
    backdrop-filter: opacity(10%);
    background-image: url(../header/images/canyon_contour.svg);
    z-index: -1;

    min-height: 200px;
}

.header_foreground {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
}

.header_tab {
    font-family: "Prida36";
    font-size: 25px;

    height: 23px;

    color: var(--tcotta);
    background: white;
    text-decoration: none;

    margin-top: 0;
    margin-bottom: 0;

    border-radius: 20px;
}

.current {
    font-family: "Prida36";
    font-size: 25px;

    height: 23px;

    color: var(--tcotta);
    background: white;
    text-decoration: none;

    margin-top: 0;
    margin-bottom: 0;

    border-radius: 20px;
}

.compass_div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-left: auto;
    margin-right: auto;
}

.header_canvas {
    width: 20vw;
    height: 20vw;
    max-height: 175px;
    max-width: 175px;

    margin-left: 20px;
    margin-right: 20px;
}

.page_header {
    color: var(--red);
    text-shadow: -2px -2px 2px white, 2px -2px 2px white, -2px 2px 2px white, 2px 2px 2px white;

    font-family: 'Prida65';

    align-self: center;

    width: max-content;
    max-width: 60vw;

    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .header_iframe {
        width: 100%;
        height: 27vw;
        max-height: 400px;
        min-height: 100px;

        border: none;

        overflow: hidden;
    }

    .mobile_menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .page_header {
        font-size: 40px;
    }

    .menu_span {
        background: transparent;
        color: var(--tcotta);
        text-decoration: none;
        text-shadow: -2px -2px 2px white, 2px -2px 2px white, -2px 2px 2px white, 2px 2px 2px white;
    }

    .menu_btn {
        font-family: "Prida36";
        font-size: 25px;

        background: transparent;
        color: var(--tcotta);
        text-decoration: none;
        text-shadow: -2px -2px 2px white, 2px -2px 2px white, -2px 2px 2px white, 2px 2px 2px white;

        max-width: max-content;

        border: none;
        border-radius: 15px;
    }

    .tabs_div {
        display: none;

        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header_text {
        display: none;
    }
}

@media (min-width: 600px) {
    .header_iframe {
        width: 100%;
        height: 27vw;
        max-height: 200px;

        border: none;

        overflow: hidden;
    }

    .mobile_menu {
        display: none;
    }

    .tabs_div {
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .header_text {
        font-family: 'Prida65';
        font-size: max(4vw, 25px);

        text-shadow: -2px -2px 2px white, 2px -2px 2px white, -2px 2px 2px white, 2px 2px 2px white;

        align-self: center;

        width: max-content;
        max-width: 60vw;
    }

    .page_header {
        font-size: max(4vw, 25px);
    }
}