:root {
	--bg-ligh: #222;
	--bg-norm: #111111f3;
	--bg-dark: #000;
	--bg-acc1: #29F;
	--bg-acc2: #88F;
	--fg-emph: #B9F;
	--fg-norm: #FFF;
	--fg-dark: #BBB;
	--fg-acc1: #000;
	--fg-acc2: #000;
	--sp-XS: .382rem;
	--sp-S: .618rem;
	--sp-M: 1rem;
	--sp-L: 1.618rem;
	--sp-XL: 2.618rem;
	--sp-XXL: 4.236rem;
	--max-width-M: 50rem;
	--max-width-L: 70rem;
	--nav-icon-width-M: 9rem;
	--nav-icon-width-L: 13rem;
	--nav-transition-duration: .3s;
}
@font-face {
	src: url("/assets/inter-variable.ttf");
	font-family: "inter";
}
@font-face {
	src: url("/assets/inter-variable-italic.ttf");
	font-family: "inter";
	font-style: italic;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "inter", sans-serif;
	color: var(--fg-norm);
	background: var(--bg-norm);
}
#background {
	position: fixed;
	min-width: 100vw;
	min-height: 100vh;
	z-index: -1;
	object-fit: cover;
}
h1 {
	width: 100vw;
	padding-bottom: var(--sp-L);
	text-align: center;
	background: linear-gradient(to top, #0000, #0009 var(--sp-L), var(--bg-norm) var(--sp-XL));
}
main {
	flex: 1 0 fit-content;
	max-width: var(--max-width-M);
	width: 100%;
	padding: 0 var(--sp-M) calc(2 * var(--nav-icon-width-L)) var(--sp-M);
	gap: var(--sp-L);
	display: flex;
	flex-direction: column;
}
footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	overflow-y: hidden; /* necessary for preventing buggy overflow during animation */
}
#checkbox-navigation {
	position: absolute;
	z-index: -1;
	opacity: 0;
	justify-self: center;
	align-self: center;
}
#checkbox-navigation:focus-visible ~ label {
	outline: .125rem solid var(--fg-norm);
	outline-offset: -.125rem;
}
#checkbox-navigation:checked ~ label {
	width: 100%;
	background: linear-gradient(#0606060d 1%, var(--bg-dark) 99%);
}
#checkbox-navigation:checked ~ label img {
	transform: rotate(180deg);
}
#checkbox-navigation:checked ~ nav {
	width: 100%;
}
#checkbox-navigation:not(:checked) ~ nav {
	visibility: hidden;
	opacity: 0;
}
footer label {
	width: var(--nav-icon-width-M);
	height: var(--nav-icon-width-M);
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(circle closest-side, #000F, rgba(0, 0, 0, 0.46) calc(100% - 2rem), #0000);
	transition: width var(--nav-transition-duration), background var(--nav-transition-duration);
}
footer img {
	transition: transform var(--nav-transition-duration);
}
footer nav {
	position: fixed; 
	width: var(--nav-icon-width-M);
	margin-bottom: var(--nav-icon-width-M);
	padding: var(--sp-M) var(--sp-M);
	gap: var(--sp-M);
	font-size: 1.25rem;
	display: flex;
	flex-direction: column;
	text-align: center;
	visibility: visible;
	opacity: 1;
	background: var(--bg-dark);
	transition: width var(--nav-transition-duration), opacity var(--nav-transition-duration), visibility var(--nav-transition-duration);
}
footer a {
	flex-shrink: 1;
	min-width: 0;
	color: var(--fg-norm);
}
@media (min-width: 50rem) {
	footer {
		padding-bottom: var(--sp-XXL);
		flex-direction: column;
	}
	footer label {
		width: var(--nav-icon-width-L);
		height: var(--nav-icon-width-L);
	}
	footer nav {
		width: var(--nav-icon-width-L);
		height: var(--sp-XXL);
		flex-direction: row;
		margin-bottom: 0;
		margin-top: var(--nav-icon-width-L);
		justify-content: space-evenly;
	}
}
section {
	display: flex;
	flex-direction: column;
}
div {
	gap: var(--sp-M);
	display: flex;
	flex-wrap: wrap;
}
form {
	gap: var(--sp-M);
	display: flex;
	flex-direction: column;
}
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: .125em 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);
}