h1, h2, h3, h4, h5, h6 {
  color : var(--dark-purple);
}

#cart-container {
  width : 50%;
  position : relative;
  left : 25%;
  top : 50px;
  margin : 20px 0;
  padding : 20px;
  display : flex;
  align-items: center;
  justify-content : center;
  flex-direction : column;
  background-color : var(--pink);
  border : 3px solid white;
  border-radius: 20px;
}

#cart-container > * {
  color : var(--dark-purple);
}

#cart-container > span {
  display : flex;
  align-items: space-around;
  justify-content : space-between;
  flex-direction : row;
  width : 100%;
}

#cart-container > .button-container {
  justify-content : center!important;
}

#cart-items {
  display : flex;
  align-items: center;
  justify-content : center;
  flex-direction : column;
  margin : 5px 0;
  width : 90%;
}

.cart-item {
  display : flex;
  align-items: center;
  justify-content : space-between;
  flex-direction : row;
  margin : 10px 0;
  width : 90%!important;
}
.cart-item > * {
  padding : 5px 10px;
  color : var(--dark-purple);
}

.cart-item-image {
  height : 100px;
  width : auto;
}

.cart-item > span {
  display : flex;
  align-items: center;
  justify-content : center;
  flex-direction : row;
}

.cart-item > span > p {
  font-size : 25px;
  width : 30px;
}

.quantity-buttons {
  display : flex;
  align-items: center;
  justify-content : center;
  flex-direction : column-reverse;
}

span.button-container > a > button, span.button-container > button {
  margin : 5px 10px;
}

#cart-total-container {
  padding : 10px;
  width : 50%;
  border-radius : 10px;
  background-color : rgb(0,0,0,0.1);
  margin : 10px;
  display : flex;
  align-items: center;
  justify-content : center;
  flex-direction : column;
}


#cart-total-container > h3 {
  margin : 10px 5px;
  color : var(--dark-purple);
}



@media screen and (max-width: 980px) {

  #cart-total-container {
    width : 90%;
  }

  #cart-container {
    width : 80%;
    left : 5%;
    margin : 50px 0;
    padding : 20px;
  }

  #cart-items {
    display : flex;
    align-items: center;
    justify-content : center;
    flex-direction : column;
    margin : 5px 0;
  }

  .cart-item {
    display : flex;
    align-items: center;
    justify-content : center;
    flex-direction : row;
    margin : 10px 0;
  }

  .cart-item > * {
    padding : 5px 5px;
    font-size : 18px;
  }

  .cart-item-image {
    height : 50px;
    width : auto;

  }

  .cart-item > span > p {
    font-size : 20px;
    width : 20px;
  }

  .button-container {
    flex-direction : column!important;
    flex-wrap : nowrap;
  }

  .button-container > * {
    margin : 10px 0;
  }

  .button-container > *, .button-container > * > * {
    width : 100%;
  }

  button {
    margin : 0!important;
    padding : 10px 0 5px;
    border : 3px solid var(--white);
    border-radius : 10px;
  }

  #cart-items {
    width : 100%;
  }

}