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

    h1 { font-family: “Roboto”,'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-style: normal; 
    
    
    
            font-size: 1.5rem;
            margin: 1rem 0 2rem 0; /* Inspect these values and adjust as
           necessary */
            
    
    }

        
        header {background-color: rgb(77, 152, 213); /* fill */
            /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
            
            border: 1px solid black; 
            height: 3.4375rem;
            padding: 1.25rem;
            color: white;
font-size: 1.1875rem; 
font-weight: 900;
font-style: normal;


            
            
            }

        footer {  background-color: rgb(77, 152, 213); /* fill */
            /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */
            border: 1px solid black; 
            height: 3.4375rem;
            padding: 1.25rem;
            position: fixed;
            bottom: 0;
            width:100vw;
            height: 4.25rem;
 color: white;
 display: flex;
 flex-direction: column;
 justify-content: center;
 max-width: 60rem;
 
           

     }
        
        footer p {text-align: center;}

        #logo {
            width: 3rem;
            height: auto;
            bottom: 1rem;
            position: relative;

            }



            nav ul {
                list-style-type: none;

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


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: 2.75rem; /* minimum tappable size */
 line-height: 2.75rem; /* 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 */
 
                    display: inline;
                    /* margin-right: 16px; */
                   
                    }



                    nav ul li a {

display: block;
height: 100%;
width: 100%;




                    }

                    a {text-decoration: none;}

                    main {
                        /* margin-left: 36px; */

padding: 1rem 1rem 5rem 1rem;

                    }
                            
                            
                            header span {
                                position: relative;
                                top: -33px;
                                color: white;
                                }

                                body {background-color: rgb(201, 222, 230); /* fill */
                                /* rgba(255,255,255,0.5) => 0.5 = semi-transparent color */}

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

                 nav {
                   

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


                    /* 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: 2.5rem;
    position: relative;
    top: -1.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-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;
        }



    } /* ======= 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 */