/* ****** Base Responsiveness Across ALL Pages ****** */

/* Dark Mode Preferences */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --primary-color: #ffffff;
    }
}

/* ********** Header = Grid on Desktop ********** */
@media (min-width: 56em) {
    header {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 4.5rem repeat(11, 1fr);
        height: 100vh;
    }

    nav {
        grid-column: 1 / 13;
    }

    h1 {
        grid-column: 1 / 13;
        grid-row: 7;
    }

    header .arrow-jump-container {
        grid-column: 1 / 13;
        grid-row: 13;
    }

    .article-img-position {
        /* places the img above the text on mobile */
        order: 1;
    }

    .foot-site-map,
    .footer-info {
        flex-direction: row;
        align-items: center;
    }

}

/* ********** Home Page Responsiveness (index) ********** */

/* Flexbox adjustment on browser resize for 2 col layout*/
@media (min-width: 38.75em) and (max-width: 58em) {
    #content-box {
        /* Moves the article #content-box to the top & stretches it 2 coolumns at breakpoints */
        width: 38.5rem;
        order: -1;
    }
}

/* ********** Thingvellir & Reykjavik Pages ********** */

@media (min-width: 80em) {
    .content-section {
        flex-direction: row;
        gap: 1rem;
    }

    .content-section>img {
        width: 50vw;
    }

    #video {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}