/* Global Styles */

* {
    box-sizing: border-box;
}

body {
    max-width: 1080px; 
    margin: 0 auto;
}

/*Each item in the grid contains words */

.item {
    /* Center the contents of the grid items. Make eah 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: repeat(6, 1fr);
    grid-template-areas: 
        "top top top top top top"
        "nav1 nav1 nav1 nav1 nav1 nav1"
        "butterfly1 title title title title butterfly2"
        "main main main main main main"
        "photos photos photos photos photos photos"
        "menu2 menu2 menu2 menu2 menu2 menu2"
        "footer footer footer footer footer footer";
    grid-gap: 5px;
}

/* assign items to grid areas */

.header {
    background-color: aqua;
    max-width: 95%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 10px 10px 5px #888888;
    grid-area: top;
}

.menu1 {
    grid-area: nav1;
}
.butterfly1 {
    grid-area: butterfly1;
}
.butterfly1 img {
    width: 100px;
    height: 100px;
}
.title {
    grid-area: title;    
}
.butterfly2 {
    grid-area: butterfly2;
}
.butterfly2 img {
    width: 100px;
    height: 100px;
}
.main {
    grid-area: main;
}
.main ul li {
    padding-bottom: 20px;
}
.photos {
    grid-area: photos;
}
.photos p {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
}
.menu2 {
    grid-area: menu2;
}
.footer {
    background-color: lightgray;
    grid-area: footer;
}

/*Responsive layout */

@media screen and (max-width: 725px) {
    .header h1 {
        font-size: 10pt;
    }
    .main ul li {
        font-size: 10pt;
    }
    .photos p {
        text-align: center;
        font-size: 14pt;
    }
    .photos a {
        font-size: 8pt;
    }
    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 500px) {
    .header h1 {
        font-size: 6pt;
    }
    .menu1 h3 {
        font-size: 10pt;
    }
    .title h1 {
        font-size: 9pt;
    }
    .main ul li {
        font-size: 7pt;
    }
    .photos p {
        text-align: center;
    }
    .photos a {
        font-size: 8pt;
        text-align: center;
    }
    .menu2 {
        font-size: 9pt;
    }
    .footer h6 {
        font-size: 6pt;
    }
    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 350px) {
    .header h1 {
        font-size: 4pt;
    }
    .menu1 h3 {
        font-size: 10pt;
    }
    .title h1 {
        font-size: 9pt;
    }
    .main ul li {
        font-size: 8pt;
    }
    .photos p {
        text-align: center;
    }
    .photos a {
        font-size: 8pt;
        text-align: center;
    }
    .menu2 h3 {
        font-size: 10pt;
    }
    .footer h6 {
        font-size: 5pt;
    }
    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}