* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

:root {
  --Red: hsl(14, 86%, 42%);
  --Green: hsl(159, 69%, 38%);
  --Rose-50: hsl(20, 50%, 98%);
  --Rose-100: hsl(13, 31%, 94%);
  --Rose-300: hsl(14, 25%, 72%);
  --Rose-400: hsl(7, 20%, 60%);
  --Rose-500: hsl(12, 20%, 44%);
  --Rose-900: hsl(14, 65%, 9%);

  --Border--red: 2px solid hsl(14, 86%, 42%);
  --Border--rose: 1px solid hsl(12, 20%, 44%);
}

.text-white {
  color: #fff;
}

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

.red {
  color: var(--Red);
}

.green {
  color: var(--Green);
}

.rose-50 {
  color: var(--Rose-50);
}

.rose-100 {
  color: var(--Rose-100);
}

.rose-300 {
  color: var(--Rose-300);
}

.rose-400 {
  color: var(--Rose-400);
}

.rose-500 {
  color: var(--Rose-500);
}

.rose-900 {
  color: var(--Rose-900);
}

.mt-1 {
  margin-top: 5px;
}
.mt-2 {
  margin-top: 10px;
}
.mt-3 {
  margin-top: 15px;
}
.mt-4 {
  margin-top: 20px;
}
.mt-5 {
  margin-top: 25px;
}
.mt-6 {
  margin-top: 30px;
}

.mr-1 {
  margin-right: 5px;
}
.mr-2 {
  margin-right: 10px;
}
.mr-3 {
  margin-right: 15px;
}
.mr-4 {
  margin-right: 20px;
}
.mr-5 {
  margin-right: 25px;
}
.mr-6 {
  margin-right: 30px;
}

.ml-1 {
  margin-left: 5px;
}
.ml-2 {
  margin-left: 10px;
}
.ml-3 {
  margin-left: 15px;
}
.ml-4 {
  margin-left: 20px;
}
.ml-5 {
  margin-left: 25px;
}
.ml-6 {
  margin-left: 30px;
}

.mb-1 {
  margin-bottom: 5px;
}
.mb-2 {
  margin-bottom: 10px;
}
.mb-3 {
  margin-bottom: 15px;
}
.mb-4 {
  margin-bottom: 20px;
}
.mb-5 {
  margin-bottom: 25px;
}
.mb-6 {
  margin-bottom: 30px;
}

.p-1 {
  padding: 5px;
}
.p-2 {
  padding: 10px;
}
.p-3 {
  padding: 15px;
}
.p-4 {
  padding: 20px;
}
.p-5 {
  padding: 25px;
}
.p-6 {
  padding: 30px;
}

.mb-2 {
  margin-bottom: 5px;
}

.mb-4 {
  margin-bottom: 15px;
}

.ml-2 {
  margin-left: 10px;
}

.ml-2 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 125px;
}

.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
.fw-900 {
  font-weight: 900;
}

hr {
  border: 1px solid var(--Rose-100);
}

.nowrap {
  white-space: nowrap;
}

button {
  background-color: var(--Border--red);
  color: #fff;
  border: none;
}

body {
  font-family: serif;
  font-size: 16px;
  background: var(--Rose-50);
  overflow: auto;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.addAndSubSvg {
  padding: 0.7px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.addAndSubSvg:active {
  background-color: var(--Rose-50);
  color: var(--Red);
}

.addAndSubSvg:active path {
  fill: currentColor;
}

.removeSvg:active {
  color: var(--Rose-900);
  border: 1px solid var(--Rose-900);
}

.removeSvg:active path {
  fill: currentColor;
}

.addAndSubSvg:hover,
.btn:hover,
.cart__info:hover,
.removeSvg:hover {
  cursor: pointer;
}

.container {
  margin: 20px 25px;
}

.container h1 {
  font-weight: 700;
  margin-bottom: 20px;
}

/* CARD */
.desserts__card {
  margin-bottom: 20px;
}

.desserts__card .card__image {
  border: var(--Border--red);
}

.desserts__card .image__text {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--Red);
  color: #fff;
}

.desserts__card .cart__info h5 {
  margin-bottom: 3px;
}

.card__image__container img {
  border-radius: 5px;
}

.cart__info h5 {
  margin-top: 3px;
  margin-left: 6px;
}

.cart__info {
  margin: -15px auto;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 130px;
  background: #fff;
  border: var(--Border--rose);
  padding: 6px;
  border-radius: 25px;
  color: var(--Rose-900);
  position: relative;
}
.cart__info:active {
  border: 1px solid var(--Red);
  color: var(--Red);
  position: relative;
  cursor: pointer;
}
.cart__info__active {
  margin: -18px auto;
  display: flex;
  align-content: center;
  justify-content: space-between;
  width: 130px;
  background: var(--Red);
  padding: 8.8px;
  border-radius: 25px;
  color: var(--Rose-50);
  position: relative;
}

.cart__info button {
  background-color: var(--Border--red);
  color: #fff;
  border: none;
}

.cart__info h5 {
  margin-top: 4px;
  margin-left: 6px;
  font-weight: 900;
}

.card__category {
  margin-top: 30px;
}

.card__price {
  font-weight: 600;
}

/* CART */
.cart {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
}
.cart__icon__empty svg {
  display: flex;
  margin: 25px auto;
}

.cart__item__details__container {
  display: flex;
  justify-content: space-between;
}

.cart__item__details__container svg {
  position: relative;
  padding: 0.7px;
  border: 1px solid var(--Rose-300);
  border-radius: 50%;
  top: -10px;
}

.cart__item__details {
  display: flex;
}

.card__name {
  font-weight: 900;
}

.cart__item__details h4 {
  margin-right: 10px;
}

.cart__item__total__price {
  font-weight: 600;
}

.cart__total {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}

.cart__text {
  background-color: var(--Rose-50);
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  margin-top: 20px;
}

.cart__text svg {
  position: relative;
  top: 5px;
  border: none;
  margin-right: 5px;
}

.bg-red {
  background-color: var(--Red);
}

.btn {
  background-color: var(--Red);
  color: var(--Rose-50);
  margin-top: 20px;
  border-radius: 30px;
  padding: 15px;
  border: none;
  width: 100%;
  font-weight: 600;
}
.btn:active {
  background-color: #952c0c;
  color: var(--Rose-100);
  cursor: pointer;
}

.orderConfirmedCard {
  background: #fff;
  margin-top: -110px;
  position: sticky;
  padding: 30px 25px;
  bottom: 0;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}

/* .orderConfirmedCard::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}  */

.dimmed--background {
  /* top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.OrderConfirmed_h1 {
  width: 150px;
}

.OrderConfirmedItemName {
  align-self: flex-start;
}
.OrderConfirmedListContainer {
  background: var(--Rose-50);
  padding: 20px;
}

.OrderConfirmedImg {
  width: 50px;
  border-radius: 2.5px;
}
.OrderConfirmedItemDetails {
  display: flex;
}
.OrderConfirmedNameCountPriceTotalContainer {
  width: 100%;
}
.OrderConfirmedCountPriceTotalContainer {
  width: 212px;
  display: flex;
  justify-content: space-between;
}

.OrderConfirmedCountPrice {
  display: flex;
  align-self: flex-end;
}

.OrderConfirmedItemTotal {
  margin-top: -10px;
}

footer {
  margin-bottom: 10px;
}

.attribution {
  font-size: 12px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

@media screen and (min-width: 375px) {
  .container {
    margin: 0;
    padding: 30px 40px;
    display: grid;
    width: 100%;
    column-gap: 15px;
    overflow: hidden;
    align-items: start;
  }

  .desserts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .desserts__card {
    margin: 10px;
  }

  .title {
    grid-column: 1/3;
    align-self: self-end;
  }
  .cart {
    /* max-width: 325px; */
    align-self: start;
    margin: 0;
    border-radius: 5px;
  }
  .OrderConfirmedCountPriceTotalContainer {
    width: auto;
  }
}

@media screen and (min-width: 745px) {
  .container {
    max-width: 1270px;
    margin: 0 auto;
    padding: 30px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 100%;
    column-gap: 15px;
    overflow: hidden;
    align-items: start;
  }

  .desserts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .desserts__card {
    margin: 10px;
  }

  .title {
    grid-column: 1/4;
    align-self: self-end;
  }
  .cart {
    align-self: start;
    margin: 0;
    border-radius: 5px;
  }

  .orderConfirmedCard {
    background: #fff;

    padding: 30px 25px;

    border-radius: 10px 10px 0 0;
    z-index: 1;
    max-width: 400px;
    margin: 0 auto;
  }
  .OrderConfirmedCountPriceTotalContainer {
    width: 250px;
  }
}