Move styles out into their own files to reduce clutter in the main html file.

low-contrast.css

@@ -0,0 +1,61 @@
+:root {
+	/*Fallback is a thing with the var() function
+	https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function
+	*/
+	--main-bg-color: #adadad;
+	--alt-bg-color: #e6e6e6;
+	--main-font-color: #134e13;
+	--disabled-bg-color: #666666;
+	--border-style: 0.25rem outset pink;
+}
+body {
+	background-color: var(--main-bg-color);
+	color: var(--main-font-color);
+}
+
+textarea, input {
+	background-color: #a6a6a6;
+	color: var(--main-font-color);
+}
+
+input[type=checkbox] {
+	appearance: none;
+	
+	border: 2px solid black;
+}
+
+input[type=checkbox]:checked {
+	content: 'X';
+}
+
+/*Override the default radio button*/
+input[type=radio] {
+	appearance: none;
+
+	border-radius: 50%;
+	border: 2px solid var(--main-bg-color);
+	transition: 0.2s all linear;
+}
+
+input[type=radio]:checked {
+	background-color: black;
+	border: 2px solid var(--main-bg-color);
+}
+/*End Override the default radio button*/
+
+input[type=button] {
+	border: var(--border-style);
+}
+
+/*On button press / hold*/
+input[type=button]:active {
+	border: 3px solid var(--alt-bg-color);
+}
+
+::placeholder {
+	color: var(--main-font-color);
+}
+
+*:disabled {
+	background-color: var(--disabled-bg-color);
+}