:root{--primary: #26c2ad;--dark-primary: #00474b;--primary-text: #556f6e;--background: #c5e4e7;--secondary: #f3f8fb}html{font-size:62.5%}body{margin:0;background-color:var(--background);display:flex;flex-wrap:wrap;justify-content:center;font-family:Space Mono,monospace}header{width:100%;display:flex;justify-content:center;padding:5vh}h1{color:var(--primary-text)}.input-bill{background-image:url(./images/icon-dollar.svg);background-repeat:no-repeat;background-position:center left;background-origin:content-box;padding:0 20px}h2{color:var(--primary-text)}ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:12px}li{width:47%}input{box-sizing:border-box;font-size:2.4rem;text-align:right;color:var(--dark-primary);font-family:Space Mono,monospace;font-weight:700;background-color:var(--secondary);border-radius:5px;width:100%;padding-right:20px;border:2px solid transparent}@supports (-webkit-appearance: none){input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}}button{background-color:var(--dark-primary);color:#fff;font-family:Space Mono,monospace;font-weight:700;border:0;border-radius:5px;font-size:2rem}.active{background-color:var(--primary);color:#00474b}.percentage-button{width:100%;height:40px;box-sizing:border-box}.general-wrapper{max-width:100%;background-color:#fff;border-radius:30px;display:flex;flex-wrap:wrap;justify-content:center;padding:20px;box-sizing:border-box}.data-wrapper{display:flex;flex-direction:column;padding:10px;box-sizing:border-box;width:375px}.input-people{background-image:url(./images/icon-person.svg);background-repeat:no-repeat;background-position:center left;background-origin:content-box;padding:0 20px}.result-wrapper{background-color:var(--dark-primary);display:flex;flex-direction:column;border-radius:15px;width:375px;padding:30px;box-sizing:border-box;row-gap:20px;justify-content:space-between}.result-txt>*{display:flex;justify-content:space-between;margin:20px 0;align-items:center}.result-wrapper h2{color:#fff;margin:0}.result-wrapper h3{color:var(--primary);font-size:3rem;margin:0}.result-wrapper p{color:var(--primary-text);font-weight:700;margin:0}.result-wrapper button{background-color:var(--primary);color:var(--dark-primary);text-align:center;padding:7px}input:focus{border:2px solid var(--primary);outline:none;color:var(--dark-primary)}.btn-active{background-color:var(--primary);color:var(--dark-primary)}.input-invalid,.input-invalid:focus{border:2px solid orangered}