@import url('gentium.css');

:root {
	--color-secondary-bg: #181820;
	--color-primary-bg: #121218;
	--color-accent: #402058;
	--color-main: #e1e8f8;
}

html {
	background-color: var(--color-secondary-bg);
}

html, body {
	margin: 0;
}

.page {
	max-width: 60rem;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0 1.5rem;
	background-color: var(--color-primary-bg);
	color: var(--color-main);
	display: flex;
	gap: 1.5rem;
	font-family: Gentium, serif;
	font-size: 14pt;
}

.sidebar {
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;
	gap: 1.5rem;
	flex: 0 0 10rem;
}

@media (max-width: 800px) {
	.page {
		flex-direction: column;
	}

	.sidebar {
		flex-direction: row;
	}
}

.navigation-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navigation-list li {
	text-align: center;
}

.nav-entry {
	font-size: 1.2em;
}

.nav-entry-current {
	font-weight: bold;
}

.separator {
	border-right: 1px solid var(--color-main);
	border-bottom: 1px solid var(--color-main);
}

.friend-links {
	display: flex;
	justify-content: center;
	gap: 0.3em;
}

a, .accent {
	background-color: var(--color-accent);
	color: var(--color-main);
}

a.no-accent {
	background-color: unset;
	color: inherit;
}