:root {
	--bright: #c0c0c0;
	--dark: #404040;
	--gray: #808080;
	--red: #ec2965;
	--orange: #db4c23;
	--gold: #b56b00;
	--yellow: #818100;
	--green: #169010;
	--mint: #009650;
	--cyan: #009899;
	--sky: #0096d5;
	--blue: #0085ff;
	--violet: #3975f7;
	--purple: #8b64e5;
	--magenta: #d43caf;

	--site-title-fg: var(--mint);
	--navlink-fg: var(--cyan);
	--article-title-fg: var(--sky);
	--article-link-fg: var(--violet);
	--link-fg: var(--purple);
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-bg: black;
		--main-fg: var(--bright);
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--main-bg: white;
		--main-fg: var(--dark);
	}
}

.header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 1rem;
}

.site-title {
	text-align: center;
	flex: 1 0;
}

.site-title > .title {
	color: var(--site-title-fg);
}

nav {
	flex: 10 1 auto;
	font-size: 1.125rem;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nav-link {
	flex: 1;
	text-align: center;
	color: var(--navlink-fg);
}

.title {
	text-align: center;
	color: var(--article-title-fg);
}

.page {
	text-align: justify;
	margin: 0 auto;
	max-width: 80ex;
}

.links {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.entry {
	flex: 1 0 auto;
	max-width: 80ex;
	padding: 0.5rem 0;
	margin: 0 0.5rem;
	text-align: justify;
}

.entry > .title > a {
	color: var(--article-link-fg);
}

.meta {
	padding: 2rem 0 0 0;
	display: flex;
	justify-content: space-around;
}

.footer {
	text-align: center;
	padding: 0.5rem;
	font-size: 0.875rem;
}

span.date {
	display: block;
}

h1 {
	padding: 0.5rem 0 0 0;
	font-size: 1.5rem;
}

h2 {
	padding: 0.5rem 0 0 0;
	font-size: 1.375rem;
}

h3 {
	padding: 0.5rem 0 0 0;
	font-size: 1.25rem;
}

h4 {
	padding: 0.5rem 0 0 0;
	font-size: 1.125rem;
}

h5 {
	padding: 0.5rem 0 0 0;
	font-size: 1rem;
}

p {
	font-size: 1rem;
}

h6 {
	padding: 0.5rem 0 0 0;
	font-size: 0.875rem;
}

body {
	background: var(--main-bg);
	color: var(--main-fg);
}

body a {
	color: var(--link-fg);
	text-decoration: none;
}