*{box-sizing:border-box;margin:0;padding:0}:root{--Lime: hsl(61, 70%, 52%);--LimeTransparent: hsla(61, 70%, 52%, .15);--LimeTransparent-500: hsla(61, 70%, 52%, .5);--Red: hsl(4, 69%, 50%);--Purple: hsl(279, 69%, 50%);--White: hsl(0, 0%, 100%);--Slate-100: hsl(202, 86%, 94%);--Slate-300: hsl(203, 41%, 72%);--Slate-500: hsl(200, 26%, 54%);--Slate-700: hsl(200, 24%, 40%);--Slate-900: hsl(202, 55%, 16%);--BlackTransparent: hsla(0, 0%, 0%, .25)}body{font-size:16px;font-weight:500;font-family:Plus Jakarta Sans,sans-serif}h1{margin-bottom:.5rem;font-size:1.5rem;font-weight:700;color:var(--Slate-900)}h2{font-size:1.2rem;font-weight:700}input{cursor:pointer;outline:none;border:none;background-color:transparent;color:var(--Slate-900);font-weight:700}input::placeholder{font-weight:500}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:1px solid var(--Slate-700);border-radius:50%;outline:none;position:relative}input[type=radio]:checked{border-color:var(--Lime)}input[type=radio]:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:.5rem;height:.5rem;border-radius:50%;background-color:transparent}input[type=radio]:checked:before{background-color:var(--Lime)}.container{background-color:var(--Slate-100);min-height:100vh;display:flex;align-items:center;justify-content:center}.form-container{background-color:var(--White);border:transparent;overflow:hidden;width:100%;max-width:clamp(375px,80%,668px)}.form{padding:clamp(1.5rem,5vw,2.5rem);background-color:var(--White);gap:1.5rem}.form .group-row{display:flex;flex-direction:column;gap:1.5rem}.form{display:flex;flex-direction:column}.form__header.group-row{align-items:baseline;justify-content:space-between}.form__header .clear-form{text-decoration:underline;color:var(--Slate-700)}.form__header>*{white-space:nowrap}.clear-form:hover{cursor:pointer}.form__body{display:flex;flex-direction:column;gap:1.5rem}.form__body fieldset{display:flex;flex-direction:column;gap:.8rem;border:none}.radio-fieldset legend{margin-bottom:.8rem}.radio-fieldset .radio-wrapper{display:flex;flex-direction:column;gap:.65rem}.radio-fieldset label{color:var(--Slate-900);font-weight:700}.form-group{display:flex;flex-direction:column;width:100%;gap:.8rem}.form-group label{color:var(--Slate-700)}.input-wrapper{position:relative;z-index:0;border-radius:.25rem;border:1px solid var(--Slate-500);overflow:hidden}.input-wrapper.error{border:1px solid var(--Purple)}.input-wrapper.error:hover,.input-wrapper.error:focus-within{border-color:var(--Purple)}.input-wrapper.error:focus-within .symbol,.input-wrapper.error .symbol{color:#fff;background-color:var(--Purple)}.input-wrapper.empty{border:1px solid var(--Red)}.input-wrapper.empty:hover,.input-wrapper.empty:focus-within{border-color:var(--Red)}.input-wrapper.empty:focus-within .symbol,.input-wrapper.empty .symbol{color:#fff;background-color:var(--Red)}.input-wrapper:hover{border-color:var(--Slate-900)}.input-wrapper:focus-within{transition:.2s;border-color:var(--Lime)}.input-wrapper:focus-within .symbol{background-color:var(--Lime)}.error-message.empty{color:var(--Red)}.error-message.error{color:var(--Purple)}.input{padding:1rem}.input.prefix{padding-left:2.85rem}.input.suffix{padding-right:3.2rem}.input-wrapper input{width:100%}.symbol{position:absolute;top:50%;transform:translateY(-50%);z-index:-1;background:var(--Slate-100);padding:.8rem;font-weight:700;font-size:14px;color:var(--Slate-700);height:100%}.symbol.prefix{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.symbol.suffix{right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.radio.form-group{flex-direction:row;align-items:center;border:1px solid var(--Slate-500);border-radius:.25rem;padding:1rem}.radio.form-group{cursor:pointer}.radio.form-group *{cursor:inherit}.radio.form-group:hover{border-color:var(--Slate-900)}.radio.form-group:focus-within{transition:.2s;border-color:var(--Lime);background-color:var(--LimeTransparent)}.result-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:1rem;padding:clamp(1.5rem,5vw,2.5rem);background-color:var(--Slate-900)}.result-container.has-result{justify-content:normal;align-items:normal;gap:0}.result-header{text-align:center}.result-header h2{color:var(--White);margin-bottom:1rem;font-size:1.5rem}.result-header.has-result{text-align:start}.result-header .result-description{color:var(--Slate-500)}.result-body.has-result{background-color:var(--BlackTransparent);border-top:4px solid var(--Lime);border-radius:.5rem;padding:2rem;margin-top:2.5rem}.result-body.has-result h3{color:var(--Slate-300);font-size:1rem;font-weight:500;margin-bottom:.5rem}.result-body__top{border-bottom:1px solid rgb(154,190,213,.25);padding-bottom:clamp(1rem,2vw,2rem)}.result-body__bottom{padding-top:clamp(1rem,2vw,2rem)}.result-body__top p{font-size:clamp(2.5rem,2vw,3.5rem);font-weight:700;color:var(--Lime)}.result-body__bottom p{font-size:1.5rem;color:var(--White)}button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem 2rem;border-radius:2.5rem;border:none;background-color:var(--Lime);font-size:1.125rem;font-weight:700}button:hover{transition:.2s;background-color:var(--LimeTransparent-500);cursor:pointer}@media (min-width: 768px){.form-container{border-radius:1rem}.form .group-row{display:flex;flex-direction:row}button{width:fit-content}}@media (min-width: 1440px){.form-container{display:flex;max-width:1000px}.form{flex-basis:60%}.result-container{flex-basis:40%;border-bottom-left-radius:5rem}}
