:root * {
  font-family: sans-serif;
  font-size: 10pt;
}

input, textarea {
  border: 1px solid gray;
  border-radius: 4px;
  padding: 4px;
  width: 100%;
}

input[type="submit"] {
  width: 100px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 300px;
}

.error {
	border: 5px solid red;
}

/* form control (required for validation) */
form:is(.form-validated) :is(input, textarea):invalid {
  border: 1px solid red;
}

.form-error {
  display: none;
  color: red;
  font-size: 8pt;
}

.form-control:is(.form-validated) :is(input, textarea):invalid + .form-error {
  display: block;
}