header {
    background-color: #8d7246; /* fill */
    /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */

    border: 1px solid #000; /* stroke */
    /* width of stroke, type of line, and color */

    padding: 1.1875rem; /* adjust as necessary, in REMs | By default, 1rem
    = 16px so 30/16 = 1.875rem */
    height: 100px;
    color: white;
    font-size: 1.4rem;
    font-weight:900;
    font-style: normal;
}
#logo {
    width: 65px; /* adjust as necessary, in REMs | By default, 1rem
    = 16px so 70/16 = 4.375rem */
    height: auto;
    }
    
    header span {
        position: relative;
        top: -2.825rem;
        display: inline-block;
        left: 4.25rem;
        }
body {
    font-family: "Roboto", "helvetica neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
}
    a {text-decoration: none;}
    nav ul { 
        display: flex;
        justify-content: space-between;
        list-style-type: none;
       
    }

    nav ul li  {
    display:block;
    /* margin-right:16px; */
    height: 100%; /* minimum tappable size */
    line-height: 44px; /* leading: vertically centers text (when one
   line) */
    width: 5.7rem;
    /* border: 1px solid red; /* Added temporarily so we can see what is  */
  
    text-align: center; /* center text in tappable area */
     background-color: rgb(216, 216, 206); /* Added temporarily so we can see what 
   is going on */
    }
    nav ul a {
        display: block;
        height: 100%;
        width: 100%;
      }
  
    img {
        max-width: 100%; /* responsive images */
        height: auto;
        }
    

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

    .thumbnails { 
       /*  display:flex; this is called a flexbox*/
 }




h1 { 
    font-family: "Roboto", "helvetica neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.5rem;
    margin: -0.3rem 0 0.9rem 0;

}
footer p {text-align: center;}
footer  { background-color: #8d7246; /* fill */
    /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */

    border: 1px solid #000; /* stroke */
    /* width of stroke, type of line, and color */

    padding: 36px;
    height: 6rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-style: normal;}
  
    nav {
        margin: 1.6rem auto 1rem auto;
        /* border: 1px solid red;  */
        width: 18.8rem;
    }

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

h1 { 
    font-size: 3.125rem;
}

header span {
    font-size: 3.125rem;
    position: relative;
    top: -0.5rem;
}

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;
    }
    
nav {
    margin: 0.8rem;
}

.thumbnails { 
    display: flex;
    max-width: 60rem;
    /* border: 1px solid red; */
}

.thumbnails figure {
       max-width: calc(260px + 8rem);
       margin: 2rem auto 3rem auto;
       border: 1px solid #444;
       padding: 2rem 4rem 3rem 4rem;
       box-shadow: 1px 5px 13px #ccc;
}



  }