@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');

* {
  padding: 0px;
  margin: 0px;
  font-family: "Red Hat Text", sans-serif;
}

.desserts h1 {
  font-weight: 900;
  margin-bottom: 20px;
}

h2 {
  color: hsl(14, 86%, 42%);
  font-weight: 800;
}

body {
  background-color: hsl(13, 31%, 94%);
  width: 100%;
  display: flex;
  justify-content: center;
}

.desserts {
  width: 800px;
  margin-top: 30px;
}

.cart {
  padding: 20px;
  background-color: hsl(20, 50%, 98%);
  border-radius: 10px;
  height: 500px;
  width: 350px;
  margin-top: 30px;
}

.div-items-cart {
  height: 280px;
  overflow-y: auto;
}

.conteudo>img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.conteudo {
  padding-right: 15px;
  position: relative;
  margin-bottom: 30px;
}

.containers {
  display: flex;
}

.icon-cart {
  width: 20px;
  margin-right: 5px;
}

.btn-cart {
  width: 150px;
  height: 40px;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid hsl(14, 25%, 72%);
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  margin-right: 15px;
}

.divCart {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.div-btn {
  position: absolute;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
}

.category-name {
  color: #807b73;
}

.title {
  font-size: 18px;
  font-weight: 700;
  padding: 5px 0;
}

.price {
  color: hsl(14, 86%, 42%);
  font-weight: 600;
}

.img-cart {
  text-align: center;
  width: 150px;
}

.div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  flex-direction: column;
  height: 80%;
}

.text {
  text-align: center;
  color: hsl(7, 20%, 60%);
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}

.icon-add {
  width: 12px;
  margin-left: 20px;
  margin-right: 20px;
  height: 100%;
}

.icon-desc {
  width: 12px;
  margin-left: 20px;
  margin-right: 20px;
  height: 100%;
}

.btn-cart-items {
  width: 150px;
  height: 40px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid hsl(14, 25%, 72%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: hsl(14, 86%, 42%);
  color: white;
  margin-right: 15px;
}

.p-title {
  font-weight: 600;
  font-size: 14px;
}

.p-quantity {
  font-size: 14px;
  padding-top: 5px;
  padding-right: 10px;
  color: hsl(14, 86%, 42%);
  font-weight: 600;
}

.p-price {
  font-size: 14px;
  padding-top: 5px;
  padding-right: 10px;
  color: #373636;
}

.tot {
  margin-bottom: 10px;
}

.p-total {
  font-size: 14px;
  padding-top: 5px;
  padding-right: 10px;
  color: #2b2929;
  font-weight: 500;
}

.hr {
  margin: 10px 10px;
  border-color: white;
}

.infos-cart {
  display: flex;
  flex-direction: row;
}

.order-total {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
}

.order {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}

.total {
  font-size: 24px;
  font-weight: 700;
}

.tree-img {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.delivery-phrase {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.bold{
  font-weight: 600;
  padding: 0 3px;
}

.delivery-info {
  display: flex;
  justify-content: center;
  background-color: hsl(13, 31%, 94%);
  border-radius: 5px;
  padding: 10px;
  margin: 15px 0;
}

.cart-btn {
  background-color: hsl(14, 86%, 42%);
  border: 1px solid hsl(14, 86%, 42%);
  color: white;
  padding: 10px;
  width: 100%;
  border-radius: 20px;
  cursor: pointer;
}

.exit-img {
  width: 15px;
  cursor: pointer;
  margin: 0 10px;
}

.exit-div {
  display: flex;
  align-items: center;
}

.overlay {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  width: 450px;
  min-height: 550px;
  border-radius: 10px;
  padding: 25px;
}

.confirm-img {
  padding-bottom: 15px;
}

.p-description {
  padding-top: 5px;
  color: #807b73;
}

.div-order {
  background-color: hsl(13, 31%, 94%);
  border-radius: 5px;
  margin-top: 25px;
}

.small-img {
  width: 60px;
  border-radius: 5px;
}

.divMainOrder {
  display: flex;
  align-items: center;
}

.divShoppingList {
  padding: 20px;
  height: 280px;
  margin-bottom: 15px;
  overflow-y: auto;
}

.descriptiveDiv {
  margin-left: 20px;
}

.infoDiv {
  display: flex;
}

.p-cart-total {
  font-weight: 600;
  margin-left: auto;
}

.new-list-btn {
  background-color: hsl(14, 86%, 42%);
  border: 1px solid hsl(14, 86%, 42%);
  color: white;
  padding: 10px;
  width: 100%;
  border-radius: 20px;
  cursor: pointer;
}

.divTotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

@media screen and ((min-width: 1097px) and (max-width: 1136px)) {
  .btn-cart {
    height: 35px;
    width: 140px;
  }

  .btn-cart-items {
    height: 35px;
    width: 140px;
  }

  .desserts {
    margin-left: 20px;
  }

  .conteudo>img {
    margin-bottom: 25px;
  }

  .div-cart {
    margin-right: 20px;
  }

  .title {
    font-size: 16px;
  }

  .category-name {
    font-size: 16px;
  }

  .price {
    font-size: 16px;
  }

  .desserts>h1 {
    padding: 20px;
  }
}

@media screen and ((min-width: 1059px) and (max-width: 1098px)) {
  .btn-cart {
    height: 35px;
    width: 140px;
  }

  .desserts>h1 {
    padding: 20px;
  }

  .btn-cart-items {
    height: 35px;
    width: 140px;
  }

  .desserts {
    margin-left: 20px;
  }

  .conteudo>img {
    margin-bottom: 25px;
  }

  .div-cart {
    margin-right: 20px;
  }

  .title {
    font-size: 15px;
  }

  .category-name {
    font-size: 15px;
  }

  .price {
    font-size: 15px;
  }
}

@media screen and ((min-width: 1021px) and (max-width: 1061px)) {
  .btn-cart {
    height: 35px;
    width: 140px;
  }

  .desserts>h1 {
    padding: 20px;
  }

  .btn-cart-items {
    height: 35px;
    width: 140px;
  }

  .desserts {
    margin-left: 20px;
  }

  .conteudo>img {
    margin-bottom: 30px;
  }

  .div-cart {
    margin-right: 20px;
  }

  .title {
    font-size: 14px;
  }

  .category-name {
    font-size: 14px;
  }

  .price {
    font-size: 14px;
  }

  .overlay {
    inset: 0;
  }
}

@media screen and ((min-width: 981px) and (max-width: 1020px)) {
  .btn-cart {
    height: 30px;
    width: 140px;
  }

  .btn-cart-items {
    height: 30px;
    width: 140px;
  }

  .desserts {
    margin-left: 20px;
  }

  .desserts>h1 {
    padding: 20px;
  }

  .conteudo>img {
    margin-bottom: 35px;
  }

  .div-cart {
    margin-right: 20px;
  }

  .title {
    font-size: 13px;
  }

  .category-name {
    font-size: 13px;
  }

  .price {
    font-size: 13px;
  }

  .cart {
    height: 450px;
    width: 400px;
    margin-top: 30px;
  }

  .overlay {
    inset: 0;
  }

  .div-items-cart {
    height: 250px;
  }
}

@media screen and ((min-width: 500px) and (max-width: 981px)) {
  body {
    display: block;
  }

  .desserts>h1 {
    padding: 20px;
  }

  .desserts {
    width: 100vw;
    margin-top: 0;
  }

  .containers {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .conteudo {
    width: 350px;
    padding-right: 0;
    padding-bottom: 15px;
  }

  .conteudo>img {
    width: 100%;
    margin-bottom: 10px;
  }

  .cart {
    margin-left: 20px;
    margin-right: 20px;
  }

  .btn-cart {
    margin: 0;
  }

  .div-cart {
    display: flex;
    justify-content: center;
    width: 100vw;
    margin-bottom: 20px;
  }

  .overlay {
    inset: 0;
  }

  .modal {
    width: 400px;
  }

  h1 {
    padding: 0;
  }
}

@media screen and ((min-width: 0) and (max-width: 500px)) {
  body {
    display: block;
  }

  .desserts>h1 {
    padding: 20px;
  }

  .desserts {
    width: 100vw;
    margin-top: 0;
  }

  .containers {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .conteudo {
    width: 300px;
    padding-right: 0;
    padding-bottom: 15px;
  }

  .conteudo>img {
    width: 100%;
    margin-bottom: 10px;
  }

  .cart {
    margin-left: 20px;
    margin-right: 20px;
  }

  .btn-cart {
    margin: 0;
  }

  .div-cart {
    display: flex;
    justify-content: center;
    width: 100vw;
    margin-bottom: 20px;
  }

  .overlay {
    inset: 0;
  }

  .modal {
    width: 300px;
  }

  h1 {
    padding: 0;
  }
}