@font-face{font-family:"Karla";src:url(../../assets/fonts/Karla-VariableFont_wght.ttf),format("ttf");font-weight:400 700}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Karla",sans-serif;background-color:hsl(148,38%,91%);padding:2.75em 1.125em 0}.success-state{background-color:hsl(187,24%,22%);color:#fff;padding:1.125em;border-radius:.75em;margin-inline:auto;opacity:0;height:0;transition:opacity .3s ease-in-out,height .3s ease-in-out}.success-state.visible{opacity:1;height:auto}.success-state .title{display:flex;align-items:center;gap:.75em;margin-block:.5em .75em}main{background-color:#fff;padding:1.5em 1.75em;border-radius:.75em}h1{color:hsl(187,24%,22%);font-weight:700;margin-bottom:.75em}input,textarea,button{font-family:inherit;font-size:1rem;outline:none;transition:outline .3s ease-in-out}input:focus,textarea:focus,button:focus{outline:1px solid hsl(169,82%,27%)}label,.form__query-title{color:hsl(186,15%,59%);font-weight:700;font-size:1rem;margin-block-end:.5em}label span,.form__query-title span{color:hsl(169,82%,27%)}.form{display:grid;gap:.75em}.form__error{color:hsl(0,66%,54%);opacity:0;max-height:0;transition:opacity .3s ease,max-height .3s ease;overflow:hidden}.form__error.visible{opacity:1;max-height:100px}.form__username{display:grid}.form__fname,.form__lname,.form__email,.form__message{display:flex;flex-direction:column}.form__username{gap:.75em}.form__fname input,.form__lname input,.form__email input{border:1px solid hsl(169,82%,27%);padding:.75em;border-radius:.5em;outline:none;margin-block-end:.5em;transition:outline .3s ease-in}.form__fname input:focus,.form__fname input:active,.form__lname input:focus,.form__lname input:active,.form__email input:focus,.form__email input:active{outline:1px solid hsl(186,15%,59%)}.form__fname input:hover,.form__lname input:hover,.form__email input:hover{cursor:pointer;outline:1px solid hsl(186,15%,59%)}.form__query-group{display:grid;gap:.975em;margin-block:.975rem}.form__query-group label{color:hsl(169,82%,27%)}.form__query-radio{border:1px solid hsl(169,82%,27%);padding:.75em 1.75em;border-radius:.5em}.form__query-radio label{padding:.5em}.form__query-radio label:hover{cursor:pointer}.form__query-radio input{outline:none}.form__query-radio input:focus,.form__query-radio input:active{outline:1px solid hsl(186,15%,59%)}.form__message-text{border:1px solid hsl(169,82%,27%);padding:.75em;border-radius:.5em;outline:none;resize:none;min-height:200px;margin-block:.5em .975em;transition:outline .3s ease}.form__message-text:focus,.form__message-text:active{outline:1px solid hsl(186,15%,59%)}.form__checkbox{display:flex;flex-direction:column;gap:.75em}.form__checkbox div input{outline:none}.form__checkbox div input:focus,.form__checkbox div input:active{outline:1px solid hsl(169,82%,27%)}.form__checkbox div label{color:hsl(186,15%,59%);padding:.5em}.form__checkbox div label span{color:hsl(169,82%,27%)}.form__submit{background-color:hsl(169,82%,27%);color:#fff;border:none;border-radius:.5em;padding:.75em 1.5em;font-weight:700;margin-block:.75em;cursor:pointer;transition:background-color .3s ease}.form__submit:hover{background-color:hsl(187,24%,22%)}@media screen and (min-width: 768px){body{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;min-height:100svh}main{max-width:75%}.form__username{grid-template-columns:repeat(2, 1fr)}.form__query-group{grid-template-columns:repeat(2, 1fr)}.form__message-text{min-height:100px}}@media screen and (min-width: 992px){main{width:60%}}/*# sourceMappingURL=style.css.map */
