*{
box-sizing: border-box;
font-family: Inter;
}
body{
    background-color: #F3E5F5;
}
#navbar{
width: 100%;
margin: auto;
display: flex;
justify-content: space-around;
background-color: white;
font-size: 14px;
height: 44px;
align-items: center;
opacity: 0.8;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
#navbar>img{
width: 70px;
}
#navbar a{
color: black;
}
#navbar>a:hover{
color: lightgreen;
opacity: 1;
}
#navbar>a>img{
width: 45px;
background: transparent;
}
      #container{
          width: 95%;
          margin: auto;
          padding: 20px;
          margin-top: 20px;
          display: grid;
          grid-template-columns: repeat(4,1fr);
          gap: 40px 30px;
          background-color: #f0f5f6
      }
      a{
          text-decoration: none;
      }
      #container>div{
          box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
          padding: 20px;
          background-color: #E0F7FA;
          /* height: 100%; */
          border-radius: 30px;
          background-image: linear-gradient(to right,#9bd1d8,#97e1bd );
      }
      #container img{
          width: 100%;
          height: 350px;
          border-radius: 40px;
      }
      #delete{
          width: 100%;
          margin: auto;
          margin-top: 20px;
          padding: 7px;
          font-size: 25px;
          border: none;
          border-radius: 40px;
          background-color:#F8BBD0;
          background-image: linear-gradient(to right,#ecbfcf,#d5bbf8 );
      }
      #delete:hover{
        cursor: pointer;
        background-color:gold;
        display:inherit;
        background-image: linear-gradient(to right,#eefc94,#edd8b9 );
      }
      #modify{
        width: 95%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        background-color: #E0F7FA;
        height: 80px;
        text-align: center;
        align-items: center;
        padding: 20px;
        margin-top: 20px;
        background-image: linear-gradient(to right, #a4ed8e, #4986d1);
        /* font-size: 40px; */
      }
      #sorting ,#filter,#categoryFilter{
        /* background-color: red; */
        padding: 10px;
        font-size: 20px;
        background-color: #F1F8E9;
        background-image: linear-gradient(to right, #e299da, #91e8f0)
      }
      @media only screen and (max-width:650px) {
        #modify{
            flex-direction: column;
            height: 200px;
            align-content: space-between;
        }
        #container{
            grid-template-columns: repeat(1,1fr);
        }
        #navbar{
            flex-direction: column;
            height: 90px;
        }
        #navbar>a:nth-child(2){
            display: none;
        }
        #navbar>a:nth-child(3){
            display: none;
        }
        #navbar>a:nth-child(4){
            display: none;
        }
        #navbar>a:nth-child(4){
            display: none;
        }
        #navbar>a:nth-child(5){
            display: none;
        }
        #navbar>a:nth-child(6){
            display: none;
        }
        #navbar>a:nth-child(7){
            display: none;
        }
        #navbar>a:nth-child(8){
            display: none;
        }
        #navbar>a:nth-child(9){
            display: none;
        }
        #navbar>a:nth-child(10){
            display: none;
        }
        #navbar>a:nth-child(11){
            display: none;
        }
        /* #navbar>a:nth-child(12){
            display: none;
        } */
        #navbar>a:nth-child(12){
            display: none;
        }
        /* #navbar>a:nth-child(13){
            display: none;
        } */
        #navbar>a:nth-child(15){
            display: none;
        }
        #navbar>#cart-count{
            display: none;
        }
      }

      @media only screen and (min-width:651px) and (max-width:1000px) {
        #modify{
            flex-direction: column;
            height: 240px;
            align-content: space-between;
        }
        #container{
            grid-template-columns: repeat(2,1fr);
        }
        #navbar{
            flex-direction: column;
            height: 90px;
        }
        #navbar>a:nth-child(2){
            display: none;
        }
        #navbar>a:nth-child(3){
            display: none;
        }
        #navbar>a:nth-child(4){
            display: none;
        }
        #navbar>a:nth-child(4){
            display: none;
        }
        #navbar>a:nth-child(5){
            display: none;
        }
        #navbar>a:nth-child(6){
            display: none;
        }
        #navbar>a:nth-child(7){
            display: none;
        }
        #navbar>a:nth-child(8){
            display: none;
        }
        #navbar>a:nth-child(9){
            display: none;
        }
        #navbar>a:nth-child(10){
            display: none;
        }
        #navbar>a:nth-child(11){
            display: none;
        }
        #navbar>a:nth-child(12){
            display: none;
        }
        #navbar>a:nth-child(12){
            display: none;
        }
        /* #navbar>a:nth-child(13){
            display: none;
        } */
        #navbar>a:nth-child(15){
            display: none;
        }
        #navbar>#cart-count{
            display: none;
        }
      }