:root {

    /* BASE COLORS */
    --color-body-background: rgb(255 255 255 / 1);
    --color-body-text: rgb(0 0 0 / .8);
    --color-headings: rgb(0 0 0 / 1);
    --color-links: rgb(51 102 204 / 1);
    --color-links-hover: rgb(0 51 153 / 1);
    --color-brand-color: rgb(67, 196, 163);
    --color-header-bg: rgb(46, 116, 104);
    --color-header-links: rgb(255, 255, 255);
    --color-hero-bg: rgb(210, 241, 233);
    --color-footer-bg: rgb(46, 116, 104);
    --color-footer-text: rgb(255, 255, 255);
    --color-footer-links: rgb(255, 255, 255);

/* BASE TYPOGRAPHY */
    --font-body: Helvetica, Arial, sans-serif;
    --font-headings: Georgia, sans-serif;

}

/* GLOBAL RESETS */
body { margin: 0; }
* {box-sizing: border-box;}

/* SET GLOBAL COLORS */
body {
    background: var(--color-body-background);
    color: var(--color-body-text);
}

h1, h2, h3 {
    color: var(--color-headings);
}

a {
    color: var(--color-links);
}

a:hover {
    color: var(--color-links-hover);
}

/* SET GLOBAL TYPOGRAPHY */
body {
    font-family: var(--font-body);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-headings);
}

h1 {
    font-size: 2.25em;
    line-height: 1.1;
}

h2 {
    font-size: 1.875em;
    line-height: 1.2;
}

h3 {
    font-size: 1.5em;
    line-height: 1.3;
}

p {
    max-width: 60ch;
}

/* MEDIA QUERIES w/ RESPONSIVE TYPOGRAPHY */
body {
    font-size: 87.5%;
} 

@media (min-width:768px) {
    body {
        font-size: 100%;
    } 
}

@media (min-width:1250px) {
    body {
        font-size: 112.5%;
    } 
}

/* RESPONSIVE IMAGES */
img {
    max-width: 100%;
    height: auto;
}

/* CONTAINER */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1em;
}

/* GRID SYSTEM */
.row {
    --gridgap: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
}
@media (min-width: 768px) {
    .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gridgap);
    }

    .row.vertical-centered {
        align-items: center;
    }

    .row.swapped > *:first-child {
        order: 2;
    }

    .row.swapped > *:last-child {
        order: 1;
    }

    .one-whole { grid-column: span 12 / span 12; }
    .one-half { grid-column: span 6 / span 6; }
    .one-third { grid-column: span 4 / span 4; }
    .two-thirds { grid-column: span 8 / span 8; }
    .one-fourth { grid-column: span 3 / span 3; }
    .three-fourths { grid-column: span 9 / span 9; }

    .one-half.centered { grid-column-start: 4; }
    .one-third.centered { grid-column-start: 5; }
    .two-thirds.centered { grid-column-start: 3; }
}

/* FOR DEMO GRID ONLY */
.demo .row {
    margin-bottom: 0;
    padding: 0;
}

.demo .row > * {
    background: rgb(0 0 0 / .1);
    padding: 1em;
    text-align: center;
    margin-bottom: var(--gridgap);
}

.demo p {
    margin: 0;
    max-width: none;
}

/* ----------------------------- */
/* ----- PAGE STRUCTURE -------- */
/* ----------------------------- */

/* SITE HEADER */
.site-header {
    background-color: var(--color-header-bg);
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header .site-logo {
    display: flex;
    align-items: center;
    gap: 1em;
}

.site-header img {
    display: block;
}

.site-header h1 {
    margin: 0;
    font-size: 1.5em;
}

.site-header a {
    text-decoration: none;
    color: var(--color-header-links);
}

.site-header .site-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
}

.site-header .site-nav a {
    display: block;
    padding: 1em;
}

/* SITE MAIN */
.site-main {
    /* background-color: red; */
}

/* ALL SECTIONS */
section {
    padding-top: 6em;
    padding-bottom: 6em;
}

/* HERO SECTION */
.hero {
    background: var(--color-hero-bg)
}

/* SITE FOOTER */
.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 5em 0;
}

.site-footer .site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer a {
    text-decoration: none;
    color: var(--color-footer-links);
}


/* ----------------------------- */
/* ----- CUSTOM STYLING -------- */
/* ----------------------------- */

/* CUSTOM TYPE BLOCK: HEADLINE AND SUB HEADLINE */
.headline {
    font-size: 4em;
    color: var(--color-brand-color);
    margin: 1rem 0;
    line-height: 1;
}
.subheadline {
    font-size: 2em;
    font-weight: normal;
    margin: 1rem 0;
}