* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0px;
}

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "main main main"
        "footer footer footer";

}

.color-brown-subtitle {
    color: brown;
    text-align: center;
    margin: 15px 0 0 0 ;
}

/* Header */

header {
    grid-area: header;
}

.title {
    text-align: center;
}

.title span {
    color: brown;
}

nav {
    display: flex;
    flex-direction: column;
    background-color: azure;
    padding: 5px;
    align-items: center;
    background-color: #614124;
}

nav a {
    text-decoration: none;
    color: white;
}

/* Main styles */

.main {
    grid-area: main;
}

.rounded-hr {
    margin-top: 3rem;
    border-top: 0.3rem solid #AA7C43;
    /* border-radius: 3px; */
}

.main img {
    display: flex;
    width: 100%;
}

.main-section-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.main-section-container article {
    max-width: 100%;
    padding: 0px 15px 0 15px;
    text-align: justify;
}

.colored-h2 {
    background-color: brown;
    color: white;
}

.history-p {
    text-align: justify;
    padding: 0px 15px 0px 15px;
}

.third-space-div {
    padding: 0 15px 0 15px;
}


/* Footer Styles */

footer {
    grid-area: footer;
}





@media  (min-width: 600px) {
    
    nav {
        flex-direction: row;
        justify-content: space-around;
    }

    .main-section-container {
        flex-wrap: nowrap;
    }

    .main-section-container article {
        max-width: 50%;
        margin-top: 15px;
    }

    .main div section article {
        display: flex;
        flex-wrap: nowrap;
    }

    .main div section article p {
        max-width: 50%;
        margin-right: 20px;
    }


    .third-space-div {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        text-align: justify;
    }

    .third-space-div div {
        max-width: 33%;
        margin-right: 15px;
    }
    .third-space-div div p {
        padding:  0 15px 0 15px;
    }

}