:root{--grey-dark: hsl(187, 24%, 22%);--red: hsl(0, 66%, 54%);--white: hsl(0, 0%, 100%);--lg: x-large;--md: 1rem;--sm: .85rem;--b-rad: .35rem;--fb-margin: 3rem 2rem;--ff-gap: .75rem;--form-pg: 2rem;--form-width: 42.25rem;--g-gap: 2rem 1rem;--input-pg: .75rem 1rem;--lb-gap: .5rem;--outline: 1px solid var(--grey-dark);--para-space: 1.25lh;--success-width: 25rem;--footer-dir: row}#success,#toaster{position:fixed;top:-10rem;left:50%;transform:translate(-50%);display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:var(--ff-gap);width:var(--success-width);background-color:var(--navlinkHv);color:var(--white);padding:1rem;border-radius:var(--b-rad);z-index:50}:is(#success,#toaster) img{height:1rem}:is(#success,#toaster) img.border{border:1px solid white;border-radius:50%}:is(#success,#toaster) h2{font-size:var(--md)}:is(#success,#toaster) p{font-weight:lighter;flex-basis:100%;font-size:var(--sm);line-height:var(--para-space)}:is(#success,#toaster).animate{animation:move-down 3s linear 1 reverse}form{display:grid;gap:var(--g-gap);grid-template-columns:repeat(2,1fr);background-color:var(--white);max-inline-size:var(--form-width);inline-size:100%;margin-inline:auto;margin-block:var(--fb-margin);padding:var(--form-pg);border-radius:calc(2 * var(--b-rad))}form h1{font-size:var(--lg)}form .form-field{display:flex;flex-direction:column;gap:var(--ff-gap)}form .form-field:has(input+label){flex-direction:row;justify-content:start}form .form-field:has(input+label)>label{cursor:pointer;text-wrap:nowrap}form .form-field:has(input+label):has([type=checkbox]){flex-wrap:wrap}form .form-field input,form .form-field textarea{padding:var(--input-pg);font-size:var(--md);border:none;border-radius:var(--b-rad);outline:var(--outline);cursor:pointer}:is(form .form-field input,form .form-field textarea):focus-visible,:is(form .form-field input,form .form-field textarea):hover{outline-color:var(--navbarBg);outline-width:1.75px}:is(form .form-field input,form .form-field textarea)[type=radio],:is(form .form-field input,form .form-field textarea)[type=checkbox]{outline:none}:is(form .form-field input,form .form-field textarea)[type=checkbox]~.error-msg{flex-basis:100%}:is(form .form-field input,form .form-field textarea):user-invalid{outline-color:var(--red)}form .form-field textarea{box-sizing:content-box;height:2.5lh;line-height:var(--para-space);resize:none}form>.form-field>label,form legend{display:flex;gap:var(--lb-gap);font-size:var(--sm)}:is(form>.form-field>label,form legend):after{content:"*";color:var(--navbarBg)}form fieldset{display:inherit;gap:inherit;row-gap:var(--ff-gap);grid-template-columns:inherit;padding-top:var(--ff-gap);border:none}form fieldset>.form-field{position:relative;padding:var(--input-pg);background-color:var(--white);border-radius:var(--b-rad);outline:var(--outline)}form fieldset>.form-field label:after{content:"";position:absolute;inset:0}form fieldset>.form-field:has(:checked){background-color:var(--mainBg);outline-color:var(--navbarBg)}form button{padding:var(--input-pg);border-radius:var(--b-rad);background-color:var(--navbarBg);color:#fff}form button:focus-visible{background-color:var(--navlinkBg)}form button:hover{background-color:var(--navlinkBg)}form button:disabled{cursor:not-allowed}form .error-msg{display:none}form>:has(:user-invalid)>.error-msg{display:block;color:var(--red);font-size:var(--sm)}@media screen and (max-width:525px){:root{--footer-dir: column;--success-width: 20rem}form :has(>label){grid-column:span 2}}@media screen and (max-width:375px){:root{--fb-margin: 2rem;--ff-gap: .5rem;--form-pg: 1rem;--form-width: 100%;--g-gap: 1rem 0rem;--lb-gap: .25rem;--success-width: 90%}}@keyframes move-down{25%,to{top:2rem}}
