@font-face{font-display:swap;font-family:Karla;font-style:normal;font-weight:400;src:url(/react-contact-form-component/assets/Karla-VariableFont_wght-DrF-xMYr.ttf) format("truetype")}@font-face{font-display:swap;font-family:Karla;font-style:normal;font-weight:700;src:url(/react-contact-form-component/assets/Karla-VariableFont_wght-DrF-xMYr.ttf) format("truetype")}:root{--clr-primary-green-200: hsl(148, 38%, 91%);--clr-primary-green-600: hsl(169, 82%, 27%);--clr-primary-red-400: hsl(0, 66%, 54%);--clr-neutral-100: hsl(0, 0%, 100%);--clr-neutral-500: hsl(186, 15%, 59%);--clr-neutral-900: hsl(187, 24%, 22%);--ff-base: "Karla", sans-serif;--fs-base: 1rem ;--fs-md: 1.125rem ;--fs-lg: 2rem ;--fw-regular: 400;--fw-bold: 700;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 2.5rem;--space-3xl: 8rem;--br-200: .5rem;--br-400: 1rem}*,*:before,*:after{box-sizing:border-box}h1,.h1,h2,.h2,h3,.h3,h4,.h4{line-height:1.1}body,h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}ul[role=list],ol[role=list]{list-style:none;padding:0}body{min-height:100vh;line-height:1.5}input,button,textarea,select{font:inherit}img,picture{max-inline-size:100%;display:block}body{font-family:var(--ff-base);font-size:var(--fs-base);font-weight:var(--fw-regular);color:var(--clr-neutral-900);background:var(--clr-primary-green-200);display:grid;align-items:center;padding-inline:var(--space-md);padding-block:var(--space-xl)}fieldset{border:none;padding:0}.wrapper{max-inline-size:50em;margin-inline:auto}.flow>*+*{margin-block-start:var(--flow-space, 1rem)}.flow--lg{--flow-space: var(--space-lg)}.flow--xl{--flow-space: var(--space-xl)}.flow--2xl{--flow-space: var(--space-2xl)}.flex-flow{display:flex;gap:var(--gap, 1rem)}.gap-sm{--gap: var(--space-sm)}.grid-flow{--column-count: 1;--column-size: 1fr;--column-template: repeat(var(--column-count, 1), var(--column-size, 1fr));display:grid;gap:var(--gap, 1rem);grid-template-columns:var(--column-template)}@media(min-width:600px){.grid-2-col{display:grid;gap:1rem;grid-template-columns:1fr 1fr}.grid-2-col>*{margin:0}}.align-center{align-items:center}.visually-hidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.hidden{display:none}.error{display:block;color:var(--clr-primary-red-400);margin-block-start:var(--space-xs)}.fs-md{font-size:var(--fs-md)}.fs-lg{font-size:var(--fs-lg)}.fw-bold{font-weight:var(--fw-bold)}.clr-primary-200{color:var(--clr-primary-green-200)}.bg-100{background:var(--clr-neutral-100)}.pad-lg{padding:var(--space-lg)}.br-200{border-radius:var(--br-200)}.br-400{border-radius:var(--br-400)}input,textarea{border-radius:var(--br-200);border:1px solid var(--clr-neutral-500);padding-inline:var(--space-lg);padding-block:var(--space-sm)}.radio-group{border-radius:var(--br-200);border:1px solid var(--clr-neutral-500);padding-inline:var(--space-lg);padding-block:var(--space-sm);cursor:pointer}input:hover,input:focus-visible,textarea:hover,textarea:focus-visible,.radio-group:hover,.radio-group:focus-visible{border-color:var(--clr-primary-green-600)}input:not([type=radio],[type=checkbox]),textarea{width:100%}input[type=radio],input[type=checkbox]{margin-inline-end:var(--space-sm);display:inline-block;accent-color:var(--clr-primary-green-600);scale:1.25;cursor:pointer}.radio-group:has(input[type=radio]:checked){border-color:var(--clr-primary-green-600);background-color:var(--clr-primary-green-200)}label+input:not([type=radio],[type=checkbox]),label+textarea{display:block;margin-block-start:var(--space-xs)}.form-group:has(input:required)>label:not(.radio-group):after,.form-group:has(textarea:required)>label:after,fieldset:has(input:required)>legend:after,label:has(input[type=checkbox]) span:after{content:" * ";font-size:.8em;color:var(--clr-primary-green-600)}.button{width:100%;border:none;background:var(--bg, var(--clr-primary-green-600));color:var(--clr-neutral-100);font-size:var(--fs-md);font-weight:var(--fw-bold);border-radius:var(--br-200);padding-block:var(--space-md);transition:background .3s ease;cursor:pointer}.button:hover,.button:focus-visible{--bg: var(--clr-neutral-900)}.toast{--flow-space: var(--space-xs);background:var(--clr-neutral-900);color:var(--clr-neutral-100);position:fixed;top:var(--space-lg);left:1rem;right:1rem;max-width:fit-content;margin-inline:auto;animation:popIn 5s ease-in-out}@keyframes popIn{0%{transform:scale(0)}5%{transform:scale(1.15)}10%{transform:scale(1)}90%{transform:scale(1)}95%{transform:scale(1.15)}to{transform:scale(0)}}