/* body,h1,ul,li{
    margin: 0;
    padding: 0;
} */
 body{
    background-color: #667d8e;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
} 
#filter{
    width: 85%;
    margin: 50px auto;
}
/* #filter ul{
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
}
 */
#filter>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
    justify-content: center;
    margin-top: 10px;
    border-bottom: 2px solid rgba(2, 2, 2, 0.57);
    padding-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
#filter>ul>li{
    list-style: none;
    background-color:  rgb(87, 75, 99);
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;
}
#filter>ul>li:hover{
    list-style: none;
    background-color:  rgb(215, 190, 240);
    color: antiquewhite;
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;
   
}


#filter>ul>li.active{
    background-color: rgb(181, 172, 172);
}
.photo{
    width: 85%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.photo img{
    width: 350px;
    height: 228px;
    margin-bottom: 10px;
}