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

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

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

    footer p {text-align:center;}

    #logo {
    width: 3.475rem;
    position: relative;
    top: -0.8rem;
    height: auto;
    }
    
    img {
        max-width: 100%; /* responsive images */
        height: auto;
        }

    header {
        background-color: #b2c5b5; /* 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: 1.5rem;
        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;
            }

            header {
                background-color: darkslateblue;
                padding: 1.1rem;
                height: 4.25rem;
                color: white;
                font-size: 1.125rem; /* add these three new lines */
                font-weight: 900;
                font-style: normal;
                }

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

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

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

                        a {text-decoration: none;
                            height: 100%;
                            width: 100%;
                            display:block; }

                        main {
                            padding: 1rem;
                            }

                            footer{background-color: #b2c5b5; /* 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 */
                                }

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

                                .thumbnails figure {
                                    width: 100%;
                                    max-width: 260px;
                                    margin: 2rem auto 3rem auto;
                                    }
                                header span {
                                    position: relative;
                                top: -2.212rem;
                                }

                                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: 44px; /* minimum tappable size */
                                        line-height: 44px; /* leading: vertically centers text (when one
                                        line) */
                                        flex: 1; /* allows list item to grow within the flexbox */
                                        text-align: center; /* center text in tappable area */
                                        }

                                        /* 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: 2.925rem;
    top:1.3rem;
    }
    header span {
    font-size: 2.125rem;
    position: relative;
    top: -1.8rem;
    }
    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 */
    /* 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 */