*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

body {
  background-color: #c5e4e7;
  font-family: "Space Mono", monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.img_container {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.img_container img {
  margin: 0 auto;
  max-width: 87px;
  height: auto;
}

.container {
  width: 100%;
  max-width: 375px;
  background-color: #ffffff;
  border-radius: 25px;
  padding: 32px;
  box-shadow: 0 32px 43px rgba(79, 166, 175, 0.200735);
  margin-top: auto;
}

.select_section h3 {
  color: #5e7a7d;
  font-size: 16px;
  font-weight: 700;
  line-height: 23.7px;
  margin-bottom: 6px;
}

.select_section_texts {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.people_error {
  color: #e17052;
  font-size: 16px;
  font-weight: 700;
}

.bill {
  width: 100%;
  height: 48px;
  color: #00474b;
  background-color: #f3f9fa;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="17" viewBox="0 0 11 17"><path fill="%239EBBBD" d="M6.016 16.328v-1.464c1.232-.08 2.22-.444 2.964-1.092.744-.648 1.116-1.508 1.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144 1.012.4 1.356.768.344.368.516.816.516 1.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783 3.783 0 00-.744-1.116A4.251 4.251 0 007.54 2.9a5.324 5.324 0 00-1.524-.492V.872H4.288V2.36a5.532 5.532 0 00-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804 1.008-.2.392-.3.844-.3 1.356v.144c0 .96.316 1.708.948 2.244.632.536 1.548.884 2.748 1.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0 .464.08.924.24 1.38.16.456.404.88.732 1.272.328.392.744.728 1.248 1.008s1.108.476 1.812.588v1.512h1.728zM4.288 7.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092 0-.464.176-.832.528-1.104.352-.272.784-.448 1.296-.528v3.336zm1.728 5.712V9.344c.768.128 1.328.328 1.68.6.352.272.528.688.528 1.248 0 .544-.196.984-.588 1.32-.392.336-.932.544-1.62.624z"/></svg>');
  background-repeat: no-repeat;
  background-position: 19px center;
  border: 2px solid transparent;
  text-align: right;
  margin-bottom: 32px;
  border-radius: 5px;
  font-size: 24px;
  font-weight: 700;
  line-height: 35.54px;
  padding: 6px 17px 6px 19px;
  transition: border-color 0.3s ease;
}

.bill:focus {
  outline: none;
  border-color: #26c2ae;
}

.bill.error {
  border-color: #e17052;
}

.select_buttons {
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.select_tip {
  color: #ffffff;
  background-color: #00474b;
  font-size: 24px;
  font-weight: 700;
  line-height: 35.54px;
  text-align: center;
  border: none;
  border-radius: 5px;
  height: 48px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.select_tip:hover {
  background-color: #9fe8df;
  color: #00474b;
}

.select_tip.active {
  background-color: #26c2ae;
  color: #00474b;
}

.custom_tip {
  color: #00474b;
  background-color: #f3f9fa;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 35.54px;
  border-radius: 5px;
  border: 2px solid transparent;
  height: 48px;
  padding: 6px 17px;
  transition: border-color 0.3s ease;
  width: 100%;
}

.custom_tip:focus {
  outline: none;
  border-color: #26c2ae;
  text-align: right;
}

.custom_tip::placeholder {
  text-align: center;
  color: #547878;
}

.people {
  width: 100%;
  height: 48px;
  color: #00474b;
  background-color: #f3f9fa;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="16" viewBox="0 0 13 16"><path fill="%239EBBBD" d="M9.573 7.729c.406 0 .784.07 1.126.209.342.14.639.33.881.569.232.227.438.503.614.82a5.1 5.1 0 01.407.949c.097.312.178.654.242 1.016.062.359.105.699.126 1.011.02.307.031.624.031.945 0 .836-.259 1.512-.768 2.01-.504.492-1.17.742-1.98.742H2.748c-.81 0-1.477-.25-1.98-.742C.259 14.76 0 14.084 0 13.248c0-.322.01-.64.032-.945.02-.312.063-.652.126-1.01.063-.363.144-.705.242-1.017.1-.323.238-.643.407-.948.176-.318.382-.594.613-.821.243-.238.54-.43.882-.57.342-.138.72-.208 1.125-.208.16 0 .313.067.61.265.183.123.397.264.636.421.204.134.48.259.822.372.333.11.671.167 1.005.167a3.19 3.19 0 001.006-.167c.341-.113.618-.238.822-.372l.636-.42c.296-.2.45-.266.61-.266zM6.598 0C7.63 0 8.522.38 9.252 1.129s1.1 1.666 1.1 2.724c0 1.06-.37 1.976-1.1 2.725-.73.75-1.623 1.129-2.654 1.129-1.03 0-1.924-.38-2.653-1.129-.73-.749-1.1-1.666-1.1-2.725 0-1.058.37-1.975 1.1-2.724C4.675.379 5.567 0 6.598 0z"/></svg>');
  background-repeat: no-repeat;
  background-position: 19px center;
  border: 2px solid transparent;
  text-align: right;
  margin-bottom: 32px;
  border-radius: 5px;
  font-size: 24px;
  font-weight: 700;
  line-height: 35.54px;
  padding: 6px 17px 6px 19px;
  transition: border-color 0.3s ease;
}

.people:focus {
  outline: none;
  border-color: #26c2ae;
}

.people.error {
  border-color: #e17052;
}

.reset_section {
  background-color: #00474b;
  border-radius: 15px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reset_texts h2 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 23.7px;
  text-align: left;
}

.reset_texts h3 {
  color: #7f9d9f;
  font-size: 13px;
  font-weight: 700;
  line-height: 19.25px;
  text-align: left;
}

.tip_amount,
.total {
  color: #26c2ae;
  font-size: 32px;
  font-weight: 700;
  line-height: 47.39px;
  letter-spacing: -0.67px;
  text-align: right;
}

.reset {
  width: 100%;
  height: 48px;
  background-color: #0d686d;
  color: #00474b;
  font-size: 20px;
  font-weight: 700;
  line-height: 29.62px;
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
}

.reset:hover {
  background-color: #9fe8df;
}

.reset.active {
  background-color: #26c2ae;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body {
    padding: 40px;
  }

  .img_container {
    margin-bottom: 40px;
  }

  .container {
    max-width: 600px;
    border-radius: 25px;
    padding: 40px;
  }

  .select_buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .reset_section {
    padding: 32px;
    gap: 25px;
  }

  .tip_amount,
  .total {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  body {
    padding: 40px;
    justify-content: flex-start;
    min-height: 100vh;
  }

  .img_container {
    margin-top: 0;
    margin-bottom: 40px;
  }

  .container {
    width: 920px;
    max-width: 920px;
    display: flex;
    gap: 48px;
    border-radius: 25px;
    padding: 32px;
    margin-top: 0;
  }

  .select_section {
    flex: 1;
    max-width: 379px;
  }

  .reset_section {
    flex: 1;
    max-width: 413px;
    padding: 40px;
    justify-content: space-between;
    min-height: 417px;
  }

  .bill {
    width: 100%;
  }

  .select_buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    justify-content: space-between;
  }

  .select_tip {
    width: 100%;
    min-width: 115px;
  }

  .custom_tip {
    width: 100%;
    min-width: 115px;
  }

  .people {
    width: 100%;
  }

  .tips {
    width: 100%;
    align-items: center;
  }

  .tip_amount,
  .total {
    font-size: 48px;
    line-height: 71px;
  }

  .reset {
    width: 100%;
    height: 48px;
    margin-top: auto;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

button:focus,
input:focus {
  outline: 2px solid #26c2ae;
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .select_tip,
  .reset {
    border: 2px solid currentColor;
  }

  .bill,
  .custom_tip,
  .people {
    border-width: 3px;
  }
}