:root{--border-radius:.3rem;--green_900:#00494d;--green_400:#26c0ab;--gray_50:#f4fafb;--gray_500:#393c3c}*{box-sizing:border-box;margin:0;padding:0;font-family:Space Mono,monospace}body{background-color:#abd3d3}.app-name{color:#5d7c7b;text-transform:uppercase;word-wrap:break-word;letter-spacing:.5rem;width:28%;margin-block:2rem;margin-inline:auto}main{background-color:#fff;border-radius:1rem 1rem 0 0;flex-direction:column;gap:2rem;height:100%;padding-block:2rem 3rem;padding-inline:2rem;display:flex}.attribution{text-align:center;font-size:.6875rem}.attribution a{color:#3e52a3}form{flex-direction:column;gap:3rem;display:flex}.editable-info{flex-direction:column;gap:2rem;display:flex}.bill-container-grid,.people-container-grid{background-color:var(--gray_50);border-radius:var(--border-radius);color:var(--green_900);justify-content:space-between;width:100%;margin-block-start:.5rem;font-weight:900;display:flex}.tip-percentage-grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:1rem;width:90%;margin-block-start:.5rem;display:grid}.tip-control{border-radius:var(--border-radius);text-align:center;padding-block:.5rem;font-size:1.5rem;font-weight:700}.predefined-tip-percentage{color:var(--gray_50);background-color:var(--green_900)}.predefined-tip-percentage:hover{cursor:pointer}.custom-tip-control{color:var(--gray_500);background-color:var(--gray_50);cursor:pointer;padding-inline-start:2rem;font-weight:500}.predefined-tip-percentage.selected{color:#000;background-color:var(--green_400)}.total-summary{background-color:var(--green_900);color:#fff;border-radius:var(--border-radius);flex-direction:column;gap:1rem;padding:1.3rem 1rem .3rem;display:flex}.summary-row{justify-content:space-between;display:flex}.per-person{display:block}.per-person:before{content:"/ person";color:#749893}.btn{background-color:var(--green_400);color:#3e3e3e;text-align:center;text-transform:uppercase;border-radius:var(--border-radius);width:100%;margin-block:1rem;margin-inline:auto;padding-block:1rem;font-weight:700}.btn:hover{cursor:pointer}.money-amount{color:var(--green_400);font-size:1.5rem;font-weight:700}input{text-align:right;background-color:#0000;border:none;width:100%;font-size:1.25rem;font-weight:900}.bill-amount{background-image:url(/tip-calculator/images/icon-dollar.svg);background-position:1rem;background-repeat:no-repeat}.people-number{background-image:url(/tip-calculator/images/icon-person.svg);background-position:1rem;background-repeat:no-repeat}@media screen and (width>=768px){body{margin-block-start:12%}.app-name{text-align:center}main{border-radius:1rem;width:60%;height:60vh;margin-inline:auto}form{flex-direction:row;gap:1rem;width:100%;height:100vh;display:flex}.editable-info,.total-summary{width:50%;height:100%;font-size:.9rem}.editable-info{gap:10%}.total-summary{justify-content:space-between}.summary-row{font-size:1.25rem}input:focus{outline:2px solid var(--green_400)}.tip-percentage-grid{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);width:100%}.custom-tip-control{font-size:1rem}.money-amount{font-size:3rem}}