:root {
	--height_header: 3em;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

nav {
	width: 100%;

	margin: 0;

	height: var(--height_header);
}

#nav-links {
	display: flex;
	font-size: 1.2em;
	background-color: var(--color_ui);
	z-index: 10;
}

@media (min-width: 768px) {
	#nav-links {
		flex-direction: row;
		align-items: center;
		height: 100%;
	}
	#nav-links a {
		margin: 0 1em;
	}

	#show-nav-btn {
		display: none;

	}
}

@media (max-width: 768px) {
	#nav-links {
		flex-direction: column;
		align-items: center;

		position: fixed;
		left: 0;
		top: 2em;

		width: 100%;
		display: none;
	}

	#nav-links a {
		width: 100%;
		text-align: center;
		padding: 1em 0;
		border-bottom: 1px solid var(--color_ui_text);

	}

	#show-nav-btn {


	}
}

#nav-links.is-visible {
	display: flex;

}

#show-nav-btn {
	height: 2em;
	width: 2em;
	margin: 0.25em;
	padding: 0;
	background-image: url('/static/icons/nav-light.png');
	background-size: contain;
	border: none;
}

main {
	margin: 0;
	width: 100%;
	max-width: 800px;
	min-height: calc(100vh - var(--height_header));
}

footer {
	display: none;
}