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; }
    
    footer p {text-align: center;}

    #logo {
        width: 4.375rem;
        height: auto;
        margin-right: 0px;
        padding-top: 0.8125rem;
        border-left-width: 0px;
        border-left-style: solid;
        padding-left: 0.25rem;
        padding-bottom: 0px;
        padding-right: 0px;
      }

    header {
        background: rgb(145,104,104);
        background: linear-gradient(180deg, rgba(145,104,104,1) 4%, rgba(165,123,123,1) 39%, rgba(175,134,134,1) 48%, rgba(204,170,170,1) 67%, rgba(233,209,209,1) 100%);
        border: 0.0625rem solid #000;
        height: 3.4375rem;
        padding: 1.25rem;
    }
    body {
        background: #F7E6E6;
        background: linear-gradient(270deg, #F7E6E6 27%, #F3DBDB 100%);
    }
    h1 {
        margin: 1rem 1.4rem 1.2rem 2.2rem;
        font-size: 1.8rem;
    }

    body {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0; 
        padding: 0;
        }

        footer {
            background: #F7E6E6;
            background: linear-gradient(270deg, #F7E6E6 27%, #F3DBDB 100%);
            padding: 1.875rem;
            height: 6.25rem;
            
            
        }

        header {
            background-color: #6F5454;
            padding: 0.375rem;
            height: 6.25rem;
            color: white;
            font-size: 1.125rem;
            font-weight: 900;
            font-style: normal;
        }
        
        nav {
            width: 12.4rem;
            margin: 1rem auto;
            background-color: #F3DBDB;
        }
            nav ul {
                list-style-type:none;
                width: 3.8rem;
                display: flex; 
                    justify-content: space-between
                
                }

            nav ul li {
                display: flex;
                margin-right: 1.25rem;
                margin-left: auto;
                justify-content: space-around;
    
              
            }
            a {text-decoration: none;}
                        
                        
            header span {
            position: relative;
            top: -1.3125rem;
            padding-left: 0.5rem;
            }
            img {
            max-width: 100%; /* responsive images */
            height: auto;
            }
            nav ul li {
            height: 2.75rem; /* minimum tap size */
            line-height: 2.75rem; /* leading: vertically centers text (when one line) */
            flex: 1; /* allows list item to grow within the flexbox */
            }
            main {
                padding: 1rem;
            }
            .thumbnails figure{
                width: 100%;
                max-width: 240px;
                margin: 2rem auto 3rem auto
            }
            .thumbnails{
                display: flex;
            }
            footer{
                background-color: #6F5454;
                height: 6.25rem;
                color: dimgray;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
    /* 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 */        
   body {
 background-color: #5d5c64;
}
.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;
 }