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; }

    .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: 100px;
        padding: 30px;
        font-size: 50px; /* add these three new lines */
        font-weight: 900;
        font-style: normal;
        /* inset the image */
        }
                

    a {text-decoration: none;}
    
    
      #logo {
        width: 70px;
        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: 36px;
                }
                
      footer p {text-align: center;
        background-color: #84604a; /*stroke*/
        margin: 0; /*white space ouside the box*/
        padding: 30px; /*inner white space, pushes logo in*/
        height: 20px;
    }
    
     


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

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

        nav ul li {
            display: inline;
            margin-right: 16px;
            }

            nav ul {
                list-style-type: none;
                }