body {
    background-color: whitesmoke;
    
}
#filter-div{
    display: flex;
    padding-top: 30px;   
}
.name{
    color: rgba(0, 0, 0, 0.803);
    margin: 7px;
    font-size: 20px;
    
}
#filtering a{
    color: aquamarine;
   
}

.filter {
    background-color: rgb(222, 42, 42);
    width: 25%;
    margin-top: 20px;
    margin-right: 60px;
    margin-left: 0px;
    padding-left: 30px;
    height: 530px;
    border-radius: 12px;
}
#filtering{

    width: 400px;
    border: 2px;
    
}
.name:hover{
    color: azure;
}
.filter a {
    text-decoration: none;
    
   
}

#filtering>h2{
    width: 100%;
}
.mainname{
    width: 380px;
    height: 0px;
    color: black;
   margin: 5px;
}
.srt{
    font-size: 32px;
    padding: 1px;
    margin: 7px;
    color: black;
}
/* #filter-div{
width: 100%;
display: flex;
}
.filter{
width: 25%;
background-color: red;
height: 450px;
border-radius: 13px;
margin: 10px 10px 10px 10px;
padding-left: 25px;
}
.filter a{
    display: block;
}
.filter a:hover{
    color: aquamarine;
} */




#product-container{
    width:100%;
    margin: auto;
    display: grid;
    
    grid-template-columns: repeat(4,1fr);
    gap:15px;
}
#product-container > div{
    background-color: white;  
    height: 520px;
}

#product-container > div:hover{
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}

#product-container > div > img{
    width: 100%;
    height: 300px;
}
#product-container > div > img:hover{
    height: 290px;
}
#product-container > div  p{ 
    padding-left: 10px;
    margin-top: 3px;
    margin-bottom: 7px;

}
#product-container > div h3{
    padding-left: 10px;
    margin-bottom: 7px;
}
#product-container > div h4{
    margin-top: 1px;
    margin-bottom: 7px;
    color: rgb(211, 28, 4);
    padding-left: 10px;
    font-family: monospace;
    font-size: 20px; 
}
#product-container > div button{
    margin-left: 10px;
    margin-bottom: 10px;
}


#product-container > div button {
  appearance: none;
  background-color: rgb(215, 36, 16);
  border: 2px solid rgb(215, 156, 66);
  border-radius: 15px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  outline: none;
  margin-left: 10px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  
  will-change: transform;
}

#product-container > div button:disabled {
  pointer-events: none;
}

#product-container > div button:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

#product-container > div button:active {
  box-shadow: none;
  transform: translateY(0);
}
@media  screen and (min-width:0px) and (max-width:600px){
    #product-container{
        width:100%;
        margin:auto;
        display:grid;
        
        grid-template-columns: repeat(1,1fr);
        gap:15px;
    }
    
}
@media  screen and (min-width:601px) and (max-width:1000px){
    #product-container{
        width:100%;
        margin:auto;
        display:grid;
        
        grid-template-columns: repeat(2,1fr);
        gap:15px;
    }
    
}