: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;
	--control-disabled: #000000;

	--border-style: var(--default-border-thickness) solid var(--alt-bg-color);
	--border-focus-style: var(--default-border-thickness) solid var(--main-font-color);
	--border-disabled-style: var(--default-border-thickness) solid var(--control-disabled);
}

body {
	background-color: var(--main-bg-color);
	color: var(--main-font-color);
}

textarea, input {
	background-color: #a6a6a6;
	color: var(--main-font-color);
}

input[type="radio"], input[type="checkbox"] {
	border: var(--border-style);
}

input[type="radio"]:focus, input[type="checkbox"]:focus {
	border: var(--border-focus-style);
}

/* Color the check mark in the checkbox */
input[type=checkbox]::before {
	/* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */
	/* Source: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state */
	/* Which references this link: https://dev.to/alvaromontoro/comment/1214h */
	box-shadow: inset 1em 1em var(--main-font-color);
}

/* Inner circle to indicate a checked radio button */
input[type="radio"]::before {
	box-shadow: inset 1rem 1rem var(--main-font-color);
}

/*On button press / hold*/
input[type="button"]:active {
	border: 3px solid var(--alt-bg-color);
}

::placeholder {
	color: var(--main-font-color);
}

*:disabled, input:disabled {
	background-color: var(--disabled-bg-color);
	border: var(--border-disabled-style);
}