:root {
    --clr-economic: #9bb0c4;
    --clr-cultural: #88d5f1;
    --clr-environment: #a3f48b;
    --clr-social: #e7d9a3;
    --clr-text: black;

    --ff-primary: "Inter", sans-serif;

    --fw-title: 700;
    --fw-primary: 400;

    --fs-title: 2.5rem;
    --fs-label: 1.375rem;
    --fs-text: 0.85rem;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-family: var(--ff-primary);
    color: var(--clr-text);
    font-size: 1.125rem;
}

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

section {
    padding: 3em 1em;
}

a {
    color: var(--clr-text);
    text-decoration: none;
}

a:hover,
a:focus {
    color: darkcyan;
    text-decoration: underline;
}

ul {
    list-style: none;
}


/* Typography */

h2,
h3,
p {
    font-family: var(--ff-primary);
    margin: 0;
}

h2,
h3 {
    font-weight: var(--fw-title);
    line-height: 0.8;
}

h2 {
    font-size: var(--fs-title);
}

h3 {
    font-size: var(--fs-label);
}

p {
    font-size: var(--fs-text);
    margin: 0.85em 0;
}

.logo {
    max-width: 5em;
    margin: 0;
}


/* navigation */

header {
    padding: 0 0 2em;
    background-color: var(--clr-economic);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: end;
}

nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: space-around;
}

nav a {
    display: inline-block;
    padding: 0.5em;
}


/* buttons */

.btn {
    padding: .5em 2em;
    margin: 1.5em .5em;
}

.clr-food {
    background-color: var(--clr-economic);
}

.clr-home {
    background-color: var(--clr-environment);
}

.clr-ed {
    background-color: var(--clr-cultural);
}

.clr-active {
    background-color: var(--clr-social);
}

.group-link {
    padding: .5em;
}

.btn-group ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: space-around;
}

.btn-group a {
    display: inline-block;
}

/* homepage styles */

.hero {
    background-color: var(--clr-economic);
    padding: 5vh 1em;
    background-attachment: fixed;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.hero>* {
    padding: 0 5em;
}

.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 95vw;
}

.hero-vid {
    text-align: center;
    max-width: 95vw;
}

.section-title {
    text-align: center;
}

.group-label {
    max-width: fit-content;
    display: flex;
}

.links-group ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

footer {
    background-color: var(--clr-economic);
}

footer section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
}

footer section>* {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ftr-logo img {
    max-width: 5em;
}

@media only screen and (max-width: 768px) {

    header {
        padding: 0;
    }

    .btn {
        margin: 0.5em;
    }

    .section-title {
        padding: 1em 0;
    }

    .resources {
        padding: .25em;
    }

    .links-group ul {
        grid-template-columns: 1fr;
    }

    .links-group ul li {
        padding: 0.5em;
    }

    .group-link {
        padding: 0;
    }

    .btn-group ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .hero>* {
        padding: 0.5em;
    }

    footer section {
        grid-template-columns: 1fr;
        padding: 1em;
    }

    .ftr-nav ul,
    .ftr-social ul {
        padding: 0;
    }

    footer section>* {
        margin: 1em 0;
    }
}