@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
	/*
	LIGHT:
	 2^(x + 2)
	-----------
	    10
	*/
	--margin-xs: 0.4rem;
	--margin-s: 0.566rem;
	--margin-m: 0.8rem;
	--margin-l: 1.131rem;
	--margin-xl: 1.6rem;
	--margin-xxl: 2.263rem;

	--color-primary: #d3ffda;
	--color-primary-dim: #0b5918;
	--color-normal: #fbfbfb;
	--color-normal-dim: #2f3431;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	color: var(--color-normal);
	background-color: var(--color-normal-dim);
	font-family: "Inter", "Roboto", "Arial", sans-serif;
	line-height: 1.5;
}

nav {
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	z-index: 999999999;
	border-bottom: var(--margin-xs) solid var(--color-primary);
	background-color: color-mix(in srgb, var(--color-normal-dim) 50%, transparent);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

span#nav_left > a {
	float: left;
}

span#nav_right > a {
	float: right;
}

nav > span > a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: var(--margin-m);
	color: var(--color-normal);
}

a {
	color: var(--color-primary);
}

nav > span > a:link:hover {
	text-decoration: underline;
}

nav > span > a#active {
	color: var(--color-primary-dim);
	background-color: var(--color-primary);
	border-radius: var(--margin-s) var(--margin-s) 0 0;
}

div#page_content {
	margin-top: calc(var(--margin-m) * 2 + var(--margin-xs) + var(--margin-s));
	padding: var(--margin-l);
}

h1 {
	margin-top: 0;
	margin-bottom: var(--margin-l);
}

h2 {
	margin-top: 0;
	margin-bottom: var(--margin-m);
}

h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: var(--margin-s);
}

p {
	text-align: justify;
	margin-top: 0;
	margin-bottom: var(--margin-m);
}