@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    font-family:Poppins;
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */

}


#menPage{
    text-align:center;
    margin:20px 0px;
}
#main{
    display:flex;

}

#main-left{
    width:15%;
    display:flex;
    flex-flow:column;
    gap:25px;
    padding:10px;
    text-align:center;
    
}

#filter-price{
    padding:10px;
    border-radius:10px;
    border:1px solid orange;
    cursor:pointer;
}

#gender{
    /* border:1px solid red; */
    display:flex;
    flex-flow:column;
    gap:5px;
    text-align:center;
}

#gender a{
    /* border:1px solid black; */
    color:black;
    text-decoration:none;
    text-align:center;
}


/* container botttom */


#container{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    width:85%;
    text-align:center;
    gap:10px;
    /* margin:auto; */
}

#container>div{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    display:flex;
    flex-flow:column;
    gap:5px;
    padding:4px;
    transition:.8s ;
    /* opacity:.99; */
    border:1px solid black;
    border-radius: 5px;
}
#container>div:hover{
    cursor:pointer;
    scale:1.02;
    background: rgba(255, 255, 255, 0.544);
    color:green;
    /* opacity:1; */
    /* border:2px solid green */
}
#container>div>img{
    width:100%;
    height:60%;
    transition:.9s;

}

#container>div>img:hover{
    scale:1.02;
    /* border:1px solid red */
}

#container>div button{
    width:50%;
    margin:auto;
    padding:5px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    background-color: orange;
    
}
#container>div button:hover{
    background-color:green
   
}

.loader{
    width:100%;
    padding-left:350px;
    /* border: 1px solid red;; */
    /* margin:auto; */
    /* display:inline; */
}

#pagination{
    display: flex;
    gap:10px;
    /* border:1px solid red; */
    width:25%;
    justify-content:center;
    margin:auto;
    margin-top:50px;
}

#pagination button{
    padding:10px 20px;
    background: #000;
    color:white;
    border-radius: 10px;
    cursor:pointer;
}


@media screen and (min-width:900px) and (max-width:1300px) {
    
    #container{
    grid-template-columns: repeat(3,1fr);
    width:70%;
    margin:auto

    }
    #pagination{
        width:40%;
    }
}
@media screen and (min-width:500px) and (max-width:900px) {
    
    #container{
    grid-template-columns: repeat(2,1fr);
       width:60%;
       margin:auto;
    }

    #container>div button{
        padding:0px;
    }

    #pagination{
        width:60%;
        margin:auto;

    }




}
@media screen and  (max-width:499px) {
    
    #container{
    grid-template-columns: repeat(1,1fr);
        width:75%;
        margin:auto;
    }

    #container>div button{
        padding:0px;
    }

    #pagination{
        width:100%;
        margin:auto;
    }
}