/* CSS BY Matt Barbee */

/* IMPORTED FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* CSS RESET */


/* ROOT VARIABLES */
:root {
    --body-font: Playfair Display;

    --midnight-blue: #1F2A44;
    --olive-green: #76885B;
    --champagne-gold: #E5C185;
    --linen: #F8F4EC;
    --dark-charcoal: #2B2B2B;
    --soft-white: #FAF9F6;
}

/* GLOBAL STYLES (mobile first/small) */
body {
    font-family: var(--body-font);
    color: var(--dark-charcoal);
    margin: 0;
    background-color: var(--soft-white);
}

h1 {
    color: var(--linen);
    font-size: 4em;
    margin: 0 25px;
}

h2 {
    color: var(--midnight-blue);
    font-size: 2em;
    font-weight: 500;
    margin-bottom: 10px;
}

h3 {
    color: var(--linen);
    font-size: 1.75em;
}

header {
    background: var(--midnight-blue);
    color: var(--linen);
    text-align: center;
}

header img {
    width: 40vw;
}

header p {
    font-size: 1.5em;
    font-style: italic;
}

header nav {
    background: var(--champagne-gold);
}

header nav ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 10px 10px;
}

header nav a {
    text-decoration: none;
    color: var(--midnight-blue);
    font-weight: bold;
    font-size: 1.5em;
}

main {
    margin: 5vw;
}

main section {
    border-bottom: 2px solid var(--champagne-gold);
}

#offerings div {
    color: var(--linen);
    background-color: var(--olive-green);
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
}

#offerings h3 {
    margin-top: 5px;
    margin-bottom: 0;
}

#offerings p {
    margin-top: 0px;
}

#gallery div {
    text-align: center;
    font-style: italic;
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 0 5px var(--dark-charcoal);
}

#gallery img {
    width: 100%;
}

#gallery p {
    font-size: 0.9em;
}

#gallery a {
    display: block;
    background-color: var(--olive-green);
    text-decoration: none;
    color: var(--soft-white);
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}

footer {
    background-color: var(--midnight-blue);
    color: var(--linen);
    text-align: center;
    padding: 25px;
}

footer p a {
    text-decoration: none;
    color: var(--champagne-gold);
}

/* MEDIA QUERY (medium) */
@media screen and (min-width: 600px) {
    h1 {
        font-size: 5em;
    }
    
    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 2em;
    }

    header img {
        width: 40vw;
    }

    #offeringGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #offeringGrid #three {
        grid-column: 1 / -1;
        margin-bottom: 20px;
    }

    #offeringGrid div {
        margin: 0;
    }

    #galleryGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #galleryGrid div {
        margin: 0;
    }
}

/* MEDIA QUERY (large) */
@media screen and (min-width: 900px) {
    header img {
        width: 25vw;
    }

    #gallery p {
        font-size: 1em;
    }

    #galleryGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
    }

    #galleryGrid p {
        padding: 10px;
    }
}

/* MEDIA QUERY (xl) */
@media screen and (min-width: 1200px) {
    h1 {
        font-size: 4.5em;
    }

    header img {
        width: 15vw;
    }

    #galleryGrid {
        display: flex;
        justify-content: center;
        gap: 25px;
    }
}