header {
	text-align: center;
	margin-bottom: 0.5em;
	padding: 2em;

	& h1 {
		margin-bottom: 0;
	}

	& em {
		font-family: serif;
	}

	& a {
		&:link {
			color: #000000;
			text-decoration: none;
		}
		&:visited { color: #000000; }
	}
}

body {
	background-color: #c5c5c5;
	font-family: sans-serif;
	text-align: left;
	padding: 0;
	margin: 0;

	line-height: 1.5;

	& li {
		margin-bottom: 0.5em;
	}
}

@media only screen and (min-width: 1024px) {
	body {
		max-width: 600px;
		margin: 0 auto;
		padding: 0;
	}

	header {
		padding: 0;
	}
}

a {
	&:link { color: #d51392; }
	&:visited { color: #820e5a; }
}

main {
	background-color: #eaeaea;
	padding: 2em;
}

img {
	max-width: 100%;
}

footer {
	padding: 0;
	margin-bottom: 2em;
	text-align: center;

	& h2 { display: none; }
	& ul { padding: 0; }
	& li {
		display: inline;
		&:not(:first-child)::before {
			content: ' | '
		}
	}
}

body.darkmode {
	background-color: #303030;
	color: #ffffff;

	& a:link { color: #ff8ed8; }
	& a:visited { color: #ba2286; }
	& header {
		a:link { color: #ffffff; }
		a:visited { color: #ffffff; }
	}
	& .invert-dark {
		filter: invert(1);
	}
	& main {
		background-color: #393939;
	}
}

.right {
	text-align: right;
}