:root{--primary-cyan: hsl(172, 67%, 45%);--dark-cyan: hsl(183, 100%, 15%);--darkgray-cyan: hsl(186, 14%, 43%);--gray-cyan: hsl(184, 14%, 56%);--lightgray-cyan: rgb(197, 228, 231);--verylightgray-cyan: hsl(180, 37%, 97%);--white: hsl(0, 0%, 100%);--font-size: clamp(1.3rem, 2.5vw, 1.5rem);--font-family: "Space Mono", sans-serif;--font-weight: 700;--shadow-color: 186deg 21% 58%;--shadow-elevation-high: 0px .3px .3px hsl(var(--shadow-color) / .27), 0px 1.5px 1.7px -.4px hsl(var(--shadow-color) / .27), 0px 2.7px 3px -.7px hsl(var(--shadow-color) / .27), .1px 4.5px 5px -1.1px hsl(var(--shadow-color) / .27), .1px 7.1px 7.9px -1.5px hsl(var(--shadow-color) / .27), .1px 11.1px 12.4px -1.8px hsl(var(--shadow-color) / .26), .2px 16.9px 18.9px -2.2px hsl(var(--shadow-color) / .26), .3px 24.9px 27.8px -2.5px hsl(var(--shadow-color) / .26)}body{background-color:var(--lightgray-cyan);margin:0;box-sizing:border-box}body,input{font-family:var(--font-family);font-weight:var(--font-weight)}.wrapper{display:grid;min-height:100vh;max-width:1000px;margin:0 auto;gap:50px}header{text-align:center;margin-top:60px}main{background-color:var(--white);padding:10px 25px;border-radius:20px 20px 0 0;display:flex;flex-direction:column;gap:30px;box-shadow:var(--shadow-elevation-high)}main>*{flex-basis:50%}label{color:var(--darkgray-cyan)}input:not([type=button]){padding:5px 0;border:none;background-color:var(--verylightgray-cyan);width:100%;text-align:right}input:is([type=button]){background-color:var(--dark-cyan);color:var(--white);border-radius:5px;border:none;height:47px}input.custom-value-input{border-radius:5px;text-align:center}input.custom-value-input--selected{outline:2px solid var(--primary-cyan)}input:is([type=button]):hover{background-color:var(--primary-cyan);color:var(--dark-cyan);cursor:pointer}input{font-size:var(--font-size);color:var(--dark-cyan);outline:none}input:is([type=button]):focus-visible{outline:2px solid var(--primary-cyan)}::-moz-selection{color:var(--white);background:var(--primary-cyan)}::selection{color:var(--white);background:var(--primary-cyan)}.calculation{display:flex;flex-direction:column;justify-content:space-between}#tip{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:15px}.active{background-color:var(--primary-cyan)!important;color:var(--dark-cyan)!important}.input-container{margin:20px 0}.input-wrapper{display:flex;align-items:center;border-radius:7px;background-color:var(--verylightgray-cyan);padding:0 10px;margin-top:5px}.input-wrapper:hover,#tip-custom:hover{cursor:pointer;outline:2px solid var(--primary-cyan)}.result{display:flex;flex-direction:column;background-color:var(--dark-cyan);padding:40px 25px;border-radius:15px;gap:35px;margin-bottom:50px}.result-amount,.result-total{display:flex;align-items:center;justify-content:space-between}.text-span{font-size:1rem;color:var(--gray-cyan)}.number-span{font-size:clamp(2rem,1vw,3rem);color:var(--primary-cyan)}p{margin:0;color:var(--white)}.reset-btn{padding:15px;border:none;border-radius:7px;background-color:var(--primary-cyan);color:var(--dark-cyan);font-size:1.2rem;font-weight:var(--font-weight)}.reset-btn:hover{cursor:pointer;background-color:var(--lightgray-cyan)}@media (min-width: 1021px){main{flex-direction:row;margin:0 20px;padding:40px;gap:50px;min-width:900px;border-radius:20px}#tip{grid-template-columns:repeat(3,1fr)}header{margin-top:0}.reset-btn{margin-top:auto}.result{margin-bottom:0}}@media (min-width: 513px){.result{min-width:335px;padding:40px}.wrapper{place-content:center}}