body {
	font-family: sans-serif ;
}

main {
	max-width: 800px ;
	margin: auto ;
}

img {
	max-width: 100% ;
}

header h1 {
	text-align: center ;
}

footer {
	text-align: center ;
	clear: both ;
}

a {
	text-decoration: none;
}

.imgfig img {
	margin: auto;
	display: block;
}

figcaption {
	text-align: center;
	display: block;
	font-style: italic;
}

pre {
	padding: 10px;
	overflow: auto;
}

/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	body {
		background: #151515;
		color: azure;
	}

	article a, header>a, footer>a {
		color: #89bcff;
	}

	:not(pre) > code {
		background-color: #272822;
	}
}

/* Light mode */
@media (prefers-color-scheme: light) {
	article a, header>a, footer>a {
		color: #17a;
	}

	:not(pre) > code {
		background-color: #eee;
	}
}

:not(pre) > code {
	padding: 0.2em 0.4em;
}

nav > ul {
	background: #89bcff;
	margin: 0 auto;
	list-style: none;
	font-weight: bold;
	padding: 0.5em 0;
}

nav > ul > li {
	display: inline;
}

nav > ul > li > a {
	color: white;
	padding: 0.4em 0.8em;
	font-size: 20px;
}

nav > ul > li > a:hover {
	background: #679add;
}