form label {
	display: block;
	margin-top: 1rem;
	margin-bottom: .5rem;
	font-weight: bold;
}

form input,
form textarea,
form button {
	display: block;
	border-radius: .25rem;
	border-color: var(--color-accent);
}

form input,
form textarea {
	width: 100%;
}

input:user-invalid,
textarea:user-invalid {
	border-color: var(--color-red);
	outline: .2rem solid var(--color-red);
	outline-offset: .2rem;
}

input:user-invalid:focus-visible,
textarea:user-invalid:focus-visible {
	outline: .1rem solid var(--color-accent);
	outline-offset: .1rem;
}

.error {
	margin-top: .5rem;
	visibility: hidden;
}

input:user-invalid + .error,
textarea:user-invalid + .error {
	visibility: visible;
}

form button {
	padding: 0 .5rem;
	margin: 1rem auto;
}

.name-email {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (max-width: 650px) {
	.name-email {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.red {
	color: var(--color-red);
}