body{
    font-family: 'Times New Roman', Times, 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;
   }