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: 1.5rem;
        margin: 1rem 0 3rem 0; /* Inspect these values and adjust as
       necessary */ }
footer p {text-align: center;}

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

header {
background-color: #b7e0e6; /* fill */
/* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
border: 0.0625rem solid #000; /* stroke */
/* width of stroke, type of line, and color */
height: 3.4375rem;
padding: 1.25rem;
/* inset the image */
}


body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0; /* add these two new lines */
    padding: 0;
    }

header {
background-color: #b7e0e6; 
padding: 0.875rem;
height: 6.25rem;
color: white;
font-size: 1.4rem; /* add these three new lines */
font-weight: 900;
font-style: normal;
    }

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

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


 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 */
 }

nav ul {
list-style-type: none;
 }
nav ul li {
margin-right: 1rem; 
width: 6rem;
    }

a {text-decoration: none;}

main {
    margin-left: 2.25rem;
    margin-right: 2.25rem;
        }

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

nav ul li {
height: 2.75rem; /* minimum tap able size */
  }

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 */
text-align: center;
line-height: 2.75rem;
    }
    main {
        padding: 1rem;
         }

h1 {
font-size: 1.3rem;
margin: 1rem 0 3rem 0; /* Inspect these values and adjust as
necessary */
    }

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

footer {
background-color: #b7e0e6; /* fill */
/* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
border: 0.0625rem solid #000; /* stroke */
/* width of stroke, type of line, and color */
height: 3.4375rem;
padding: 1.25rem;
/* inset the image */
    }
                                
footer {
background-color: #b7e0e6;
height: 6.25rem;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
    }
                                    
footer p {text-align: center; } /* You should already have this line
                                   in your CSS */


/* ALWAYS PLACE THE MEDIA QUERY AT THE BOTTOM OF THE CSS FILE */
 /* IF YOU HAVE SEVERAL QUERIES, GO FROM SMALL (FIRST) TO LARGE
VIEWPORT SIZES (LAST) */
 @media screen and (min-width: 1024px) {
    /* Media Query: CSS for screens larger than 1024px wide ONLY goes
   here */
    h1 {
    font-size: 3.125rem;
    }
    header span {
    font-size: 3.125rem;
    position: relative;
    top: -0.5rem;
    }
    nav {
    margin: 0;
    }
    .thumbnails {
        display: flex; /* this is called a flexbox */
           }
    .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 the media query ======= */
    /* ALWAYS KEEP THE ABOVE COMMENT NEXT TO THE MEDIA QUERY CLOSING TAG, SO
   YOU KNOW WHERE THE QUERY ENDS: PREVENTS MANY MISTAKES */