/*Global Styles*/
* {
    box-sizing: border-box;
}
body {
    max-width: 1920px;
    margin: 0 auto;
}

/*Each item in the grid contains words */
.item {
    /*Center the contents of the grid items. Making each grid item a Flex Container. */
    display: flex;
    /*Horizontal and veritcal centering */
    justify-content: center;
    align-items: center;
    /*border: 5px solid #87b5ff;*/
    border-radius: 3px;
    font-family: sans-serif;
    
}

/*CSS Grid Styles */

.container {
    display: grid;
    grid-template-columns: repeat(4 1fr);
    grid-template-rows: auto;
    grid-template-areas: 
        "top top top top"
        "menu1 menu1 menu1 menu1"
        "mast mast mast mast"
        "nar nar nar nar"
        "left left left left"
        "menu2 menu2 menu2 menu2"
        "bottom bottom bottom bottom";
    grid-gap: 10px;
}



.header {
    background-color: aqua;
    grid-area: top;
}
.header {
    background-color: aqua;
    width: 98%;
    margin: 0 auto;
    height: auto;
    padding: 10px;
    box-shadow: 10px 10px 5px #888888;
    grid-area: top;
}
.nav1 {
    grid-area: menu1;
}
.mastHead {
    grid-area: mast;
}
.title {
    grid-area: nar;
}
.title p {
    padding: 20px;
    color: blue;
    font-size: 1.2em;
}

.photos1 {
    background-color: cadetblue;
    grid-area: left;
}
.photos2 {
    background-color: coral;
    grid-area: right;
}
.nav2 {
    grid-area: menu2;
}
.footer {
    background-color: lightgray;
    grid-area: bottom;
}

/* css for the photo section */

.column {
    float: left;
    width: 30%;
    padding: 15px;
} 
.row:after {
    content: "";
    clear: both;
    display: table;
}
.column img {
    border: 1px solid black;
    box-shadow: 10px 10px 5px #888888;
}

/* Responsive layout - makethe three columns stack ontopof each other in small screens */

@media screen and (max-width:650px) {
    .column {
        width: 90%;
    }
    .header h1 {
        font-size: 8pt;
    }
}

@media screen and (max-width: 500px){
    
    .column {
        width: 90%;
    }
    .header h1 {
        font-size: 8pt;
    }
    .nav1 h3 {
        font-size: 8pt;
    }
    .title p {
        font-size: 6pt;
    }
    .nav2 h3 {
        font-size: 8pt;
    }
    .footer h6 {
        font-size: 5pt;
    }
}

@media screen and (max-width: 350px) {
   
   
    .header h1 {
        font-size: 6pt;
    }
    .nav1 h3 {
        font-size: 6pt;
    }
    .title p {
        text-align: center
        font-size: 6pt;
    }
     .nav2 h3 {
        font-size: 6pt;
    }
    .footer h6 {
        text-align: center;
        font-size: 4pt;
    }
}