*, ::before, ::after { box-sizing: border-box; }
* { margin: 0; }

@font-face {
	font-family: FiraCode;
	src: url('/res/FiraCode-Regular.ttf') format('truetype');
}

:root {
	--color-foreground: #A2AAB3;
	--color-background: #112A2A;
	--color-accent: #187A7A;
	--color-border: #001A1A;
	--color-success: #3AAA1F;
	--color-failure: #FB4324;
	--nav-closed: 3.9em;
	--nav-open: 12em;

	color: var(--color-foreground);
	background: var(--color-background);
	border-color: var(--color-border);
}

body {
	display: flex;
	flex-direction: row;
	min-height: 100vh;
	font-family: "FiraCode", sans-serif;
}

nav {
	width: var(--nav-closed);
	flex-shrink: 0;
}

.navlist {
	width: var(--nav-closed);
	height: 100%;
	position: fixed; 
	top: 0;
	left: 0;
	padding: 8px;
	background: var(--color-background);
	border-right: 3px solid var(--color-border);
	list-style: none;
	overflow: hidden;
	white-space: nowrap;
	z-index: 100;
	transition: width 300ms;
}
nav:hover .navlist {
	width: var(--nav-open);
}

.navlist li a {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5em;
	color: var(--color-foreground);
	font-size: 1.4em;
	text-decoration: none;
	gap: 20px;
}

.navlist li a.current {
	font-weight: bold;
	color: var(--color-success);
}

.navlist li:first-child a {
	font-weight: bold;
	color: var(--color-foreground);
	border-bottom: 2px solid var(--color-accent);
}

.navlist li a p { transition: color 300ms, transform 300ms; }
.navlist li a:hover p { color: var(--color-accent); }
.navlist li a:active p { transform: scale(90%); }

main {
	flex-grow: 1;
	padding: 16px;
}

footer {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 4px;
	margin: 4px;
	background: var(--color-border);
	border-radius: 4px;
	font-size: 0.8em;
	opacity: 30%;
	transition: opacity 300ms;
}
footer:hover { opacity: 80%; }
footer a { color: var(--color-foreground); }

h1, h2, h3 {
	margin: 0.6em 0.2em 0.4em 0.2em;
	width: fit-content;
	color: var(--color-accent);
}
h1::after {
	display: block;
	position: relative;
	top: -8px;
	content: '';
	margin: 2px 8px;
	border: 1px solid var(--color-accent);
	opacity: 40%;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.2em; }

a {
	color: var(--color-accent);
	text-decoration: underline;
}
a:visited { color: var(--color-accent); }

/* Mobile */
@media (max-width: 700px) {
	body {
		flex-direction: column;
	}

	nav {
		width: 100%;
		height: auto;
	}

	/* TODO: maybe rewrite into a hamburger menu? */
	.navlist {
		position: relative;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		border-right: none;
		border-bottom: 3px solid var(--color-border);
		padding: 4px;
	}
	nav:hover .navlist { width: 100%; }

	.navlist li a {
		font-size: 1.1em;
		padding: 0.5em 1em;
		gap: 10px;

	}
	.navlist li:first-child a {
		border-bottom: none;
		border-right: 2px solid var(--color-accent);
	}

	h1 { font-size: 1.6em; }
	h2 { font-size: 1.3em; }
	h3 { font-size: 1.1em; }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 1200px) {
	h1 { font-size: 1.8em; }
	h2 { font-size: 1.4em; }
	h3 { font-size: 1.1em; }
	main { padding: 12px; }
}