:root {
	--bg-ligh: #DEF;
	--bg-norm: #ACF;
	--bg-dark: #88F;
	--bg-acc1: #A00;
	--bg-acc2: #FB4;
	--fg-ligh: #25555C;
	--fg-norm: #000;
	--fg-emph: #700;
	--fg-posi: #086000; /* For normal background, use bold or big text due to contrast. */
	--fg-acc1: #FFF;
	--fg-acc2: #000;
	--sp-XL: 2.618rem;
	--sp-L: 1.618rem;
	--sp-M: 1rem;
	--sp-S: .618rem;
	--sp-XS: .382rem;
	--med-content-width: 50rem;
	--max-content-width: 70rem;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: sans-serif;
	color: var(--fg-norm);
	background: var(--bg-norm);
}
main {
	flex: 1 0 fit-content;
	max-width: var(--med-content-width);
	width: 100%;
	gap: var(--sp-L);
	display: flex;
	flex-direction: column;
}
footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-M);
}
section {
	display: flex;
	flex-direction: column;
}
div {
	display: flex;
	flex-wrap: wrap;
}
form {
	gap: var(--sp-M);
	display: flex;
	flex-direction: column;
}
h1 {
	font-size: 2rem;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.25rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1rem;
}
a {
	color: var(--fg-emph);
}
button, input, select, textarea {
	border: .125em solid var(--fg-norm);
	padding: var(--sp-XS) var(--sp-S);
	background: var(--bg-ligh);
	transition: border-color .2s ease-out,
				color .2s ease-out,
				background .2s ease-out;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	width: fit-content;
	border-color: var(--bg-acc1);
	color: var(--fg-acc1);
	background: var(--bg-acc1);
}
input::placeholder, textarea::placeholder {
	color: var(--fg-ligh);
}
button:disabled, input:disabled, select:disabled, textarea:disabled, form:invalid input[type="submit"] {
	border-color: var(--fg-norm);
	color: var(--bg-ligh);
	background: var(--fg-norm);
}
input:enabled:hover, select:enabled:hover, textarea:enabled:hover,
input:focus, select:focus, textarea:focus {
	border-color: var(--fg-emph);
}
button:enabled:hover, input[type="button"]:enabled:hover, input[type="reset"]:enabled:hover, form:valid input[type="submit"]:enabled:hover,
button:focus, input[type="button"]:focus, input[type="reset"]:focus, form:valid input[type="submit"]:focus {
	border-color: var(--bg-acc2);
	color: var(--fg-acc2);
	background: var(--bg-acc2);
}