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

footer p {text-align: center;}


#logo {
    width: 70px; /* adjust as necessary, in REMs |  By default, 1rem
= 16px so 70/16 = 4.375rem */
    height: auto;
}



header {
    background-color: #182f9f;
    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: 1rem; /* adjust as necessary, in REMs */
    font-weight: 700;
    font-style: normal;
}

    body {
        background-color: #D197BB; /* fill */
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0; /* add these two new lines */
        padding: 0;
        }

        header {
            background-color: rgb(234, 193, 99);
          padding: 19px;
            height: 100px;
            color: white;
            font-size: 50px; /* add these three new lines */
            font-weight: 900;
            font-style: normal;
            }
        
            nav ul {
                list-style-type: none;
                display: flex; 
                justify-content: space-between;
                }

                nav ul li {
                    display: inline;
                    /* margin-right: 16px; */
                    height: 44px;  /* minimum tappable size */
                    line-height: 44px;  /* leading: vertically centers text (when one
               line) */
                    flex: 1;  /* allows list item to grow within the flexbox */
                    border: 1px; /* Added temporarily so we can see what is
               going on */
                    text-align: center;  /* center text in tappable area */
                    

               display: block; /* accept height and width settings */
     height: 100%;  /* fill li area's height  */
     width: 100%; /* fill li area's width */
     
                }


                 nav {
        margin: 2rem auto;  /* shorthand for 2rem top/bottom and zero
right/left (both pairs are the same) */
border: 1px;
    width: 3.8rems;  /* change this value */


    }


                
    a {text-decoration: none;}

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

        footer {
            background-color: #498452; /* 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: 55px;
            padding: 20px;
            /* inset the image */
            background-color: #868eb5;
        height: 6.25rem;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        footer p {text-align: center; } 
        
            }

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

    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: flex-start;
 /* <-- Comment out display: flex; or completely
remove the .thumbnails rule */
                }

                .thumbnails figure {
                    width: 100%;
                    max-width: 260px;
                    margin: 2rem auto 3rem auto;
                }

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



                 header span {
                    position: relative;
                    top: -2.075rem;
                    display: inline;
                    left: -0.15rem;
                    font-size: 1.1rem;
                }



 /* 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: 2rem;
       position: relative;
       top: -0.5rem;
       top: -1.175rem;
    left: 0.25rem;

    header span {
        position: relative;
        top: -1.175rem;
        left: 0.25rem;
    }
}
   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 */
flex-direction: row;
}
   .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  */