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

footer p {text-align: center;
background-color: rgb(255, 224, 189);
 height: 6.25rem;
 color: white;
 display: flex;
 flex-direction: column;
 justify-content: center;

}

#logo {
	width: 3.25rem;
	height: 3.25rem;
}

header {
	background-color: rgb(255, 224, 189);
	padding: 1.875rem;
	height: 6.25rem;
	color: snow;
	font-size: 1.625rem;
	font-weight: 900;
	font-style: normal;
}

 body {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-style: normal;
      margin: 0; /* add these two new lines */
      padding: 0;
        } 
        
  footer {
     background-color: rgb(255, 224, 189);
     
     height: 6.25rem;
     color: white;
     font-size: 1rem; 
     font-weight: 900;
     font-style: normal;
            } 
            
 nav ul {
     list-style-type: none;
     } nav ul li {
     display: inline;
     /* margin-right: 1rem; */
     }
                    
 a {text-decoration: none;
 
 }

  main {
  /* margin-left: 2.25rem; */
  padding: 1rem;
  }


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

 header span {
 position: relative;
 top: -1.3125rem;
  }     

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

    nav {
        margin: 1rem auto;
        width: 21.6rem;
    }
    nav {
        margin: 1rem auto;
        width: 13.6rem;
    }

    nav ul {
            display: flex; /* Make the \<li> go side by side */
            justify-content: space-between; /* Switch to Chrome's web
           inspector to play with this */
           list-style-type: none;
            width: 18rem;
            /*! border: 1px solid red; */
            margin: 0 auto;
            }
            nav ul {
        
        display: flex; /* Make the \<li> go side by side */
        justify-content: space-between; /* Switch to Chrome's web
       inspector to play with this */
       list-style-type: none;
        }

        nav ul li {
            display: block;
            height: 100%; /* 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 red; /* Added temporarily so we can see what is
           going on */
           width: 5.7rem;
            text-align: center; /* center text in tappable area */
            background-color: sandybrown; /* Added temporarily so we can see what
           is going on */
            }

            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 */
                /*background-color: aqua; /* Added temporarily so we can see what
               is going on, remove later */
                }






@media screen and (min-width: 1024px) {

/* Media Query: CSS for screens larger than 1024px wide ONLY goes
here */
 h1 {
 font-size: 3.125rem;
 }
 
 nav {
    margin: 1rem auto;
    width: 21.6rem;
}
 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;
 }

} /* ===== CLOSE MEDIA QUERY ===== */