/*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-columns: 1 fr;
    grid-template-rows: 3 fr;
    grid-template-areas:
       "nav"
        "photo1"
        "footer";
    grid-gap: 5rem;
}

.nav {
    border-bottom: 2px solid black;
    grid-area: nav;
}
.nav a {
    padding: 3%;
}
.photo1 {
    grid-area: photo1;
}
.photo1 img {
    width: 100%;
}
.footer{
grid-area: footer;
}

@media screen and (max-width: 520px) {
    .nav a {
        font-size: .5rem;
        }
    .footer h6 {
        font-size: .5rem;
        padding-left: 5%;
        padding-right: 5%;
    }
}