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; }
        
        #logo {
            width: 3.375rem;
            height: auto;
            }

            header {
                background-color: #9CB7D0; /* fill */
                /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
                border: 0.0625rem solid #000; /* stroke */
                /* width of stroke, type of line, and color */
                height: 3.4375rem;
                padding: 1.25rem;
                /* inset the image */
                }

                body {
                    font-family: "Roboto", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    margin: 0; /* add these two new lines */
                    padding: 0;
                    }
                
                nav ul {
                    list-style-type: none;
                    }

                    nav ul li {
                        display: inline;
                        
                        }

                        a {text-decoration: none;}

                        main {
                            
                            }

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

                                header span {
                                    position: relative;
                                    top: -1.3125rem;
                                    }

                                    footer {
                                        background-color: lightslategray; /* fill */
                                        /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
                                        border: 0.0625rem solid #000; /* stroke */
                                        /* width of stroke, type of line, and color */
                                        height: 3.4375rem;
                                        padding: 1.25rem;
                                        /* inset the image */
                                        }

                                        footer p {text-align: center;}

                                        header {
                                            background-color: lightslategray;
                                            padding: 1.875rem;
                                            height: 6.25rem;
                                            color: white;
                                            font-size: 1.15rem; /* add these three new lines */
                                            font-weight: 900;
                                            font-style: normal;
                                            }

                                            header span {
                                                position: relative;
                                                top: -1.3125rem;
                                                }

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

                                                    nav {
                                                        margin: 2rem auto; /* shorthand for 2rem top/bottom and zero
                                                       right/left (both pairs are the same) */
                                                        }

                                                        nav {
                                                            border: 0.0625rem solid lightslategray;
                                                            width: 12rem; /* change this value */
                                                            }

                                                            nav ul {
                                                                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 {
                                                                    height: 2.75rem; /* minimum tappable size */
                                                                    line-height: 2.75rem; /* leading: vertically centers text (when one
                                                                   line) */
                                                                    flex: 1; /* allows list item to grow within the flexbox */
                                                                    border: 0.0625rem solid steelblue; /* Added temporarily so we can see what is
                                                                   going on */
                                                                    text-align: center; /* center text in tappable area */
                                                                    background-color: yellow; /* 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 */
                                                                        background-color: lightsteelblue; /* Added temporarily so we can see what
                                                                       is going on, remove later */
                                                                        }

                                                                        main {
                                                                            padding: 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;
                                                                            }

                                                                            .thumbnails {
                                                                                display: flex;  /* <-- Comment out display: flex; or completely
                                                                        remove the .thumbnails rule */
                                                                            }

                                                                            footer {
                                                                                background-color: #868eb5;
                                                                                height: 6.25rem;
                                                                                color: white;
                                                                                display: flex;
                                                                                flex-direction: column;
                                                                                justify-content: center;
                                                                        }
                                                                            footer p {text-align: center; }  /* You should already have this line
                                                                        in your CSS */

                                                                          /* 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: 3.125rem;
           position: relative;
           top: -0.5rem;
   }
       nav {
           margin: 2rem auto;
           width: 61rem;
   }
       .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: 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  */

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

h1 {
    text-align: center;
  }