: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);
}