#logo {
    width: 70px;
    height: auto;
    
    
}

main {
    padding: 0.5rem;
}

h1 {
    font-size: 1.5rem;
    margin: 1rem 0 0.5rem 0; /* Inspect these values and adjust as
    necessary */
}

header {
    background-color: darkslateblue;
    
    padding: 30px;
    height: 120px;
    color: rgb(255, 255, 255); 
    font-size: 18px; 
    font-weight: 900;
    font-style: normal;
    
}
   
   
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; }

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

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; }


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

footer p {text-align: center;}


footer {
    background-color: darkslateblue;
    padding: 30px;
    height: 200px;
    margin: 0rem auto; 
    color: rgb(255 255 255); 
    font-size: 25px; /* add these three new lines */
    font-weight: 900;
    font-style: normal;
}


    

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

a {text-decoration: none;}






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

header span {
    position: relative;
    top: -25px;
}

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

nav {
    margin: 2rem auto;
    border: 1px solid red;
    width: 15rem;
    text-align: center;
    padding: 0;
    
}

nav ul {
    display: flex;
   
  }


nav ul li {
    height: 44px; /* minimum tappable size */
    display: block;
    line-height: 44px; /* leading: vertically centers text (when one
   line) */
    flex: 1; /* allows list item to grow within the flexbox */
    border: 2px solid black; /* Added temporarily so we can see what is
   going on */
    text-align: center; /* center text in tappable area */
    background-color: rgba(55, 0, 255, 0.116); /* 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: aqua; /* Added temporarily so we can see what
    is going on, remove later */
}




   @media screen and (min-width: 1024px) {
   
h1 {
    font-size: 3rem;
    }
    header span {
    font-size: 3rem;
    position: relative;
    top: -0.5rem;
    }
    nav {
    margin: 2;
    }
    .thumbnails {
    display: flex; 
    max-width: 60rem; 

margin: 2rem auto 3rem auto;
border: 1px solid #444;
padding: 2rem 4rem 3rem 4rem;
box-shadow: 1px 5px 13px #ccc;
    }

} 

body {
    background-color: #595959;
    }
    .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;
}