body{
    text-align: center;
    margin: 0px 10px;
    font-family: arial;
}

input{
    display: none;
}

.btns {
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 3rem;
    background: var(--green);
    color: var(--white);
    cursor: pointer;
    font-size: 1.7rem;
    text-transform: capitalize;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    border-radius: 10px;
}
.gallery-heading {
    padding: 2rem 2rem 0rem 2rem;
    font-size: 3rem;
    color: var(--black);
    text-transform: capitalize;
}
a{
    text-decoration: none;
    color: black;
}
img{
    width: 300px;
    height: 300px;
    border-radius: 30px;
}
.input-Btns{
    padding: 0rem 1rem 2rem 1rem;
}
@media (max-width: 425px) {
    .gallery-heading div{
        font-size: 1.7rem;
    }
    .gallery-heading h2{
        font-size: 3rem;
    }
    .input-Btns{
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 8px;
    }
}
/*filter CSS */

 #fish:checked ~ .images > img:not([class*='fish']),
 #birds:checked ~ .images > img:not([class*='birds']),
 #lion:checked ~ .images > img:not([class*='lion']){
   width: 0px;
   height: 0px;
}

#all:checked ~ .all,
#fish:checked ~ .tag1, 
#birds:checked ~ .tag2,
#lion:checked ~ .tag3{
    background-color: #333333;      
    color: white;
}