@import url(https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap);*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#c5e4e7;font-family:Space Mono,monospace,sans-serif;margin:0;padding:0}.title{color:#375c5d;letter-spacing:1.1rem;overflow-wrap:break-word;width:155px}footer{align-items:center;color:#7f9c9f;display:flex;flex-direction:column;font-weight:700;justify-content:center;margin-top:50px;width:100%}footer>div a{color:#5e7a7d;outline:none;text-decoration:none}.container{flex-direction:column;justify-content:center;width:100%}.container,.content{align-items:center;display:flex;margin-top:50px}.content{background:#fff;border-radius:20px;box-shadow:2px 2px 2px 1px rgba(0,0,0,.1);flex-direction:row;justify-content:space-between;padding:20px;width:800px}.leftPage{color:#5e7a7d;padding:5px;width:50%}.leftPage h3{font-weight:700;margin-bottom:15px}.leftPage .amount,.leftPage .person{margin-bottom:20px;padding-left:10px}.leftPage .amount input,.leftPage .person input{background:#f4f8fb;border:none;cursor:pointer;margin-left:10px;outline:none;padding:10px;text-align:right}.leftPage input,.leftPage span{font-family:Space Mono,monospace,sans-serif;font-size:1.5rem}.leftPage .fa-user{font-size:1rem}.leftPage .tips-container{font-weight:700;margin-bottom:20px}.leftPage .tips-container .tips{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;list-style-type:none;padding-right:15px}.leftPage .tips-container .tips li{background:#00494d;border-radius:10px;color:#fff;cursor:pointer;font-family:Space Mono,monospace,sans-serif;font-size:1.5rem;margin-bottom:10px;padding:5px 10px;text-align:center;width:30%}.leftPage .tips-container .tips li:hover{background:#26c0ab;color:#00494d}.leftPage .tips-container .tips li a{outline:none;text-decoration:none}.leftPage .tips-container .tips li:last-child{background:transparent;padding-left:0}.leftPage .tips-container .tips li input{background:#f4f8fb;border:none;cursor:pointer;font-family:Space Mono,monospace,sans-serif;font-size:1.5rem;font-weight:700;outline:none;padding:0 5px;width:105px}.error{color:darkred;font-size:.7rem;font-weight:700;padding-right:40px;text-align:right}.rightPage{padding:10px;position:relative;width:50%}.rightPage .total-content{background:#00494d;border-radius:10px;height:440px;padding:70px 0 30px;position:relative}.rightPage .tipAmount,.rightPage .total{align-items:center;color:#fff;display:flex;justify-content:space-between;padding:0 30px}.rightPage .tipAmount--label,.rightPage .total--label{width:40%}.rightPage .tipAmount--label>span,.rightPage .total--label>span{color:#fff;font-size:.7rem;opacity:.5}.rightPage .tipAmount--value,.rightPage .total--value{color:#26c0ab;font-size:2.5rem;font-weight:700}.rightPage .total{margin-top:30px}.rightPage .reset{background:#26c0ab;bottom:30px;color:#5e7a7d;cursor:pointer;font-size:1.3rem;letter-spacing:.2;margin:0 20px;opacity:.2;padding:10px;position:absolute;text-transform:uppercase;width:90%}@media screen and (max-width:1400px){.content{width:90%}.amount span,.person span{padding:0 10px;width:20%}.amount .fa-user,.person .fa-user{width:10%}.amount input,.person input{width:80%}.tipAmount--label,.total--label{font-size:1.3rem;width:50%}.tipAmount--label>span,.total--label>span{font-size:1rem}.reset{width:95%}}@media screen and (max-width:768px){.container{align-items:center;justify-content:center;margin:30px 10px}.content{flex-direction:column;width:95%}.leftPage{width:100%}.leftPage .amount,.leftPage .person{align-items:center;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding-left:0;width:100%}.leftPage .amount span,.leftPage .person span{padding:0 10px;width:20%}.leftPage .amount .fa-user,.leftPage .person .fa-user{padding:0;width:20%}.leftPage .amount input,.leftPage .person input{padding:0 10px;width:80%}.leftPage h3{margin-top:20px}.leftPage .tips-container .tips li{padding:12px}.leftPage .tips-container .tips li input{width:150px}.rightPage{margin-top:50px;width:100%}.rightPage .reset{width:95%}}@media screen and (max-width:470px){.container{margin:30px 0}.rightPage .reset{width:90%}}
/*# sourceMappingURL=main.9eb02b2b.css.map*/