@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  display: grid;
  place-content: center;
  min-height: 100svh;
  font-family: "Space Mono", monospace;
  background-color: hsl(185, 41%, 84%);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.1rem, 0, 0);
  }
  20%, 80% {
    transform: translate3d(0.1rem, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-0.1rem, 0, 0);
  }
  40%, 60% {
    transform: translate3d(0.1rem, 0, 0);
  }
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}
@media (max-width: 36rem) {
  main {
    gap: 2rem;
  }
}
main img {
  max-width: 100%;
}

.card {
  display: grid;
  grid-template-columns: repeat(2, 400px);
  max-width: 900px;
  padding: 2rem;
  background-color: hsl(0, 100%, 100%);
  border-radius: 1.25rem;
}
@media (max-width: 36rem) {
  .card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}
.card__bill {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.5rem 1rem 0.5rem;
  gap: 1rem;
}
@media (max-width: 36rem) {
  .card__bill {
    padding: 0;
  }
}
.card__bill__content, .card__bill__discount, .card__bill__number {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: hsl(186, 14%, 43%);
  font-weight: 700;
}
.card__bill .bill-display {
  display: flex;
  justify-content: space-between;
}
.card__bill .bill-display .error-bill {
  display: none;
}
.card__bill .bill-display .error-bill.active {
  display: block;
  color: hsl(4, 100%, 67%);
}
.card__bill .shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.card__bill .bill-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-radius: 0.313rem;
  background-color: hsl(189, 47%, 97%);
  border: 2px solid transparent;
}
.card__bill .bill-quantity:hover {
  border-color: hsl(172, 67%, 45%);
}
.card__bill .bill-quantity input {
  font-size: 1.5rem;
  background-color: transparent;
  font-weight: 700;
  color: hsl(183, 100%, 15%);
  text-align: right;
  border: none;
  outline: none;
  width: 100%;
  font-family: "Space Mono", monospace;
}
.card__bill .bill-quantity.active {
  border-color: hsl(4, 100%, 67%);
}
.card__bill #custom-tip {
  caret-color: hsl(172, 67%, 45%);
}
.card__bill .people-display {
  display: flex;
  justify-content: space-between;
}
.card__bill .people-display .error-number {
  display: none;
}
.card__bill .people-display .error-number.active {
  display: block;
  color: hsl(4, 100%, 67%);
}
.card__bill .bill-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-radius: 0.313rem;
  background-color: hsl(189, 47%, 97%);
  border: 2px solid transparent;
}
.card__bill .bill-number:hover {
  border-color: hsl(172, 67%, 45%);
}
.card__bill .bill-number input {
  font-size: 1.5rem;
  background-color: transparent;
  font-weight: 700;
  color: hsl(183, 100%, 15%);
  text-align: right;
  border: none;
  outline: none;
  width: 100%;
  font-family: "Space Mono", monospace;
}
.card__bill .bill-number.active {
  border-color: hsl(4, 100%, 67%);
}
.card__bill__discount .percentages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
@media (max-width: 36rem) {
  .card__bill__discount .percentages {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card__bill__discount .percentages button,
.card__bill__discount .percentages input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
}
.card__bill__discount .percentages button {
  background-color: hsl(183, 100%, 15%);
  color: hsl(0, 100%, 100%);
}
.card__bill__discount .percentages button:hover {
  background-color: hsl(185, 41%, 84%);
  color: hsl(183, 100%, 15%);
}
.card__bill__discount .percentages button.default {
  background-color: hsl(172, 67%, 45%);
  color: hsl(183, 100%, 15%);
}
.card__bill__discount .percentages input {
  background-color: hsl(189, 47%, 97%);
  color: hsl(186, 14%, 43%);
  outline: none;
}
.card__bill__discount .percentages input:hover {
  color: hsl(183, 100%, 15%);
  border-color: hsl(172, 67%, 45%);
}
.card__bill__discount .percentages input.default {
  background-color: hsl(172, 67%, 45%);
  color: hsl(183, 100%, 15%);
}
.card__amount {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: hsl(183, 100%, 15%);
  border-radius: 1.25rem;
  padding: 2rem;
  gap: 1rem;
}
.card__amount__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.card__amount__content__persons, .card__amount__content__total {
  display: flex;
  justify-content: space-between;
}
.card__amount__content__persons .tip-person,
.card__amount__content__persons .total-person, .card__amount__content__total .tip-person,
.card__amount__content__total .total-person {
  display: flex;
  flex-direction: column;
  color: hsl(0, 100%, 100%);
}
.card__amount__content__persons .tip-person .person,
.card__amount__content__persons .total-person .person, .card__amount__content__total .tip-person .person,
.card__amount__content__total .total-person .person {
  color: hsl(184, 14%, 56%);
}
.card__amount__content__persons .quantity,
.card__amount__content__persons .total, .card__amount__content__total .quantity,
.card__amount__content__total .total {
  color: hsl(172, 67%, 45%);
  font-weight: 700;
  font-size: 2rem;
}
.card__amount__reset {
  padding: 0.8rem;
  background-color: hsl(172, 67%, 45%);
  color: hsl(183, 100%, 15%);
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
.card__amount__reset:hover {
  background-color: hsl(185, 41%, 84%);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.1rem, 0, 0);
  }
  20%, 80% {
    transform: translate3d(0.1rem, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-0.1rem, 0, 0);
  }
  40%, 60% {
    transform: translate3d(0.1rem, 0, 0);
  }
}/*# sourceMappingURL=style.css.map */