body {
    background-color: rgb(122, 155, 140);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0; 
    padding: 0;
    }
    .wrapper > figure {
        width: 350px;
        margin: 0 auto;
    }
    header {
        background-color: #b2c5b5;
        border: 0px solid #000;
        height: 5rem;
        padding: 2rem;
        
        font-size: 2.5rem; 

font-weight: 1000;
font-style: normal;
color: dimgray;
        }
    #logo {
        width: 3.375rem;
        height: auto;
        }

nav ul {
    display: flex;
 justify-content: space-between;
    margin-top: 0.5rem;
 margin-right: 0rem;
 margin-bottom: -0.125rem;
 margin-left: 1rem;
    list-style-type: none;

    width: 22rem;
            }
nav ul li {
    height: 55px;
    line-height: 55px;
    flex: 1;

    text-align: center; 

    display: inline;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
            }
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 */
                
               is going on, remove later */
                }
            
header span {
                position: relative;
                top:-1rem;
            font-size: 2rem;
                display: inline-block;
     left: 0.5rem;
                }

main{
    color: rgb(73, 99, 122);
    font-family: Helvetica, sans-serif,Arial;
    font-size: 20px;
    border: 0px solid;
    margin: 1%;

    padding: 1rem;

    /* margin-left: 36px; */
    }
    
    img {
        max-width: 100%;  /* responsive images */
        height: auto;
        margin-left: 0rem;
        margin-top: -2rem;
        margin-bottom: 0.1rem;
     }
    
h1{
color: rgb(255, 255, 255);
font-size: 2.5rem;    
font-family: “Roboto”,‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-weight: 600; font-style: normal;
padding-left: 2rem;
padding-right: 0.5rem;
margin:0rem 0 3rem 0
}

figcaption{
    text-align: center;
    margin: 5px;
}
footer {
        background-color: #b2c5b5;
        height: 5rem;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 1rem;
        }
footer p {text-align: center;}
a {text-decoration: none;
font-size: 12px;
padding:0}
.thumbnails figure {
        width: 100%;
        max-width: 260px;
        margin: 2rem auto 3rem auto;
        }


@media screen and (min-width: 1024px) {

.thumbnails {
            display: flex; 
            max-width: 60rem;  /* responsive images */

        height: auto;
        margin-left: 0rem;
        margin-top: -2rem;
        margin-bottom: 0rem;
            }
            img {
                max-width: 100%;  /* responsive images */
                height: auto;
                margin-left: 0rem;;
                margin-top: -1rem;
                margin-bottom: 0.1rem;
             }
             nav {
                margin: 0;
                }
.thumbnails figure {
 max-width: 300px; 
 margin: 1rem auto 3rem auto;
 
 padding: 2rem 1rem 1rem 1rem;
 box-shadow: 1px 5px 10px #ccc;
 } 


 .wrapper{
    width: 70%;
    margin: 0 auto;
 }
} // end media query