html{--cyan:color(display-p3 .796 .898 .929);--light-gray:color(display-p3 .953 .973 .98);--dark-green:color(display-p3 .11 .28 .3);--light-green:color(display-p3 .149 .792 .678);--gray-text:color(display-p3 .29 .353 .369);--light-gray-text:color(display-p3 .71 .871 .914);--white:color(display-p3 1 1 1)}@media (min-width:425px){.form-error{display:inline;margin-left:3rem}}.tips-flexbox{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}body{font-family:monospace;font-size:large;background-color:var(--cyan);display:grid;place-content:center}button{color:var(--white);outline-color:var(--cyan);cursor:pointer;background-color:var(--dark-green);border-radius:10px;padding:.5rem;font-weight:bold;font-size:large;margin-block-start:1rem;font-family:monospace;width:90%}button[type="reset"]{font-weight:lighter}h1{margin-top:10%;text-align:center}form{background-color:var(--white);padding:1rem;border-radius:10px;margin:auto;display:flex;flex-direction:column}label{color:var(--gray-text);font-weight:bold}input{font-size:24px;cursor:pointer;border:1px solid var(--light-gray-text)}input[type="checkbox"]{opacity:0;width:0;height:0}.tips-flexbox label{width:100px;background-color:var(--dark-green);color:var(--white);padding:5px;border-radius:5px;text-align:center;cursor:pointer;&:hover,&:focus-within{outline:1px solid var(--light-green)}&:has(:checked){color:var(--dark-green);background-color:var(--light-green)}}fieldset{margin:1rem 0;padding:1rem;border-radius:10px;background-color:var(--dark-green);border:none}fieldset p{width:100%;display:inline;color:var(--white)}fieldset span{color:var(--light-gray-text)}#tipAmount,#totalAmount{font-size:large;margin-left:3rem;color:var(--light-green)}footer{text-align:center;margin-block:1rem}@media (min-width:1024px){form{max-width:850px;flex-direction:row}fieldset{width:50%}#tipAmount,#totalAmount{font-size:xx-large}.tip-calculator{width:50%}}