@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap";.logo{display:block;margin:50px auto}.main{border-radius:25px 25px 0 0;background-color:#fff;padding:30px;max-width:750px;margin:auto;display:grid}.main__input{margin-bottom:20px}@media (min-width: 750px){.main{grid-template-columns:repeat(2,1fr);gap:20px;border-radius:25px}#root{margin-top:150px}}.percentage__container{margin:20px 0}.percentage__btn{min-width:100px;height:50px;border-radius:5px;display:flex;align-items:center;justify-content:center;z-index:90}input[type=radio]{opacity:0;position:fixed;width:0;z-index:100}input[type=radio]:checked+.percentage__btn--dark{background-color:var(--green-cyan)}.percentage__btn--dark{background-color:var(--dark-green);color:#fff}.percentage__btn--dark:hover{background-color:color-mix(in srgb,var(--green-cyan) 50%,white);color:var(--dark-green)}.percentage__btn--light{background-color:var(--light-gray);color:var(--dark-green)}.percentage__btn--light:hover{box-shadow:0 0 0 2px var(--green-cyan)}.percentage__label{font-size:1.8rem;font-weight:600;color:var(--dark-green);text-align:left}.label__container{display:flex;justify-content:space-between}.label__container p{font-size:1.6rem;font-weight:600;color:var(--alert);margin:0;text-align:right}.input-box{padding:2.5px 15px;border-radius:5px;background-color:var(--light-gray);display:grid;grid-template-columns:1fr 5fr;align-items:center}.input-box--invalid{box-shadow:0 0 0 2px var(--alert)!important}.input-box:hover{box-shadow:0 0 0 2px var(--green-cyan)}.input-box__input{height:100%;width:100%;font:inherit;font-size:var(--input-fsz);font-weight:600;color:var(--dark-green);text-align:right;background-color:var(--light-gray)}.percentage__form{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width: 600px){.percentage__form{grid-template-columns:repeat(3,1fr)}}.total__card{background-color:var(--dark-green);border-radius:15px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-width:250px}.total__amount{display:flex;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap}.total__value{font-size:3.2rem;font-weight:700;margin:0 0 0 auto;color:var(--green-cyan);max-width:250px;overflow-x:auto}.total__label h2{color:#fff;font-size:1.7rem;margin:2px 0;width:110px}.total__label p{display:block;font-size:1.2rem;font-weight:400;color:var(--cyan-gray);margin:0}.reset__btn{color:var(--dark-green);border-radius:5px;padding:10px;width:100%;transition:all .3s ease-out}.reset__btn--active{background-color:var(--green-cyan)}.reset__btn--active:hover{background-color:#9fe8df}.reset__btn--unactive{background-color:var(--cyan-gray);cursor:not-allowed}*{box-sizing:border-box}:root{font-family:Space Mono,Helvetica,sans-serif;font-size:62.5%;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--title-fsz: 6rem;--input-fsz: 2.4rem;--dark-green: #00494d;--green-cyan: #26c0ab;--light-gray: #f4f8fb;--cyan-gray: #9ebbbd;--bg-cyan: #c5e4e7;--alert: #b58271}body{margin:0;background-color:#c5e4e7}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;cursor:text}input:hover,input:active,input:focus{outline:none}button,input,label{border:none;font-family:inherit;font-size:var(--input-fsz);font-weight:600;text-align:center;cursor:pointer}