:root {
	--outline-color: #0056cc;
	--invalid-input-color: #ad0000;
	--valid-input-color: #006100;
	--info-color: #006400;
	--info-background-color: #e6ffe6;
	--info-border-color: #006400;
	--error-color: #800000;
	--error-background-color: #fbe9e7;
	--error-border-color: #800000;
}

[data-theme="dark"] {
	--outline-color: #3389ff;
	--invalid-input-color: #e03333;
	--valid-input-color: #339433;
	--info-color: #339733;
	--info-background-color: #b3ccb3;
	--info-border-color: #339733;
	--error-color: #b33333;
	--error-background-color: #c8b6b4;
	--error-border-color: #b33333;
}

.form {
	max-width: 25rem;
}

main .form label {
	display: block;
	margin-top: 0.625rem;
}

main .form input[type="text"],
main .form input[type="password"],
main .form textarea,
main .form select {
	width: 100%;
	padding: 0.5rem;
	margin-top: 0.3125rem;
	box-sizing: border-box;
}

main .form input[type="text"]:focus,
main .form input[type="password"]:focus,
main .form textarea:focus,
main .form select:focus {
	outline: 0.125rem solid var(--outline-color);
	outline-offset: 0.125rem;
	border-radius: 0.3125rem;
}

main .form input:invalid {
	border-color: var(--invalid-input-color);
}

main .form input:valid {
	border-color: var(--valid-input-color);
}

main .form button {
	margin-top: 0.9375rem;
	width: 100%;
}

main .info {
	color: var(--info-color);
	background-color: var(--info-background-color);
	padding: 0.625rem;
	margin-top: 0.625rem;
	border: 0.0625rem solid var(--info-border-color);
	border-radius: 0.3125rem;
	font-weight: bold;
}

main .error {
	color: var(--error-color);
	background-color: var(--error-background-color);
	padding: 0.625rem;
	margin-top: 0.625rem;
	border: 0.0625rem solid var(--error-border-color);
	border-radius: 0.3125rem;
	font-weight: bold;
}