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: 1rem 0 3rem 0;
}

footer p {text-align: center;}

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

header {
        background-color: rgb(210 232 255); /* 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 */
        }
       
body {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0; /* add these two new lines */
        padding: 0;
        background: rgb(210 232 255);
        }

header {
        background: rgb(30,95,124);
        background: radial-gradient(circle, rgba(30,95,124,1) 0%, rgba(38,14,61,1) 100%);

        padding: 1rem; /* adjust as necessary, in REMs | By default, 1rem
        = 16px so 30/16 = 1.875rem */
         height: 6.75rem; /* adjust as necessary, in REMs */
         color: white;
        
         font-size: 1.25rem; /* adjust as necessary, in REMs */
         font-weight: 900;
         font-style: normal;
        }

footer {
        background: rgb(30,95,124);
        background: radial-gradient(circle, rgba(30,95,124,1) 0%, rgba(38,14,61,1) 100%);

        height: 6.25rem; 
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center; 

            border: 1px solid #000; /*stroke*/
            margin: 0; /*white space outside the box*/
            padding: 30px; /* inner white space, pushes logo in */
        }

footer p {text-align: center; }

nav {
        margin: 2rem auto;
        /* border: 1px solid red; */
        width: 18rem; 
        }

    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;
        /* margin-right: 16px; */
        height: 3rem;
        line-height: 3rem;
        flex: 1;
        /* border: 1px solid red;  */
        text-align: center; 
        /* background-color: yellow; */
        }
    
    nav ul li a {
        display: block;
        height: 100%;
        width: 100%;
        /* background-color: aqua; */
    }

a {text-decoration: none;}

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

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

header span {
        position: relative;
        top: -1.175rem;
        display: inline-block;
        left: 0.25rem;
        }

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

@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;
            }
        body {
            background: rgb(210 232 255);
            }
        .wrapper {
            max-width: 60rem; /* 960px */
             margin: 1rem auto; /* 1rem space above/below, automatic
            left/right margins centers the div */
            border: 1px solid rgb(9, 29, 49);
            background-color: rgb(210 232 255);
            }
            } /* ======= Close the media query ======= */