:root{--color-white: hsl(0, 100%, 100%);--color-black: hsl(0, 0%, 0%);--color-grey-50: hsl(189, 47%, 97%);--color-grey-200: hsl(185, 41%, 84%);--color-grey-300: hsl(184, 19%, 68%);--color-grey-400: hsl(184, 14%, 56%);--color-grey-500: hsl(186, 14%, 43%);--color-grey-550: hsl(180, 18%, 40%);--color-grey-600: hsl(180, 25%, 32%);--color-green-200: hsl(173, 61%, 77%);--color-green-400: hsl(172, 67%, 45%);--color-green-750: hsl(183, 79%, 24%);--color-green-800: hsl(183, 85%, 21%);--color-green-900: hsl(183, 100%, 15%);--color-orange-400: hsl(13, 70%, 60%)}:root{--font-family: "Space Mono"}fieldset{border:none}label,legend{font-size:1rem;font-weight:700;line-height:24px;letter-spacing:0;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=number]{width:100%;height:3rem;padding:0.5rem 1rem;background-color:var(--color-grey-50);border:none;border-radius:0.3125rem;color:var(--color-green-900);text-align:right;font-size:1.5rem;font-weight:700;line-height:36px;letter-spacing:0;font-family:var(--font-family)}input[type=number]::-moz-placeholder{color:var(--color-grey-300)}input[type=number]::placeholder{color:var(--color-grey-300)}input[type=radio]{display:none}input[id=custom-tip]{height:100%;font-size:1.5rem;font-weight:700;line-height:36px;letter-spacing:0;font-family:var(--font-family)}input[id=custom-tip]::-moz-placeholder{color:var(--color-grey-500);text-align:center}input[id=custom-tip]::placeholder{color:var(--color-grey-500);text-align:center}.app__card{height:100%;width:100%;background-color:var(--color-white);padding:2rem 1.5rem;border-radius:1rem 1rem 0 0;display:flex;flex-direction:column;gap:2rem}@media(min-width: 37.5em){.app__card{max-width:38rem;border-radius:1rem;padding:3rem 5rem;gap:2.5rem;box-shadow:0 32px 43px 0 rgba(79,166,175,.2)}}@media(min-width: 64em){.app__card{flex-direction:row;max-width:57.5rem;padding:2rem;gap:3rem}}.app__card--form{display:flex;flex-direction:column;gap:2rem;padding:0 0.5rem}@media(min-width: 37.5em){.app__card--form{padding:0;gap:1.5rem}}@media(min-width: 64em){.app__card--form{flex-grow:1;justify-content:center}}.app__card--form .app__card--bill{display:flex;flex-direction:column}.app__card--form .app__card--bill label{color:var(--color-grey-500)}.app__card--form .app__card--bill>div{display:flex;justify-content:space-between;margin-bottom:0.5rem}.app__card--form .app__card--bill-error{color:var(--color-orange-400);font-size:1rem;font-weight:700;line-height:24px;letter-spacing:0;font-family:var(--font-family)}.app__card--form .app__card--tip{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(min-width: 37.5em){.app__card--form .app__card--tip{grid-template-columns:1fr 1fr 1fr}}.app__card--form .app__card--tip-button{background-color:var(--color-green-900);color:var(--color-white);padding:0.5rem 1rem;border:none;border-radius:0.3125rem;text-align:center;font-size:1.5rem;font-weight:700;line-height:36px;letter-spacing:0;font-family:var(--font-family)}.app__card--form .app__card--tip-button:hover{background-color:var(--color-green-200);color:var(--color-green-900)}.app__card--form .app__card--tip-button.active{background-color:var(--color-green-200);color:var(--color-green-900)}.app__card--form .app__card--tip>legend{display:block;width:100%;position:relative;color:var(--color-grey-500);margin-bottom:0.5rem}.app__card--form .app__card--tip-error{position:absolute;right:0;color:var(--color-orange-400);font-size:1rem;font-weight:700;line-height:24px;letter-spacing:0;font-family:var(--font-family)}.app__card--form .app__card--people{display:flex;flex-direction:column}.app__card--form .app__card--people label{color:var(--color-grey-500)}.app__card--form .app__card--people>div{display:flex;justify-content:space-between;margin-bottom:0.5rem}.app__card--form .app__card--people-error{color:var(--color-orange-400);font-size:1rem;font-weight:700;line-height:24px;letter-spacing:0;font-family:var(--font-family)}.app__card--input-container{position:relative}.app__card--input-container img{position:absolute;top:1rem;left:1rem}.app__card--results{padding:1.5rem;background-color:var(--color-green-900);border-radius:0.9375rem;width:100%}@media(min-width: 37.5em){.app__card--results{padding:2.5rem}}@media(min-width: 64em){.app__card--results{max-width:25rem}}.app__card--results h3{color:var(--color-white);font-size:1rem;font-weight:700;line-height:24px;letter-spacing:0;font-family:var(--font-family)}.app__card--results-person{color:var(--color-grey-400);font-size:0.8125rem;font-weight:700;line-height:19px;letter-spacing:0;font-family:var(--font-family)}.app__card--results-number{color:var(--color-green-400);font-size:2rem;font-weight:700;line-height:47px;letter-spacing:-0.67px;font-family:var(--font-family)}.app__card--results div{display:flex;justify-content:space-between;align-items:center}.app__card--results>div:first-child{margin-bottom:1.5rem}@media(min-width: 64em){.app__card--results>div:first-child{margin-bottom:2.5rem}}.app__card--results>div+div{margin-bottom:2rem}@media(min-width: 64em){.app__card--results>div+div{margin-bottom:8rem}}.app__card--results button{width:100%;height:3rem;padding:0.5rem 2rem;background-color:var(--color-green-200);color:var(--color-green-900);border:none;border-radius:0.3125rem;cursor:pointer;font-size:1.25rem;font-weight:700;line-height:30px;letter-spacing:0;font-family:var(--font-family)}.app__card--results button:disabled{cursor:not-allowed;background-color:var(--color-green-750);color:var(--color-green-800)}*,::before,::after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family),sans-serif;background-color:var(--color-grey-200);min-height:100vh;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:2.5rem}@media(min-width: 37.5em){body{padding:0 2rem 2rem;justify-content:flex-start}}@media(min-width: 64em){body{padding:0;justify-content:center;gap:4rem}}header{margin-top:2rem;width:100%;display:flex;align-items:center;justify-content:center}@media(min-width: 64em){header{margin-top:0}}/*# sourceMappingURL=styles.css.map */