header {
    background-color: darkgreen;
    padding: 10px; /* 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: 22px; /* adjust as necessary, in REMs */
    font-weight: 900;
    font-style: normal;
}

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


body { font-family: “Roboto”, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400;
        font-style: normal; }

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

h1 { font-family: “Roboto”,"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; font-style: normal; }
    
footer{
    background-color: #b2c5b5; /* fill */
    /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
    /* stroke */
    /* width of stroke, type of line, and color */
    height: 55px;
    padding: 20px;
    /* inset the image */
    }

    footer {
    background-color: darkgreen;
    padding: 30px;
    height: 100px;
    color: white;
    font-size: 1rem; /* add these three new lines */
    font-weight: 900;
    font-style: normal;
    height: 6.25rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky; bottom: 0;
}

    footer p {text-align: center;}

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

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

            a {text-decoration: none;
            }

                header span {
                    position: relative;
                    top: -26px;
                    white-space: nowrap;
                    }

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

                   nav {
                         width: 3.8rems;  /* 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 */
                        width: 23.5rem;
                        margin: 0;
                        padding: 0;
                    }
                    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 */
                        border: 1px solid dark; /* 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: greenyellow;  /* 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;
                        text-align: center;
                        /* Inspect these values and adjust as necessary */
                    }

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




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

body {
      background-color: yellow;
}
.wrapper {
     max-width: 60rem;  /* 960px */
     margin: 0 auto;  /* 1rem space above/below, automatic
left/right margins centers the div */
     background-color: solid white;
}

    /* 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: 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  */