/*Global styles*/
* {
    box-sizing:border-box; 
}
html {
    font-size: 100%;
}
body {
    max-width: 1200px;
    margin: 0 auto;
    background-color: lightblue;
}
.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: 1fr;
    grid-template-areas: 
        "header"
        "nav1"
        "narrative"
        "video1"
        "video2"
        "nav2"
        "footer";
    grid-gap: 20px;
}
.header {
    grid-area: header;
}
.header h1 {
    font-size: 1rem;
}
.nav1 {
    grid-area: nav1;
}
.narrative {
    grid-area: narrative;
}
.narrative p {
    font-size: .8rem;
    text-align: center;
    padding: 15px;
}

.video1 {
    margin: 10px auto;
    border: 1px solid black;
    box-shadow: 10px 10px 5px black;
    grid-area: video1;
}
.video2 {
    margin: 10px auto;
    border: 1px solid black;
    box-shadow: 10px 10px 5px black;
    grid-area: video2;
}

.nav2 {
    grid-area: nav2;
}
.footer {
    grid-area: footer;
}
.footer h6 {
    font-size: .4rem;
    text-align: center;
}

/*CSS for larger screens */

@media (min-width: 860px) {
    .container {
        display: grid;
        grid-template-columns: 2fr;
        grid-template-areas: 
            "header header"
            "nav1 nav1"
            "narrative narrative"
            "video1 video2"
            "nav2 nav2"
            "footer footer";
        grid-gap: 20px;
    }
    body {
        margin-right: 20%;
        margin-left: 20%;
    }
}