styles.css

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;     
}

.navbar{
  font-family: 'Montserrat Alternates', sans-serif;
}

#category{
  padding: 5% 6%;
}
#product-cards{
  padding: 5% 10%;
}

#footer{
 margin-bottom: 2%;
 margin-top: 2%;
  
}
.filter-btns{
  text-align: center;
}
.filter-btn{
  background: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-transform: uppercase;
  display: inline-block;
  margin: 10px 30px;
  font-size: 16px;
  color: #d3d3d3;
  font-weight: 600;
  letter-spacing: 2px;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.filter-btn::after{
  content: "";
  position: absolute;
  top: 110%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 2px;
  width: 0;
  background-color: #555;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out
}
.filter-btn:hover{
  color: #555;
}
.filter-btn:hover::after{
  width: 100%;
}
/* active button */
.active-btn{
  color: #555;
}
.active-btn::after{
  width: 100%;
}

.canvas-title{
  text-align: center;
}



/*     Shopping Cart     */

 .btn-purchase{
   text-align: center;
   margin: auto;
   padding: 2%;
   width: 50%;
 }

 #shopping-cart{
   padding: 5% 5%;
 }

 .cart-total{
   text-align: right;
   font-size: 1.3rem;
 }

.up-icon{
   color: black;
   position: fixed;
   float: right;
   z-index: 1;
   left: 95%;
   top: 85%;
   font-size: 2rem;
 }