:root{--color-green-400: hsl(172, 67%, 45%);--color-green-900: hsl(183, 100%, 15%);--color-grey-500: hsl(186, 14%, 43%);--color-grey-400: hsl(184, 14%, 56%);--color-grey-200: hsl(185, 41%, 84%);--color-grey-50: hsl(189, 47%, 97%);--color-white: hsl(0, 100%, 100%)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:Space Mono,monospace;font-size:24px}img{max-width:100%;display:block}input{font:inherit;border:none;outline:none;background-color:transparent}button{font:inherit;border:none;outline:none;background-color:transparent;cursor:pointer}ul,li{list-style:none}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=number]::-ms-clear{display:none}@media (prefers-reduced-motion: redue){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.background{background-color:var(--color-grey-200);display:flex;flex-direction:column;justify-content:center;align-items:center}.logo-wrapper{display:flex;justify-content:center;align-items:center;height:5.5rem}.contents-wrapper{width:100%;background-color:var(--color-white);padding:1rem;display:flex;flex-direction:column;gap:1.5rem;border-radius:20px 20px 0 0}@media (min-width: 560px){.background{min-height:100vh;padding-inline:2rem}.contents-wrapper{padding:1rem 1.5rem;flex-direction:row;gap:1rem;border-radius:20px;box-shadow:0 10px 15px -3px #00494d33}}@media (min-width: 768px){.contents-wrapper{max-width:1000px;gap:1.5rem;margin-bottom:5.5rem}}.input-tips-wrapper{display:flex;flex-direction:column;gap:1rem}label{color:var(--color-grey-500);font-size:.7rem;font-weight:600;padding-bottom:.5rem;display:block}.input-wrapper{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background-color:var(--color-grey-50);padding:.1rem .8rem;border-radius:5px;border:2px solid transparent;margin-top:.2rem}.input-wrapper:focus-within{border-color:var(--color-green-400)}.input-wrapper.error-people{border-color:red}.input-field{text-align:end;color:var(--color-green-900);font-weight:700;width:100%}.tip-list-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.tip-list-item{background-color:var(--color-green-900);border-radius:5px;padding:.3rem;color:var(--color-grey-50);font-weight:600}.tip-list-item.active{background-color:#26c0ab80;color:var(--color-green-900)}.tip-list-item.custom{background-color:var(--color-grey-50);border:2px solid transparent}.tip-list-item.custom:focus-within{border-color:var(--color-green-400)}.tip-list-item-btn{color:inherit;width:100%}.tip-list-item-btn.custom{color:var(--color-grey-500);font-weight:600}.custom-input{width:100%;text-align:end;color:var(--color-green-900);font-weight:600}.custom-input:focus-within{border-color:var(--color-green-400)}.people-label{display:flex;justify-content:space-between;align-items:center}.error-for-people{color:red;font-size:.7rem;font-weight:600;padding-bottom:.5rem;display:block}@media (min-width: 768px){.input-tips-wrapper{flex:1;padding:1rem 0}.tip-list-wrapper{grid-template-columns:1fr 1fr 1fr;gap:.6rem}}.result-wrapper{display:flex;flex-direction:column;background-color:var(--color-green-900);border-radius:20px;padding:1.3rem 1rem 1rem}.result-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--color-green-400)}.result-item.space{margin-bottom:.8rem}.result-item-title{color:var(--color-grey-50);font-size:.6rem;font-weight:500}.result-item-title span{display:block;font-size:.5rem;color:var(--color-green-400)}.result-item-amount{font-size:1.2rem;font-weight:600}.reset-btn{margin-top:1.2rem;padding:.3rem;background-color:var(--color-green-400);color:var(--color-green-900);font-weight:700;font-size:.8rem;text-transform:uppercase;text-align:center;border-radius:5px;width:100%;transition:background-color .1s ease-in}.reset-btn:hover{background-color:var(--color-grey-200)}.reset-btn:disabled{background-color:var(--color-grey-500);color:var(--color-green-900);cursor:not-allowed}@media (min-width: 768px){.result-wrapper{flex:1;padding:2rem 1.5rem 1.5rem;justify-content:space-between}.result-item-title{font-size:.8rem;font-weight:600}.result-item-title span{font-size:.7rem;font-weight:500}.result-item.space{margin-bottom:1rem}.result-item-amount{font-size:2rem}.reset-btn{padding:.5rem;font-size:1rem}}