/*Global Styles */
* {
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    max-width: 1080px;
    margin: 0 auto;
}
.item {
    /*center the contents of the grid items. Make each grid item a Flex Container */
    display: flex;
    /*Horizontal and vertical centering*/
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-family: sans-serif;
}
.container {
    display: grid;
    grid-template-areas: 1fr;
    grid-template-rows: 9 fr;
    grid-template-areas: 
        "header"
        "nav1"
        "title"
        "narrative"
        "photos"
        "photos2"
        "links"
        "nav2"
        "footer";
    grid-gap: 3rem;
}
.header {
    background-color: aqua;
    max-width: 95%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 10px 10px 5px #888888;
    grid-area: header;
}
.nav1 {
    grid-area: top_nav;
}
.title {
    max-width: 80%;
    margin: 0 auto;
    grid-area: title;
}
.narrative {
    max-width: 85%;
    margin: 0 auto;
    grid-area: narrative;
}
.narrative p {
    font-size: 1.1rem;
}
.photos {
    display: block;
    grid-area: photos;
}
.photos  {
    justify-content: flex-start;
    margin-left: 125px
}
.photos2 {
    display: none;
    grid-area: photos2;
}
.links {
    grid-area: links;
}
.nav2 {
    margin-top: 20px;
    grid-area: bottom_nav;
}
.footer {
    background-color: lightgray;
    font-size: 1.2rem;
    grid-area: footer;
}

/*media queries for screen size display */


@media screen and (max-width:800px) {
    .header h1 {
        font-size: 1.1rem;
    }
    .title h1 {
        font-size:  1.2rem;
    }
    .photos {
        display: none;
    }
    .photos2 {
        display: block;
        padding: 5%;
        background-color: burlywood;
    }
    .photos2 img {
       padding-bottom: 20px;
       width: 90%;
    }
    .photos2 p {
        text-align: center;
    }
}

@media screen and (max-width:550px) {
    .header h1 {
        font-size: 1rem;
    }
    .footer {
        font-size: .8rem;
    }
}