:root {
    --main-header-font-size: 11rem;
    --paragraph-font-size: 1rem;
    --main-nav-height: 3rem;
}

html, body {
    height: 100vh;
    width: 100vw;
    font-family: 'Mogra', serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--paragraph-font-size);
    scroll-behavior: smooth; /*for jump links*/
}
a {
    color: var(--ui-color-secondary);
}

.gnarnana-main-section {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.gnarnana-main-section:nth-child(odd) {
    background: #333;
    color: #fff;
}
.gnarnana-main-section:nth-child(even) {
    background: #000;
    color: #fff;
}

.mobile-only {
    display: none !important;
}
@media (max-width: 600px) {
    .mobile-only {
        display: unset !important;
    }
    .mobile-only.d-flex {
        display: flex !important;
    }
}

/* ---------------------- */
/* --- header section --- */
/* ---------------------- */
#header-section {
    /* display: flex;
    flex-wrap: wrap; */
    background: none;
    position: sticky;
    top: 0;
    z-index: 2;
}
.main-nav {
    width: 100%;
    height: var(--main-nav-height);
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0rem; /*pins to the top when scrolled past header */
    z-index: 10;
    transition: 0.25s all;
    font-size: 1.2rem;
}
.main-nav-link-container {
    flex: 1 0 50%;
    min-width: 50%;
    max-width: 20rem;
    display: flex;
    justify-content: space-around;
}
.main-nav .main-nav-link {
    margin: 0 .5rem 0 .5rem;
    font-size: 2rem;
    line-height: 2rem;
    color: var(--ui-color-secondary);
}
#main-nav.background-gradient-black {
    background: #000;
    background: linear-gradient(0deg, #00000000 
    0%, #000000 50%);
    /* transform: translateY(var(--main-nav-height)); make sure it's */
}
#header-section-background-img {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background-image: url('../assets/imgs/nenana_mountain.jpg');
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-position: center; 
    background-size: cover;
}
.header-text {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10vh;
    margin-bottom: 15vh;
    /* align-items: center; */
}
.header-text > .hero-text {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: calc(var(--main-header-font-size) * 0.7);
    color: var(--ui-color-primary);
    /* height: var(--main-header-font-size); */
}
.header-text > .hero-text > *,
.header-text-50 {
    line-height: var(--main-header-font-size);
    vertical-align: middle;
}
.header-text-50 {
    font-size: var(--main-header-font-size);
}
.header-text > .header-details-text {
    color: var(--ui-color-accent)
}
#header-section .header-logo-outer-wrapper {
    position: absolute;
    bottom: 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
#header-section .header-logo-inner-container {
    height: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
#header-section .header-logo-inner-container > img {
    max-width: 50%;
    max-height: 100%;
    object-fit: contain;
}
#header-section .mobile-logo-container {
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: center;
    padding-right: 2rem;
}
@media (max-width: 600px) {
    .header-logo-outer-wrapper img {
        display: none;
    }
}
/* --- header section --- */
/* ^^^^^^^^^^^^^^^^^^^^^^ */


/* --------------------- */
/* --- about section --- */
/* --------------------- */
#about {
    background: #000;
    color: #fff;
    display: flex;
    font-size: 1.2rem;
}
#about > * {
    height: 100%;
}
#race-map-img {
    position: relative;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    object-fit: cover;
}
.section-main-text-container {
    padding: 3rem;
    width: 50%;
    background: #000000cc;
    background: linear-gradient(90deg, #00000000 0%, #000000cc 30%);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    overflow-y: auto;
}
#about .section-main-text-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
#race-map-img .section-main-text-content {
    text-align: right;
}
.main-text-header {
    color: var(--ui-color-primary);
    font-family: 'Rock Salt', serif;
    font-size: 1.5rem;
    font-optical-sizing: auto;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 2.5rem;
}
/* .section-main-text-content p {
    color: white;
} */
/* --- about section --- */
/* ^^^^^^^^^^^^^^^^^^^^^ */



/* --------------------- */
/* --- event section --- */
/* --------------------- */
.text-content-section {
    padding: 3rem;
    font-size: 1.2rem;
    height: unset;
}
.subsection-header {
    color: var(--ui-color-accent);
    margin-top: 1.5rem;
}
.event-schedule-list {
    list-style: none;
}
#events .event-schedule-list a {
    color: var(--ui-color-secondary);
}
#events .event-schedule-list li {
    margin-bottom: 1.3rem;
}
.event-info-img-container {
    height: 100%;
    display: flex;
    align-items: start;
    padding: 0 2rem;
}
/* --- event section --- */
/* ^^^^^^^^^^^^^^^^^^^^^ */

/* breakpoint for col-lg */
@media (max-width: 600px) {
    .header-text {
        margin-bottom: 0;
    }
    .header-text > .hero-text {
        justify-content: flex-start;
    }
    .hero-text.font--caveat-regular > * {
        /* force each line to take up the full screen width */
        width: 100%;
        font-size: 40vw;
    }
    #about {
        /* allow full image to be shown before text covers it */
        height: 160%;
        /* make sure img is centered */
        justify-content: center;
        align-content: flex-end;
    }
    #race-map-img {
        position: sticky;
        height: 60%;
        width: 100%;
        padding: 0;
        content: url('../assets/imgs/gnarnana_map_mobile.jpg');
    }
    #about > .race-map-mobile-top-screen {
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        height: var(--main-nav-height);
        background: linear-gradient(0deg, #00000000 
        0%, #000000 100%);
    }
    #about .section-main-text-container {
        /* text covers img from bottom so make transition smooth */
        background: #000000cc;
        background: linear-gradient(180deg, #00000000 0%, #000000cc 10%);
        width: 100%;
        height: 50%;
    }
    /* hide the img on small screens */
    .event-info-img-container {
        display: none;
    }
}