main.contact>section{grid-area:content;display:grid;grid-row-gap:2rem;grid-template-areas:"img""h2""text""contactForm"}@media (min-width:769px){main.contact>section{grid-template-areas:"h2 h2 h2""text text text""contactForm contactForm contactForm"}}main.contact>section h2{grid-area:h2;text-align:center}@media (min-width:769px){main.contact>section h2{font-size:1.5rem}}main.contact>section .contactForm{padding:1rem;justify-self:center;grid-area:contactForm;display:grid;grid-template-areas:"name""email""tel""website""textarea""checkbox""submit";gap:1rem}@media (min-width:769px){main.contact>section .contactForm{max-width:50rem;padding:1.5rem;grid-template-areas:"name email""tel website""textarea textarea""checkbox checkbox"". submit"}}main.contact>section .contactForm .name{grid-area:name}main.contact>section .contactForm .email{grid-area:email}main.contact>section .contactForm .tel{grid-area:tel}main.contact>section .contactForm .website{grid-area:website}main.contact>section .contactForm .textarea{grid-area:textarea}main.contact>section .contactForm .checkbox{grid-area:checkbox}main.contact>section .contactForm .submit{grid-area:submit}main.contact>section .text{grid-area:text;text-align:center;justify-self:center}main.contact>section label:not(.hide-focus-effect)::after{background:#23232c}main.contact>section .contactForm label{display:grid;grid-template-areas:"span""input"}main.contact>section .contactForm label.checkbox{grid-template-areas:"input span"}main.contact>section .contactForm label.textarea{grid-template-areas:"span messageCount""input input"}main.contact>section .contactForm label span{grid-area:span;font-size:.8em}main.contact>section .contactForm label span.messageCount{white-space:nowrap;grid-area:messageCount;justify-self:end}main.contact>section .contactForm label input{height:2.5em;padding:.25em .5em;grid-area:input}main.contact>section .contactForm label button,main.contact>section .contactForm label textarea{grid-area:input}main.contact>section .contactForm label textarea{padding-left:.5em;padding-right:.5em}main.contact>section .contactForm label:not(.checkbox) span{font-size:.8em;color:#666}main.contact>section .contactForm label.checkbox{grid-column-gap:1rem;font-size:.9rem;color:#666}main.contact>section .contactForm label.checkbox a{text-decoration:underline}main.contact>section .contactForm label.submit{width:100%}@media (min-width:769px){main.contact>section .contactForm label.submit{justify-self:end}}main.contact>section .contactForm label.submit button{transition:background-color .5s ease;color:#fff;font-weight:500;font-size:.7em;text-align:center;line-height:60px;min-width:200px;display:inline-block;padding:0 10px;border-radius:0;border:0;background-color:#23232c;cursor:pointer;position:relative;white-space:nowrap}main.contact>section .contactForm label.submit button:hover{background-color:#0f0f11}main.contact>section .contactForm input[type=checkbox]{height:1.5rem;width:1.5rem;align-self:center}main.contact>section .contactForm input:not([type=checkbox]){grid-area:input;height:3em;width:100%;padding:.25em 3em .25em .5em;border-bottom:1px solid #f2f2f4}main.contact>section .contactForm label input:not([type=checkbox])[pattern]+span:after,main.contact>section .contactForm label input:not([type=checkbox])[required]+span:after,main.contact>section .contactForm label textarea[required]+span:after{font-size:.9rem;position:absolute;content:"*"}main.contact>section .contactForm label:has(:valid) input:not([type=checkbox])[pattern]:not(:placeholder-shown)+span:after,main.contact>section .contactForm label:has(:valid) input:not([type=checkbox])[required]:not(:placeholder-shown)+span:after,main.contact>section .contactForm label:has(:valid) textarea[required]+span:after{color:green;content:"✔"}main.contact>section .contactForm textarea{min-height:8rem;max-height:16rem;width:100%;max-width:100%;white-space:break-spaces;word-break:break-all;overflow-y:auto;overflow-x:hidden;resize:none}