*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input{outline:none}button{cursor:pointer}:root{--color-primary: hsl(172, 67%, 45%);--color-primary-muted: hsla(172, 67%, 45%, 0.3);--color-accent: hsl(183, 100%, 15%);--color-accent-muted: hsl(183, 100%, 15%, 0.3);--color-bgColor: hsl(185, 41%, 84%);--color-neutral-1: hsl(0, 100%, 100%);--color-neutral-2: hsl(189, 47%, 97%);--color-muted-1: hsl(186, 14%, 43%);--color-muted-2: hsl(184, 14%, 56%);--color-error: hsl(0, 100%, 41%);--spacing-xs: 0.5rem;--spacing-sm: 0.75rem;--spacing-md-1: 1rem;--spacing-md-2: 1.3rem;--spacing-lg-1: 2rem;--spacing-lg-2: 2.75rem;--spacing-xl-1: 3.5rem;--spacing-xl-2: 4.5rem}body,input,button{font-family:"Space Mono",Arial,sans-serif}button::-moz-placeholder{font-size:1.5rem}input,button,button::placeholder{font-size:1.5rem}input,button,body{font-weight:700}body{background-color:var(--color-bgColor);min-height:100vh;display:flex;flex-direction:column;justify-content:center}.input__group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input__button,.input__number{border-radius:.5rem}.input__fieldset-legend,.input__label{color:var(--color-muted-1)}.input__button{border:none;padding-block:var(--spacing-xs);width:100%;background-color:var(--color-accent);color:var(--color-neutral-1)}.input__fieldset{display:grid;gap:var(--spacing-md-1);grid-template-columns:repeat(2, 1fr);border:none}.input__fieldset-legend{padding-bottom:var(--spacing-md-1)}.input__label-group{display:flex;justify-content:space-between}.input__label-error{display:none;color:var(--color-error);font-weight:600}.input__number{background-color:var(--color-neutral-2);background-repeat:no-repeat;background-position:var(--spacing-md-2) 50%;border:none;padding:var(--spacing-xs) var(--spacing-md-2);width:100%;text-align:right}.input__number:focus{outline:2px solid var(--color-primary)}.input__label-group:has(+.input__number:user-invalid) .input__label-error{display:block}.input__number:user-invalid{outline:2px solid var(--color-error)}.input__wrapper{position:relative}.input__wrapper::before{position:absolute;top:50%;transform:translateY(-50%);margin-left:var(--spacing-md-2)}button.active,button[aria-pressed=true]{background-color:var(--color-primary);color:var(--color-accent)}button.muted{background-color:var(--color-primary-muted);color:var(--color-accent-muted);cursor:unset}input{color:var(--color-accent);caret-color:var(--color-primary)}input[aria-pressed=true]{outline:2px solid var(--color-primary)}#bill__amount-input{background-image:url("../images/icon-dollar.svg")}#bill__people-input{background-image:url("../images/icon-person.svg")}.bill__form{display:grid;gap:var(--spacing-lg-1)}.result{display:grid;gap:var(--spacing-md-2);background-color:var(--color-accent);border-radius:1rem;padding:var(--spacing-lg-2) var(--spacing-md-2) var(--spacing-md-2) var(--spacing-md-2)}.result__label,.result__label span{line-height:1.4}.result__group-wrapper{display:grid;gap:var(--spacing-md-2)}.result__group{display:flex;justify-content:space-between;align-items:center}.result__amount{color:var(--color-primary);font-size:2rem}.result__label{color:var(--color-neutral-1)}.result__label span{color:var(--color-muted-2);font-size:.8rem}.tip-calculator{display:grid;gap:var(--spacing-md-2)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media screen and (min-width: 48em){.tip-calculator{grid-template-columns:repeat(2, 1fr);max-width:64rem;margin-inline:var(--spacing-md-2)}.bill{padding:var(--spacing-md-2)}.result{align-content:space-between;padding:var(--spacing-lg-2) var(--spacing-lg-1)}.result__amount{font-size:3rem}footer{position:absolute;bottom:0}}@media screen and (min-width: 64em){.document__header{margin-top:0;margin-bottom:var(--spacing-xl-1)}.tip-list{grid-template-columns:repeat(3, 1fr)}.result{padding:var(--spacing-xl-1) var(--spacing-lg-1) var(--spacing-lg-1) var(--spacing-lg-1)}}body{display:flex;flex-direction:column;align-items:center}header{margin-block:var(--spacing-lg-1)}main{background-color:var(--color-neutral-1);padding:var(--spacing-lg-1) var(--spacing-md-2);border-radius:1.5rem}.attribution{font-size:9px}.attribution a{color:hsl(228,45%,44%)}/*# sourceMappingURL=style.css.map */