*{margin:0;padding:0;box-sizing:border-box;font-family:"Karla",sans-serif}body{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:100vh;background-color:hsl(148,38%,91%)}h1{font-weight:700;color:hsl(187,24%,22%)}label,p,legend{font-size:1em;font-weight:400}label,legend{color:hsl(187,24%,22%)}fieldset{border:none}p.error__state{margin-top:8px;color:hsl(0,66%,54%)}section label:not(.checkbox__field label){display:block;margin-bottom:1em}main{margin:3rem 0}form{background-color:#fff;width:650px;padding:2em;border-radius:12px}form h1{margin-bottom:1em}form button{width:100%;padding:1em;border:none;border-radius:5px;background-color:hsl(169,82%,27%);color:#fff;font-size:1em;font-weight:400;cursor:pointer}form button:hover{background-color:hsl(170,78%,18%)}.names__fields{display:flex;justify-content:baseline;align-items:center;gap:1em;margin-bottom:1.5em}.names__fields div{width:100%}.names__fields input{width:100%;height:40px;padding:0 1em;font-size:1em;color:hsl(187,24%,22%);border-radius:5px;border:1px solid hsl(187,24%,22%);cursor:pointer}.names__fields input:focus,.names__fields input:hover{outline:2px solid hsl(169,82%,27%);border:none}.names__fields input.error__input__state{border:none;outline:2px solid hsl(0,66%,54%)}.names__fields input.error__input__state:hover,.names__fields input.error__input__state:focus{outline:2px solid hsl(0,66%,54%)}.email__field{margin-bottom:1.5em}.email__field input{width:100%;height:40px;padding:0 1em;font-size:1em;color:hsl(187,24%,22%);border-radius:5px;border:1px solid hsl(187,24%,22%);cursor:pointer}.email__field input:focus,.email__field input:hover{outline:2px solid hsl(169,82%,27%);border:none}.email__field input.error__input__state{border:none;outline:2px solid hsl(0,66%,54%)}.email__field input.error__input__state:hover,.email__field input.error__input__state:focus{outline:2px solid hsl(0,66%,54%)}fieldset{margin-bottom:1.5em}fieldset article{width:100%;display:flex;justify-content:baseline;align-items:center;gap:1em}fieldset legend{margin-bottom:1em}fieldset label{display:flex;justify-content:baseline;align-items:center;gap:12px;cursor:pointer}fieldset div{padding:12px 1em;border:1px solid hsl(187,24%,22%);border-radius:5px;width:100%;cursor:pointer}fieldset div:has(input:focus),fieldset div:has(input:checked){border:none;outline:2px solid hsl(169,82%,27%);background-color:hsl(148,38%,91%)}fieldset div input{width:20px;height:20px;accent-color:hsl(169,82%,27%);cursor:pointer}.message_field{margin-bottom:1.5em}.message_field textarea{width:100%;height:80px;padding:0 1em;font-size:1em;color:hsl(187,24%,22%);border-radius:5px;border:1px solid hsl(187,24%,22%);cursor:pointer;padding:8px 1em}.message_field textarea:focus,.message_field textarea:hover{outline:2px solid hsl(169,82%,27%);border:none}.message_field textarea.error__input__state{border:none;outline:2px solid hsl(0,66%,54%)}.message_field textarea.error__input__state:hover,.message_field textarea.error__input__state:focus{outline:2px solid hsl(0,66%,54%)}.checkbox__field{margin-bottom:2em}.checkbox__field label{display:flex;justify-content:baseline;align-items:center;gap:8px;cursor:pointer}.checkbox__field input{accent-color:hsl(169,82%,27%);width:15px;height:15px;cursor:pointer}.success__message{z-index:1000;background-color:hsl(169,82%,27%);color:#fff;padding:8px 1em;width:500px;margin:2em auto;border-radius:5px;position:fixed;top:0%;left:50%;transition:transform .2s ease-in-out,opacity .3s ease;transform:translate(-50%, -100%);visibility:hidden;opacity:0}.success__message.show{transform:translate(-50%, 0%);visibility:visible;opacity:1}.success__message.remove{transform:translate(-50%, -100%);visibility:hidden;opacity:0}.success__message header{display:flex;justify-content:baseline;align-items:center;gap:8px;margin-bottom:12px}.success__message p{margin:0}@media screen and (max-width: 48rem){main{width:100%}form{width:90%;margin:0 auto}}@media screen and (max-width: 40rem){.names__fields,.radio__fields article{flex-direction:column;gap:1.5em}.success__message{width:90%}form{padding:1em}}.attribution{font-size:11px;text-align:center}.attribution a{color:hsl(169,82%,27%)}/*# sourceMappingURL=styles.css.map */