form stuff

css/form.css

@@ -0,0 +1,64 @@
+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);
+}

css/main.css

@@ -5,10 +5,13 @@
 	--color-light: #e4edf3;
 	--color-blue-dark: #0c436d;
 	--color-blue-light: #5ca6ce;
+	--color-red-light: #bb362a;
+	--color-red-dark: #b82e1f;
 
 	--color-text: light-dark(var(--color-dark), var(--color-light));
 	--color-bg: light-dark(var(--color-light), var(--color-dark));
 	--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
+	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */