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;
}
footer p {
  text-align: center;
}
#logo {
  width: 71px;
  height: auto;
}
header {
  background-color: #85f6fc; /* fill */
  /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
  border: 1px solid #8ee2e2; /* stroke */
  /* width of stroke, type of line, and color */
  height: 55px;
  padding: 20px;
  /* inset the image */
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0; /* add these two new lines */
  padding: 0;
  background-color: #94E6EA;
}
header {
  background-color: cadetblue;
  padding: 11px;
  height: 100px;
  color: #61e5dc;
  font-size: 23px; /* add these three new lines */
  font-weight: 900;
  font-style: normal;
}
nav ul {
  list-style-type: none;
}
nav ul li {
  display: inline;
  /*margin-right: 16px;*/
}
a {
  text-decoration: none;
}
main /* margin-left: 36px; */

footer {
  background-color: #61e5dc; /* fill */
  /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
  border: 1px solid #457b7e; /* stroke */
  /* width of stroke, type of line, and color */
  height: 55px;
  padding: 20px;
  /* inset the image */
}

header span {
  position: relative;
  top: -27px;
}

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



nav {
  width: 15.8rem; /* change this value */
}

nav ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-start;
  align-content: stretch;
  flex-wrap: nowrap;
}

nav ul li {
  height: 44px; /* minimum tappable size */
  line-height: 44px; /* leading: vertically centers text (when one
   line) */
  text-align: center; /* center text in tappable area */
  background-color: aqua; /* Added temporarily so we can see what
   is going on */
   border: 1px solid black;
   width: 4.4rem; 
}

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

main {
  padding: 1rem;
}

h1 {
  font-size: 2.5rem;
  margin: 1rem 0 3rem 0; /* Inspect these values and adjust as
               necessary */
}
.thumbnails figure {
  width: 100%;
  max-width: 260px;
  margin: 2rem auto 3rem auto;
}


footer {
  background-color: #868eb5;
  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; /* 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 */

  }
  .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: #5d5c64;
   }
   .wrapper {
    max-width: 60rem; /* 960px */
    margin: 1rem auto; /* 1rem space above/below, automatic
   left/right margins centers the div */
    border: 1px solid #444;
    background-color: #fff;
    }
  } /* ======= 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 */