@import url();

/* Colors: 
Primary: #2D5A27
Secondary: #C4956A
Accent 1: #A8C97F
Accent 2: #F5EFE6 */

/* Fonts:
Heading: Fraunces
Paragraph: Nunito */

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    margin: auto;
    background-color: #F5EFE6;
}

header{
    background: #2D5A27;
    color: #000000;
    max-height: 10em;
    margin-bottom: 2em;
}

nav{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    max-height: 10em;
}

h1, h2, h3, h4, h5, h6{
    font-family: Fraunces;
}

p{
    font-family: Nunito;
}


h1{
    justify-self: center;
    font-size: xxx-large;
}

a{
    font-family: system-ui, sans-serif;
    font-size: large;
    text-decoration: none;
    color: #F5EFE6;
}

#welcome{
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: #C4956A;
    border: solid, black, 5px;
    margin: 1em;
    box-shadow: 5px 5px 10px;
}

#homepage-image{
    padding: 3em;
    max-height: 30em;
}

#welcome-message{
    padding: 3em;
    font-size: xx-large;
}

#gallery{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 35em;
}

#gallery-card{
    justify-items: center;
    background-color: #C4956A;
    border: solid, black, 5px;
    margin: 1em;
    box-shadow: 5px 5px 10px;
}

#gallery-title{
    padding: 1em;
    font-size: xx-large;
}

#gallery-sample{
    display: grid;
    place-items: center;
    height: 400px;
    background-color: white;
    width: 60%;
    border: solid, black, 3px;
    margin-bottom: 1em;
    box-shadow: 2.5px 2.5px 5px;
}

#gallery-image{
    border: solid, black, 2.5px;
}

#gallery-message{
    place-items: center;
    font-size: x-small;
    padding: 0.5em;
}

#community-card{
    justify-items: center;
    background-color: #C4956A;
    border: solid, black, 5px;
    margin: 1em;
    display: grid;
    box-shadow: 5px 5px 10px;
}

#community-title{
    padding: 1em;
    font-size: xx-large;
}

li{
    padding: 1em;
    font-size: x-large;
}

.submit-button{
    background-color: #2D5A27;
    color: #F5EFE6;
    border: solid, black, 2px;
    place-items: center;
    height: 40%;
    width: 30%;
    font-size: large;
    box-shadow: 2.5px 2.5px 5px black;
}

footer{
    background: #2D5A27;
    color: #000000;
    margin-top: 2em;
    display: grid;
}

#footer-image{
    justify-self: center;
}

p{
    justify-self: center;
    color: #F5EFE6;
}