header {
    background-color: rgb(176, 82, 51);
padding: 0.75rem;
height: 5.563rem;
color: rgb(255, 255, 255);
font-size: 1.125rem; /* add these three new lines */
font-weight: 900;
font-style: normal;
    }

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

margin: 0; /* add these two new lines */
padding: 0;
}
a {text-decoration: none;}
nav ul li a{
    display: block;
    height: 100%;
    width: 4.57rem;
    /* margin-right: 19px; */
    height: 44px; /* minimum tappable size */
    line-height: 44px; /* leading: vertically centers text (when one
   line) */
    flex: 1; /* allows list item to grow within the flexbox */
    border: 1px solid rgb(253, 253, 253); /* Added temporarily so we can see what is
   going on */
    text-align: center; /* center text in tappable area */
    background-color: rgb(226, 226, 226); /* Added temporarily so we can see what
   is go*/
    }
    img {
        max-width: 100%; /* responsive images */
        height: auto;
        }

    nav ul {
        display: flex;
        justify-content: space-between;
        list-style-type: none;
      
    }
        main {
            /* margin-left: 30px; */
            padding: 1rem;
            }

            .thumbnails {
        
                /* display: flex;  this is called a flexbox */
                }
                header span {
                    position: relative;
                    top: -1.8rem;
            
                 }

 


h1 {font-family: "Roboto",'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-weight: 900; 
    font-style: normal;
    font-size: 1.6rem;
    margin: 0rem 0 2rem 0; /* Inspect these values and adjust as
   necessary */
} 

footer p {text-align: center;}

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

footer {
background-color: #a84115;
height: 6.25rem;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
}

nav {
    margin: 2rem auto 1rem auto;
border: 1px solid rgb(255, 255, 255);
width:15rem;

}




















@media screen and (min-width: 60rem){

    h1 {
        font-size: 3.125rem;
        }
        header span {
        font-size: 3.125rem;
        position: relative;
        top: -0.5rem;
        }
        nav {
        margin: 0;
        }
        .thumbnails {
        display: flex; /* thumbnails only go side-by-side on bigger
        screens */
        max-width: 60rem; /* prevent it from stretching forever, keeps
        figures closer together than too spread apart */
        border: 1px solid red;
        }
        .thumbnails figure {
        max-width: calc(260px + 8rem); /* let the browser do the math:
        original size of jpeg + both sides padding */
        margin: 2rem auto 3rem auto;
        border: 1px solid #444;
        padding: 2rem 4rem 3rem 4rem;
        box-shadow: 1px 5px 13px #ccc;
        }
    

        body {
            background-color: #ffffff;
            }
            .wrapper {
            max-width: 60rem; /* 960px */
            margin: 1rem auto; /* 1rem space above/below, automatic
            left/right margins centers the div */
            border: 1px solid #ffffff;
            background-color: #fff;
            }

} /* media query ends here!!! */