.container-form {
    background-color: var(--clr-surface-a10);
    border-radius: 1rem;
    box-shadow: 0 0 .5rem oklch(0% 0 0 / 0.6);
    width: 90%;
    max-width: 50rem;
    margin-block: 5rem;
    margin-inline: auto;
    padding-block: 2.5rem;
    padding-inline: 2.5rem;
    text-align: center;
	
	h1 {
    color: var(--clr-primary-a0);
	}

    .message {
        margin-block: 1.5rem;
        }

    label {
        display: block;
        margin-bottom: .5rem;
        }
}

.input-text,
textarea {
    width: 100%;
    max-width: 18.75rem;
    margin-block-start: 0;
    margin-block-end: 1rem;
    margin-inline: auto;
    display: block;
    padding-block: .5rem;
    padding-inline: .625rem;
    border-radius: .5rem;
    border: none;
    background-color: var(--clr-surface-a20);
    color: var(--clr-light-a0);
    text-align: center;
}

.input-text:focus,
textarea:focus {
    outline: 2px solid var(--clr-primary);
}

input[type="submit"] {
    background-color: var(--clr-primary-a0);
    border: none;
    color: var(--clr-dark-a0);
    padding-block: .5rem;
    padding-inline: 1.25rem;
    border-radius: .4rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}


input[type="submit"]:hover,&:focus-visible {
    background-color: var(--clr-primary-a10);
}

input[type="checkbox"] {
	  accent-color: var(--clr-primary-a0);
	  cursor: pointer;
}


.message.error {
    color: var(--clr-danger-a10);
    font-size: 0.8rem;
    display: block;
    margin-block-end: .75rem;
}

@media (min-width: 800px) {
	fieldset {
		width : 50%;
		margin-left: auto;
		margin-right: auto;
	}
}

legend {
	padding-inline: .5rem;
	margin-block-end: 1rem;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}