*{
    margin: 0;
}
body{
    position: relative;
    font-family: Whitney,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-size: 13px;
   
}
#container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    gap: 20px 0px;
    width: 85%;
    margin-left: 30px;
}
#container > div{
    margin: auto;
    width: 80%;
}
#container > div > img{
    width: 100%;
   
}
#category{
  margin-top: 20px;
}
#category>h4{
    margin-top: 5px;
    cursor: pointer;
}
#main{
    margin-top: 120px;
    display: flex;
}
#filter{
    margin-left: 15px;
    width: 15%;
}
#top{
    display: flex;
    justify-content: space-between;
}
.name{
    margin-bottom: 8px;
    color: #535766;
    font-weight: 400;
    margin-left: 10px;
}
.strike{
    margin-left: 10px;
}
#price{
    margin-top: 30px;
}
#start{
    cursor: pointer;
    margin-top: 15px;
}
.fa{
    margin-right: 5px;
}
#medium{
    margin-top: 5px;
    cursor: pointer;
}
#end{
    margin-top: 5px;
    cursor: pointer;
}
#end2{
    margin-top: 5px;
    cursor: pointer;
}
.price1{
    margin-left: 10px;
    font-size: 14px;
}
.s{
    margin-left: 10px;
    color: grey;
    font-weight: 400;
    text-decoration: line-through;
    
}
.off{
    color:  #ff905a;
    font-weight: 400;
    margin-left: 10px;
    
}
#brand{
    margin-top: 30px;
}
#road{
    margin-top: 15px;
    cursor: pointer;
}
#wro{
    margin-top: 5px;
    cursor: pointer;
}
#dennis{
    margin-top: 5px;
    cursor: pointer;
}
#high{
    margin-top: 5px;
    cursor: pointer;
}
#arrow{
    margin-top: 5px;
    cursor: pointer;
}
#color{
    margin-top: 20px;
}
#black{
    margin-top: 19px;
    cursor: pointer;
    font-weight: lighter;
}
#pink{
    margin-top: 5px;
    cursor: pointer;
}
#green{
    margin-top: 5px;
    cursor: pointer;
}
#white
{
    margin-top: 5px;
    cursor: pointer;
}
#red
{
    margin-top: 5px;
    cursor: pointer;
}
#blue{
    margin-top: 5px;
    cursor: pointer;
}


@media all and (min-width: 600px) and (max-width: 800px){
    #container{
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto;
        gap: 20px 0px;
    }
}
@media all and (min-width: 400px) and (max-width: 600px){
    #container{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto;
        gap: 20px 0px;
    }
}
@media all and (min-width: 200px) and (max-width: 400px){
    #container{
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: auto;
        gap: 20px 0px;
    }
}
a{
    text-decoration: none;
    color: black;
}
#clearall{
    color: red;
    cursor: pointer;
}