body {font-family: "Roboto", 'Helvetica Neue', Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; 
font-style: normal;}

h1 {font-family: "Roboto", 'Helvetica Neue', Helvetica, Arial, Helvetica, sans-serif; font-weight: 900; 
    font-style: normal;}

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

    body {
        font-family: "Roboto, sans-serif";
        font-weight: 400;
        font-style: normal;

        margin: 0; /* add these two new lines */ 
        padding: 0;
    }


    header {
        background-color: blanchedalmond;
        padding: 1.875rem;
        height: 7.25rem;
        color: darkolivegreen;
        font-size: 1rem; /* add these three new lines*/
        font-weight: 900;
        font-style: normal;
    }

    nav ul {
        list-style-type: none;
        display: flex; /* Make the \<li> go side by side
        justify-content: space-between; /* Switch to Chrome's web
        inspector to play with this */
        justify-content: space-between;
    }

    nav ul li {
        display: inline;
        margin-right: 16px; 
        height: 2.75rem;
        line-height: 2.75rem;
        flex: 1;
        text-align: center;
    
         }

    

    a {text-decoration: none;}

    main {
      margin-left: 36px; 
      padding: 1rem;
    
    }


    header span {
        position: relative;
         top: -1.175rem;
        display: inline-block;
        left: 0.25rem;
    }

    h1 {
     font-size: 2.5rem;
     margin: 1rem 0 2rem 0;
     color: darkolivegreen;
    
    }

    footer{
        background-color: rgb(158, 172, 134);
        height: 6.25rem;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: darkolivegreen;
        
    }

    footer p {text-align: center;}

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

        nav {
            margin: 2rem auto; /* shorthand for 2rem top/bottom and zero
            right/left (both pairs are the same) */
            width: 9rem; /*change this value*/
        }

        nav ul li a {
            display: block; /* accept height and width settings */
            height: 100%; /* fill li area's height */
            width: 100%; /* fill li area's width */
            }

            .thumbnails figure {
                width: 100%;
                max-width: 260px;
                margin: 2rem auto 3rem auto;

            }

            @media screen and (min-width: 1024px) {
                h1 {
                    font-size: 3.125rem;
                }

                header span {
                    font-size: 3.125rem;
                    position: relative;
                    top: -0.5rem;
                }

                nav {
                    margin: 0;
                }

                .thumbnails {
                    display: flex;
                    max-width: (260px+8rem);
                    margin: 2rem auto 3rem auto;
                    padding: 2rem 4 rem 3rem 4rem;
                    box-shadow: 1px 5px 13px 13px #ccc;

                    body {
                        background-color: darkgreen;
                    }

                    .wrapper {
                        max-width: 60rem;
                        margin: 1rem auto;
                        border: 1px solid #444;
                        background-color: darkgreen;

                    }
                }
            }