:root{--white: #ffffff;--black: #000000;--grey-600: #3d6666;--grey-550: #547878;--grey-500: #5e7a7d;--grey-400: #7f9d9f;--grey-300: #9ebbbd;--grey-200: #c5e4e7;--grey-50: #f3f9fa;--green-900: #00474b;--green-800: #085c61;--green-750: #0d686d;--green-400: #26c2ae;--green-200: #9fe8df;--orange-400: #e17052}*{box-sizing:border-box}html{background-color:var(--grey-200)}body{font-family:Space Mono,system-ui;margin:0;height:100dvh;display:grid;place-items:center}main{display:grid;place-items:center;gap:41px}input,textarea,button,select{font:inherit}button{all:unset;outline:revert;box-sizing:border-box}h1,p{margin:0}.text-preset-1{font-family:Space Mono,monospace;font-weight:700;font-size:3rem;line-height:1.48;letter-spacing:-.021em}.text-preset-2{font-family:Space Mono,monospace;font-weight:700;font-size:2rem;line-height:1.47;letter-spacing:-.021em}.text-preset-3{font-family:Space Mono,monospace;font-weight:700;font-size:1.5rem;line-height:1.5;letter-spacing:0em}.text-preset-4{font-family:Space Mono,monospace;font-weight:700;font-size:1.25rem;line-height:1.5;letter-spacing:0em}.text-preset-5{font-family:Space Mono,monospace;font-weight:700;font-size:1rem;line-height:1.5;letter-spacing:0em}.text-preset-6{font-family:Space Mono,monospace;font-weight:700;font-size:.8125rem;line-height:1.46;letter-spacing:0em}.form-container{background-color:var(--white);border-top-left-radius:25px;border-top-right-radius:25px;padding:32px 24px;display:grid;grid-template-columns:1fr;gap:32px}.bill-input{display:grid;grid-template-columns:1fr;gap:32px}label{display:block;position:relative}.input-heading{color:var(--grey-500);margin-bottom:8px}.user-input{width:100%;color:var(--green-900);text-align:right;background-repeat:no-repeat;background-position:left 16px center;padding:8px 16px;font-size:24px;border-radius:5px;border:none;outline:none;background-color:var(--grey-50)}.user-input:focus{outline:2px solid var(--green-400)}.user-input:user-invalid{outline:2px solid var(--orange-400)}#cost-amount{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='17'%3e%3cpath%20fill='%239EBBBD'%20d='M6.016%2016.328v-1.464c1.232-.08%202.22-.444%202.964-1.092.744-.648%201.116-1.508%201.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144%201.012.4%201.356.768.344.368.516.816.516%201.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783%203.783%200%2000-.744-1.116A4.251%204.251%200%20007.54%202.9a5.324%205.324%200%2000-1.524-.492V.872H4.288V2.36a5.532%205.532%200%2000-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804%201.008-.2.392-.3.844-.3%201.356v.144c0%20.96.316%201.708.948%202.244.632.536%201.548.884%202.748%201.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0%20.464.08.924.24%201.38.16.456.404.88.732%201.272.328.392.744.728%201.248%201.008s1.108.476%201.812.588v1.512h1.728zM4.288%207.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092%200-.464.176-.832.528-1.104.352-.272.784-.448%201.296-.528v3.336zm1.728%205.712V9.344c.768.128%201.328.328%201.68.6.352.272.528.688.528%201.248%200%20.544-.196.984-.588%201.32-.392.336-.932.544-1.62.624z'/%3e%3c/svg%3e")}#number-of-people{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13'%20height='16'%3e%3cpath%20fill='%239EBBBD'%20d='M9.573%207.729c.406%200%20.784.07%201.126.209.342.14.639.33.881.569.232.227.438.503.614.82a5.1%205.1%200%2001.407.949c.097.312.178.654.242%201.016.062.359.105.699.126%201.011.02.307.031.624.031.945%200%20.836-.259%201.512-.768%202.01-.504.492-1.17.742-1.98.742H2.748c-.81%200-1.477-.25-1.98-.742C.259%2014.76%200%2014.084%200%2013.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%201.125-.208.16%200%20.313.067.61.265.183.123.397.264.636.421.204.134.48.259.822.372.333.11.671.167%201.005.167a3.19%203.19%200%20001.006-.167c.341-.113.618-.238.822-.372l.636-.42c.296-.2.45-.266.61-.266zM6.598%200C7.63%200%208.522.38%209.252%201.129s1.1%201.666%201.1%202.724c0%201.06-.37%201.976-1.1%202.725-.73.75-1.623%201.13-2.654%201.13-1.03%200-1.924-.38-2.653-1.13-.73-.749-1.1-1.666-1.1-2.725%200-1.058.37-1.975%201.1-2.724C4.675.379%205.567%200%206.598%200z'/%3e%3c/svg%3e")}.people-input-label-wrapper{display:flex;justify-content:space-between;align-items:center}.error-msg{color:var(--orange-400)}.hidden{display:none}ul{padding-left:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:16px;font-size:24px;margin:0}li{width:100%}button{width:100%;text-align:center;color:var(--white);background-color:var(--green-900);border-radius:5px;padding:6px 16px}button:hover{background-color:var(--green-200);color:var(--black)}#custom-input{width:100%;background-color:var(--grey-50);color:var(--grey-550);border:none;outline:none;text-align:center;padding:6px 0;border-radius:5px}.active{background-color:var(--green-400);color:var(--black);width:100%}#output-container{background-color:var(--green-900);border-radius:15px;padding:24px;display:grid;grid-template-columns:1fr;gap:24px;justify-content:center}.output-content{display:flex;justify-content:space-between;align-items:center}.output-text-amount{color:var(--white)}.output-text-unit{color:var(--grey-400)}.output-number{color:var(--green-400)}.reset-btn{background-color:var(--green-400);color:initial;min-width:281px;height:48px}.reset-btn:hover{background-color:var(--green-200)}@media (min-width: 768px){ul{grid-template-columns:repeat(3,1fr)}.form-container{padding:48px 80px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;min-width:608px}.reset-btn{min-width:362px}#output-container{padding-inline:32px}.output-number{font-size:48px}}@media (min-width: 1440px){.form-container{grid-template-columns:1fr 1fr;gap:48px;padding:32px;max-width:920px}.reset-btn{max-width:333px}#output-container{display:flex;flex-direction:column;justify-content:space-between;padding:38px 32px 24px}}