body 
{

    margin: 4px;
    padding: 0;
    background-color: rgb(224 236 214);
    color: rgb(67, 81, 85);
}

img 
{
    max-width: 100%; /* responsive images */
    height: auto;
}
header img
{
    width:7.5rem; 
    height:auto;
}
h1 
{ 
    font-family: Helvetica, Arial, sans-serif; font-weight: 900; 
    font-style: normal; 
    font-size: 3.125rem;
    margin: 1rem 0 3rem 0;
}
section img
{

    height: 250px;
    width: 250px;
    aspect-ratio: 1;
    border-radius: 20px;
    transition: 0.5s;
    cursor: pointer;

}

header
{
    padding: 1.875rem; 
    height: 6.25rem;
    font-size: 2.25rem; 
    font-size: 20px; 
    font-weight: 900;
    font-style: normal;
}
header span 
{
    position: relative;
    top: -2.5rem;
    display: inline-block;
    left: 0.25rem;
}
nav
{
  
    margin: 1.5rem auto;
}
nav ul 
{
    display: flex; 
    justify-content: space-evenly; 
}
nav ul a
 {
    height: 100%;
    width: 100%; 
    flex: 1;
    text-align: center;
    display: block;
 }

 .list_button
 {
    font-size: larger;
    border: 1px solid #738074;  
    height: 44px; 
    line-height: 44px; 
    width:4rem;
    background-color: rgb(178 204 157);
 }
   
 a 
{
    text-decoration: none;
    color: rgb(67, 81, 85);
    font-family:sans-serif;
    font:bold;

}
main
 {
    padding: 1rem;
 }
 footer
   {
    height: 6.25rem;
    color: rgb(67, 81, 85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    footer p 
    {
        text-align: center; 
    }

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

    
    
    
    
    @media screen and (min-width: 1024px) 
    {
        body 
        {
            background-color: rgb(208, 223, 198);
        }
        .wrapper
        {
         max-width: 60rem; /* 960px */
         margin: 1rem auto;
         background-color: rgb(224 236 214);
        }
            .list_button
            {
               border: 1px solid #738074;
               font-size: larger;
               height: 50px; 
               width: 70px;
               line-height: 50px; 
               background-color: rgb(178 204 157);
               box-shadow: 1px 5px 13px #93b38ca2;
            }
        h1 
        {
        font-size: 3.125rem;
        }
        header span {
        font-size: 2rem;
        position: relative;
        top: -2rem;
        }
        nav
        {
        margin: 0;
        }
        .thumbnails 
        {
        display: flex; 
        max-width: 60rem; 
        }
        .thumbnails figure
        {
        max-width: calc(260px + 8rem); 
        margin: 2rem auto 3rem auto;
        border: 1px solid #738074;
        padding: 2rem 4rem 3rem 4rem;
        box-shadow: 1px 5px 13px #93b38ca2;
        }
        } /* ======= Close the media query ======= */