body{
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
    background-color: #E4E4E4;
    font-family: 'Poppins',sans-serif;
}
section {
    height: 100%;
    width: 100%;
    box-sizing:border-box;
    padding: 60px;
}





.landingSection {
    background: radial-gradient(51.46% 51.46% at 50% 41.65%, #BA7CD0 0%, #E4E4E4 100%);
}

.landingSection > h1 {
    color: #000;
    text-align: center;
    font-size: 50px;
    font-weight: 400;
    line-height: normal;
}


.categoryList {
    align-items: center;
    text-align: center;
    justify-content: space-between;
}
.categoryList > button {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #BA7CD0 0, #a16bb4 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono",monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  margin: 10px;
}


.categoryList .active {
    box-shadow: #7c4c8c 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #7c4c8c 0 -3px 0 inset;
    transform: translateY(-10px);
}

.categoryList > button:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #7c4c8c 0 -3px 0 inset;
  transform: translateY(-2px);
}

.categoryList > button:active {
  box-shadow: #7c4c8c 0 3px 7px inset;
  transform: translateY(2px);
}   





.productsPreviewContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-gap: 75px;
    width: fit-content;
    margin: 0 auto;
    padding-top: 100px;
}

.productPreview {
    box-shadow: 10px 10px 60px #9375a0 !important;
}

/* responsive for the products preview to go from 3 to 2 columns */
@media (max-width: 1200px) {
    .productsPreviewContainer {
        grid-template-columns: 1fr 1fr;
    }
}
/* responsive for the products preview to go from 2 to 1 columns */
@media screen and (max-width: 768px) {
    .productsPreviewContainer {
        grid-template-columns: 1fr;
    }
}