body{margin:auto;
background-color: black;}

header{height: 80px}

nav{display:flex;
justify-content: space-between;
align-items:center;
overflow:hidden;}


#logo{padding:15px;}

#logo img:hover{content:url('../images/logohover.png')}

#nav-list{display:flex;
list-style:none;
gap:3rem;
padding-right:15px;}

a {color: white;
text-decoration: none;
font-family: 'Roboto', sans-serif; }

a:hover{color: aquamarine;}

#gallery{column-count: 5;
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-gap: 5px;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;

}

#gallery img{width: 100%;
    filter:grayscale(100%);
    transition: filter 1s;

}

#gallery img:hover{filter:none;
}


@media(max-width:765px)
{


    #gallery{column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-gap: 5px;
        -webkit-column-gap: 5px;
        -moz-column-gap: 5px;
    
    }



    nav{display:flex;
        justify-content: space-between;
        align-items:center;
        overflow:hidden;
        flex-direction: column;
    }

        #logo{padding:15px;}

        #nav-list{display:flex;
            list-style:none;
            gap:3rem;
            padding-right:37px;
        flex-direction: column;
        text-align: center;
         }

            header{height: 267px}
}