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: 2rem;
      margin: 0rem 0 2rem 0; /* Inspect these values and adjust as
     necessary */
    }

    .roboto-regular {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
      }

      .roboto-black {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
        font-style: normal;
      }
      
      header {
        background-color:  #84604a; /* fill */
        /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
        border: 1px solid #553d2a; /* stroke */
        /* width of stroke, type of line, and color */
        color: rgb(228, 219, 204);
        height: 6.25rem;
        padding: 1rem;
        font-size: 0.725rem; /* add these three new lines */
        font-weight: 900;
        font-style: normal;
        /* inset the image */
        }
                

    a {text-decoration: none;}
    
    
      #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;
            background-color: #b4a38e;
            }

            main {
                margin-left: 0px;
                padding: 1rem;
                }
                
      footer p {text-align: center;
    }
    
    footer {
      background-color: #84604a;
      height: 6.25rem;
      color: rgb(226, 209, 194);
      display: flex;
      flex-direction: column;
      justify-content: center;
      }
    
     
    img {
      max-width: 100%; /* responsive images */
      height: auto;
      }

      .thumbnails {
        display: flex; /* this is called a flexbox */
        }
        .thumbnails figure {
          width: 100%;
          max-width: 260px;
          margin: 0.2rem auto 3rem auto;
          }
        

        header span {
            position: relative;
            top: -1.875rem;
            display: inline-block;
            left: 0.95rem;
            }

        nav ul li {
          height: 44px; /*minimum tapping size*/
          line-height: 44px;
          flex: 1;
          border: 1px solid rgb(102, 79, 66);
          text-align: center;
          background-color: yellow;
            display: inline;
            }

            nav {
              width: 14rem;
              margin: 2rem auto; /* shorthand for 2rem top/bottom and zero
              right/left (both pairs are the same) */ 
              border:1px solid rgb(67, 56, 48);
              
            }

            nav ul {
              display: flex;
              justify-content: space-between;
                list-style-type: none
                  }

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: #9d745b; /* 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;
  }
  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: rem 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;
    }
  }
  }