:root {
	--bg-norm: #048;
	--bg-dark: #025;
	--bg-acc1: #F84;
	--bg-acc2: #025;
	--fg-emph: #F95;
	--fg-norm: #FEB;
	--fg-dark: #889;
	--fg-acc1: #233;
	--fg-acc2: #FEB;
	--sp-XS: .382rem;
	--sp-S: .618rem;
	--sp-M: 1rem;
	--sp-L: 1.618rem;
	--sp-XL: 2.618rem;
	--sp-XXL: 4.236rem;
	--max-width-S: 30rem;
	--max-width-M: 50rem;
	--max-width-L: 70rem;
}
body {
	min-height: 100vh;
	line-height: 1.75;
	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(--max-width-M);
	width: 100%;
	padding: 0 var(--sp-M) var(--sp-XXL) var(--sp-M);
	gap: var(--sp-L);
	display: flex;
	flex-direction: column;
}
section {
	display: flex;
	flex-direction: column;
}
div {
	display: flex;
	flex-wrap: wrap;
}
form {
	display: flex;
	flex-direction: column;
}
iframe {
	border: none;
}
h1 {
	font-size: 2.25rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.75rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1rem;
}
a {
	color: var(--fg-emph);
}
input, textarea, select {
	border: .125rem solid var(--fg-dark);
	padding: var(--sp-XS) var(--sp-S);
	background: var(--bg-dark);
	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;
	padding: var(--sp-XS) var(--sp-S);
	border: none;
	color: var(--fg-acc1);
	background: var(--bg-acc1);
	transition: color .2s ease-out,
				background .2s ease-out;
}
input::placeholder, textarea::placeholder {
	color: var(--fg-dark);
}
input:enabled:hover, textarea:enabled:hover, select:enabled:hover,
input:focus, textarea:focus, select:focus {
	border-color: var(--fg-emph);
}
button:enabled:hover, input[type=button]:enabled:hover, input[type=reset]:enabled:hover, input[type=submit]:enabled:hover,
button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus {
	color: var(--fg-acc2);
	background: var(--bg-acc2);
}
input:disabled, textarea:disabled, select:disabled {
	cursor: not-allowed;
	border-color: var(--bg-ligh);
	color: var(--fg-dark);
	background: var(--bg-norm);
}
button:disabled, input[type=button]:disabled, input[type=reset]:disabled, input[type=submit]:disabled {
	cursor: not-allowed;
	color: var(--fg-dark);
	background: var(--bg-norm);
}
form:invalid button[type=submit]:enabled, form:invalid input[type=submit]:enabled {
	color: var(--bg-dark);
	background: var(--fg-dark);
}
form:invalid button[type=submit]:enabled:hover, form:invalid input[type=submit]:enabled:hover,
form:invalid button[type=submit]:focus, form:invalid input[type=submit]:focus {
	color: var(--fg-acc2);
	background: var(--bg-acc2);
}