#action-message.active { position: relative; padding: 2rem; border-radius: 1rem; margin: 2rem 2rem 3rem; box-shadow: var(--bg-dark) 1px 1px 5px,var(--bg-dark) -1px -1px 5px; margin-top: -1em;} #action-message.active::before { position: absolute; content: '!'; top: 0; left: 0; display: grid; justify-items: center; align-items: center; color: var(--white); font-weight: 600; font-size: 2rem; background-color: var(--color-main); aspect-ratio: 1; width: 3rem; border-radius: 50%; transform: translateX(-33%) translateY(-33%); } #action-message .project > li { list-style: none; margin-left: 1rem; margin-bottom: 2rem;} #action-message .project > li:last-child { margin-bottom: 0;} #action-message .project > li > ul > li { list-style: none; margin-left: 2rem; margin-bottom: 1rem;} #action-message .project > li > ul > li:first-child { margin-top: 1rem;}#action-message .project > li > ul > li:last-child { margin-bottom: 0;} @media screen and (min-width: 48em) {  #lastname { grid-area: lastname; } #firstname { grid-area: firstname; } #email { grid-area: email; } #company { grid-area: company; } #subject { grid-area: subject; } #action-message { grid-area: action-message; } #message { grid-area: message; } #legal { grid-area: legal; } #btn-contact { grid-area: submit; } .card-contact { padding: 5rem; } .card-contact h1 { font-size: 3.5rem; margin-bottom: 5rem; }}@media screen and (min-width: 62em) { }@media screen and (min-width: 75em) { }@media screen and (min-width: 87.5em) { }main { margin-top: 5rem; margin-bottom: 5rem;}main form .form-wrap.status { display: flex; flex-direction: column;} main form fieldset > p { margin-bottom: 2rem;} main form input.input-movable:not(.up):not([type="tel"]) { transition: .3s;} main form input.input-movable:not(.up):not([type="tel"])::placeholder { color: transparent; transition: .3s;} main form label:not(.label-up) { color: var(--text-light); font-weight: 200; margin-left: 0.3rem;} main form .check-wrap > p.error { color: var(--color-danger);} main form .check-wrap > p.valid { color: var(--color-success);} main.container > h1 { font-weight: 800; text-align: center;} main.container > p { color: var(--text-lighter); text-align: center; margin-bottom: 4rem;} form fieldset { display: flex; flex-direction: column; background-color: var(--white); border: none; padding: 3rem 2rem; } form fieldset:not(:last-child) { margin-bottom: 3rem;} form fieldset legend { display: block; width: 100%; color: var(--color-main); font-size: 2.1rem; padding-bottom: 1rem; margin-bottom: 3rem; border-bottom: .1rem solid var(--border-secondary);}.form-row { display: flex; justify-content: space-between;  align-items: flex-start; } .form-row .form-wrap { flex: 1;} .form-wrap { margin-right: 1em; }  main .h-main { font-size: 2.5rem; margin-bottom: 2.5rem;}main > .container > h1 { font-weight: 600; text-align: center;} #contact-form #message{ width: 100%;} #contact-form input.error { border-bottom: .1rem solid var(--color-danger) !important;} #contact-form textarea.error { border: .1rem solid var(--color-danger) !important;} #message-contact{ min-height: 10em;} .container.sm{ padding: 0;} #btn-contact{ width: max-content; margin-left: auto; margin-right: auto;} @media (max-width: 767px) {  .form-row { flex-direction: column; align-items: inherit; } .form-row .form-wrap { margin-right: 0; margin-bottom: 1rem;  }}