:root {
	--bg-ligh: #333;
	--bg-norm: #222;
	--bg-dark: #111;
	--bg-acc1: #F82;
	--bg-acc2: #DDD;
	--bg-acc3: #F55;
	--bg-acc4: #FB0;
	--fg-emph: #FFF;
	--fg-norm: #EEE;
	--fg-dark: #999;
	--fg-acc1: #000;
	--fg-acc2: #000;
	--fg-acc3: #000;
	--fg-acc4: #000;
	--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 {
	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) 0 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: 1.625rem;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.375rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.125rem;
}
h6 {
	font-size: 1rem;
}
@media screen and (min-width: 50rem) {
	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;
	font-size: 1.25rem;
	font-weight: bold;
	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-visible, textarea:focus-visible, select:focus-visible {
	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-visible, input[type=button]:focus-visible, input[type=reset]:focus-visible, input[type=submit]:focus-visible {
	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-visible, form:invalid input[type=submit]:focus-visible {
	color: var(--fg-acc2);
	background: var(--bg-acc2);
}