.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }

  body { background-color:#8A5F2D;
    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; }

    footer p {text-align: center;
    color: white;}

    #logo {
        width: 70px;
        height: auto;
        position: relative;}

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

        header {
            position: relative;
            background-color: #2B1A02; /* 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 */
            height: 25px;
            padding: 10px;
            /* 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: #341C00;
                    padding: 30px;
                    height: 100px;
                    color: white;
                    font-size: 50px; /* add these three new lines */
                    font-weight: 900;
                    font-style: normal;
                    }

                    nav ul { color: #FFFFFF;
                        list-style-type: none;
                        }
                        

                            a {text-decoration: none;}
                            
                            
                               
                                footer {
                                    background-color: #341C00; /* fill */
                                    /* rgb(255 255 255) => 0.5 = semi-transparent color */
                                    border: 0px solid #1500FF; /* stroke */
                                    /* width of stroke, type of line, and color */
                                    height: 55px;
                                    padding: 20px;
                                    /* inset the image */
                                    } a {
                                        color: white;
                                      }

                                      h1 {color: white;}

                                      .thumbnails 

                                        footer{position:fixed;
                                        bottom: 0;
                                    width: 100vw;}






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

 header {
    background-color: #2C1400;
    padding: 30px; /* adjust as necessary, in REMs | By default, 1rem
= 16px so 30/16 = 1.875rem */
    height: 100px; /* adjust as necessary, in REMs */
    color: white;
    font-size: 1.45rem; /* adjust as necessary, in REMs */
    font-weight: 900;
    font-style: normal;
}
#logo {
    width: 3.7rem; /* adjust as necessary, in REMs |  By default, 1rem
= 16px so 70/16 = 4.375rem */
    height: auto;
}
header span {
    position: relative;
    top: -1.175rem;
    display: inline-block;
    left: 0.25rem;
}

header span {
    position: relative;
    top: -0.575rem;
    width: 8rem;  /* if you want the text on two lines, your design
choice */
    display: inline-block; /* lets the span (an inline element)
accept a width setting */
}
     
nav {
    margin: 2rem auto;  /* shorthand for 2rem top/bottom and zero
right/left (both pairs are the same) */
}


nav{
width: 282.8rem;
  margin: 1rem 1rem 1rem 0;
  max-width: 20rem;
  text-align: center;}
nav ul {
    list-style-type: none;
    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 li {display: inline;
    height: 44px;  /* minimum tappable size */
    line-height: 44px;  /* leading: vertically centers text (when one
line) */justify-content:center; 
    flex: 1;  /* allows list item to grow within the flexbox */
    /* Added temporarily so we can see what is
going on */
    text-align: center;  /* center text in tappable area */
    /* Added temporarily so we can see what
is going on */

}

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 */
     /* Added temporarily so we can see what
is going on, remove later */
text-align: center ;
justify-content: center;}

main {
    padding: 1rem;
margin-bottom: 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;
position:relative;
}


footer {
    background-color: #2E1801;
    height: 6.25rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}




 /* 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;
margin-left: 45rem;

    }


   header span {
       font-size: 1.2rem;
     
       top: -0.9rem;
}
   nav {
       margin: 1rem ;
}
   .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;
}





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