@font-face {
  font-family: "ClashDisplay SemiBold";
  src: url("./fonts/ClashDisplay-Semibold.otf") format("opentype");
}
@font-face {
  font-family: "ClashDisplay Regular";
  src: url("./fonts/ClashDisplay-Regular.otf") format("opentype");
}
* {
  font-family: "ClashDisplay Regular", sans-serif;
}
.neuMorphicButton:hover,
.neuMorphicButtonEnabled:hover {
  background: #fafafa;
}
.neuMorphicButton,.neuMorphicButtonEnabled{
  cursor: pointer;
  border: none;
  aspect-ratio: 1;
  border-radius: 500px;
  padding: 10px;
  height: fit-content;
  background: #fafafa;
  transition: all .2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  & svg {
      height: 36px;
  }
}
 .neuMorphicButton {
  box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #f7f7f7;
   transform: scale(1);
   & svg{
    & path,ellipse{
      fill: #FEDF00;
      transition: all .2s ease;
    }
   }
 }

 .neuMorphicButtonEnabled {
  box-shadow: 1px 1px 3px #bebebe, -1px -1px 3px #f7f7f7;
  transform: scale(.975) ;
  & svg{
    fill: #46cb18;
    transition: all .2s ease;
    & .stone_een {
        fill: #46cb18;
        transition: all .2s ease;
      }
    
    & .st0 {
        fill: #46cb18;
        transition: all .2s ease;
      }
    & path,ellipse{
      fill: #46cb18;
        transition: all .2s ease;
    }
  }
 }
#body {
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:stretch;
  margin: auto;
  font-family: "ClashDisplay Regular", sans-serif;
}

#body > * {
  margin-bottom: 20px;
}
#content {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
#filters_sort {
  display: flex;
  justify-content: space-between;
}

#sorting,#price_range_filter {
  border: 1px solid rgb(209, 209, 209);
  border-radius: 10px;
  font-family: "ClashDisplay Regular", sans-serif;
  background-color: none;
  width: max-content;
  height: fit-content;
  margin: 10px;
  padding: 10px;
}
#heading_appliedfilters_sort{
  width: 100%;
  display: flex;
  flex-direction: column;
}
#heading_container {
  padding-top: 80px;
  width: 200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  & img{
    object-fit: contain;
  }
  & #heading{
    font-family: "ClashDisplay SemiBold", sans-serif;
    font-size: 50px;
    color: #486e00;
    margin: 0;
  }
}
#price_range_filter_container {
  display: flex;
}

#catalog_underline {
  width: 100%;
}
#products_container {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product_img_container {
  position: relative;
}
.product_container {
  box-shadow: none 0px 10px 15px -5px, none 0px 5px 5px -5px;
  background-color: #fdfce2;
  transition: all .25s;
}

.product_container:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -5px, rgba(0, 0, 0, 0.04) 0px 5px 5px -5px;
}

.product_img_container svg {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
}

.product_img_container > img {
  z-index: 0;
  height: 300px;
}
#filterNsort {
  display: flex;
  flex-wrap: wrap;
  margin: 50px auto;
  width: 100%;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
#reset_filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  border: 1px solid rgb(209, 209, 209);
  border-radius: 10px;
  padding : 10px;
}

footer * {
  font-family: "ClashDisplay Regular", sans-serif;
}
#filters{
  display: flex;
  flex-grow: .5;
  justify-content: space-around;
}
.heart_svg{
  height: 32px;
  width: 32px;
}
@media screen and (max-width: 750px) {
  #body {
    width: 90%;
    margin: auto;
  }
    .heart_svg {
      height: 24px;
      width: 24px;
    }
    #heading_container {
      padding-top: 80px;
      width: 150px;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
  
      & #heading {
        font-size: 38px;
      }
    }
  #products_container {
    grid-template-columns: repeat(2, 1fr);
  }
  #content {
    display: flex;
    flex-direction: column;
  }
  #filters {
    display: grid;
    margin: auto 5px;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    & p {
        display: flex;
        align-items: center;
      }
    & .neuMorphicButton,.neuMorphicButtonEnabled{
      height: fit-content;
    }
  }
  #filter *{
    margin: auto;
    width: 100%;
  }
  #filterNsort{
    box-sizing: border-box;
    width: 90%;
    margin: 20px auto;
    & svg{
      height: 20px;
    }
  }

}
@media screen and (max-width: 400px) {
  .product_img_container>img {
      height: 200px;
    }
  .heart_svg {
    height: 16px;
    width: 16px;
  }
  #body {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #heading {
    font-size: 16px;
  }
  #products_container {
    grid-template-columns: repeat(1, 1fr);
  }
  #content {
    flex-direction: column;
  }
    #heading_container {
      width: 100px;
      & #heading {
        font-family: "ClashDisplay SemiBold", sans-serif;
        font-size: 28px;
        color: #486e00;
        margin: 0;
      }
    }
}