body { 

    background-color: antiquewhite;
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: normal;

    margin: 0; 
    padding: 0;
    color: #86b3c2;
    }

    
   
    #logo {
        width: 4.375rem;
        height: auto;
        }

        header {
            background-color: #90c4c6; 
            padding: 1.75rem; 
            height: 8rem; 
            border: 1px solid #698593; 
            color: rgb(236, 226, 209);
           

            font-size: 1.65rem; 
            font-weight: 900;
            font-style: normal;
            /* inset the image */
            }

            header span {
                position: relative;
                top: -2.25rem;
                display: inline-block;
                left: 5rem;
                }

            h1 { 
                
                font-family: "Roboto", system-ui;
                font-weight: 900;
                font-size: 175%;
                font-style: normal; }

                main {
                     margin-left: 10px;
                     margin-right: 10px;
                     padding: 0.25rem;
                    }

                    footer {
                        background-color: #90c4c6; 
                        padding: 1rem; 
                        height: 7.5rem; 
                        border: 1px solid #698593; 
                        color: rgb(236, 226, 209);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                       
            
                        font-size: 0.75em; 
                        font-weight: 900;
                        font-style: normal;
                        /* inset the image */
                        }

                        footer p {
                            position: relative;
                            top: 0.35rem;
                            text-align: center;
                            }

 footer p {text-align: center;}

 nav ul li a {
    display: block;
    margin-right: 30px;
    height: 100%;
    width: 100%;
    line-height: 44px;
    flex: 1;
    text-align: center;
    }

    

    nav {
        margin: 2rem 0 1rem 0;
        margin: 2rem auto;
        width: 18.2rem;
        
    }

    nav ul {
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }
    a {text-decoration: none;}

    .thumbnails {
        /* display: flex; */
        } 

        .thumbnails figure {
            width: 100%;
            max-width: 260px;
            margin: 0.25rem auto 0.75rem auto;
            
        }

        img{
            max-width: 100%; /*responsive images*/
            height: auto;
        }

        h1 {
            font-size:1.75rem;
            margin: 0rem 0 1rem 0
        }


        @media screen and (min-width: 800px) {
            /* Media Query: CSS for screens larger than 1024px wide ONLY goes
           here */
            h1 {
            font-size: 2.5rem;
            }
            header span {
            font-size: 3.125rem;
            position: relative;
            top: -3.75rem;
            left: 6.5;
            }
            nav {
            margin: 3;
            }
            .thumbnails {
            display: flex; 
            max-width: 60rem; 
            margin: 2rem auto 3rem auto;
            border: 1px solid #444;
            padding: 2rem 4rem 3rem 4rem;
            box-shadow: 1px 5px 13px #ccc;
            }

            body {
               
               }
               .wrapper {
                max-width: 60rem; /* 960px */
                margin: 1rem auto; /* 1rem space above/below, automatic
               left/right margins centers the div */
                border: 1px solid #444;
               
                }
            } /* ======= Close the media query ======= */