:root {
	--text-color: #2a2e3a;
	--link-color: #2b6fc0;
	--link-visited: #7b5ea7;
	--chrome-text: rgba(255, 255, 255, 0.85);
	--header-gradient-top: #3b8de0;
	--header-gradient-bottom: #2b6fc0;
	--nav-gradient-top: #e8a820;
	--nav-gradient-bottom: #d49618;
	--nav-border: rgba(0, 0, 0, 0.2);
	--tagline-color: rgba(255, 255, 255, 0.55);
	--dateline-color: rgba(43, 111, 192, 0.65);
	--separator-color: #d4dce8;
	--footer-background: #1e2430;
	--footer-text: #8894a0;
	--footer-link: #aeb8c4;
	--footer-link-hover: #d4dde8;
	--footer-border: #10141a;
	--highlight-shadow: #fff;
	--nav-shadow: #fff;
	--body-background: #f5f8fc;
	--content-background: #f5f8fc;
	--content-width: 650px;
	--blockquote-border: var(--dateline-color);
	--blockquote-color: rgba(0, 0, 0, 0.5);
	--secondary-text: rgba(0, 0, 0, 0.45);
	--pre-background: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #c4ccd5;
		--body-background: #101418;
		--content-background: #181c22;
		--link-color: #5c9ce0;
		--link-visited: #9a7cc8;
		--header-gradient-top: #1e4878;
		--header-gradient-bottom: #163660;
		--nav-gradient-top: #8a6a10;
		--nav-gradient-bottom: #70560c;
		--nav-border: #000;
		--tagline-color: rgba(255, 255, 255, 0.45);
		--dateline-color: rgba(92, 156, 224, 0.6);
		--separator-color: #282e38;
		--footer-background: #101418;
		--footer-text: #667080;
		--footer-link: #8894a0;
		--footer-link-hover: #c4ccd5;
		--footer-border: #080a0e;
		--highlight-shadow: transparent;
		--nav-shadow: transparent;
		--blockquote-color: rgba(255, 255, 255, 0.5);
		--secondary-text: rgba(255, 255, 255, 0.45);
		--pre-background: rgba(255, 255, 255, 0.05);
	}
}

/* Reset and base */

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-color);
	background-color: var(--body-background);
}
a {
	color: var(--link-color);
	text-underline-offset: 3px;
}
a:visited {
	color: var(--link-visited);
}
a:hover {
	text-decoration: underline;
}
h1 {
	line-height: 1.2;
}
pre {
	overflow-x: auto;
	background-color: var(--pre-background);
	padding: 12px 16px;
	border-radius: 6px;
}
/* Header */

#header-background {
	background: linear-gradient(to bottom, var(--header-gradient-top), var(--header-gradient-bottom));
}
header {
	color: #fff;
	padding: 18px 2px;
	max-width: var(--content-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
header img {
	display: block;
	border-radius: 12px;
}
header h1 {
	margin: 0;
	font-size: 20px;
	font-weight: bold;
}
header h1 a {
	color: var(--chrome-text);
	text-decoration: none;
}
header h1 a:visited {
	color: var(--chrome-text);
}
header h1 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.version-number {
	color: #ffd044;
	font-weight: bold;
}
header .tagline {
	margin: 0;
	font-size: 17px;
	color: var(--tagline-color);
}

/* Nav bar */

#topnav-background {
	background: linear-gradient(to bottom, var(--nav-gradient-top), var(--nav-gradient-bottom));
	border-bottom: 1px solid var(--nav-border);
	box-shadow: 0 1px 0 var(--nav-shadow);
}
#topnav {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 6px 2px;
	text-align: right;
	font-size: 17px;
	font-weight: bold;
}
#topnav a {
	color: var(--chrome-text);
	text-decoration: none;
	margin-left: 16px;
}
#topnav a:visited {
	color: var(--chrome-text);
}
#topnav a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Content area */

#content-background {
	background-color: var(--content-background);
}
main, .content-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding-top: 25px;
	padding-bottom: 46px;
}

article img {
	max-width: 100%;
	height: auto;
}

/* Separator */

.separator {
	height: 1px;
	background-color: var(--separator-color);
	box-shadow: 0 1px 0 var(--highlight-shadow);
	max-width: var(--content-width);
	margin: 39px auto 41px auto;
}

/* Blockquotes */

blockquote {
	color: var(--blockquote-color);
	border-left: 3px solid var(--blockquote-border);
	padding-left: 18px;
	margin: 0 0 4px 0;
	font-style: normal;
}
.quote-author {
	color: var(--secondary-text);
	font-size: 17px;
	margin: 0 0 24px 0;
}

.centeredimage {
	text-align: center;
}

.centeredtext {
	text-align: center;
}

.system-requirements {
	color: var(--secondary-text);
	font-size: 17px;
}

/* Footer */

#footer-background {
	background-color: var(--footer-background);
	border-top: 1px solid var(--footer-border);
}
footer {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 40px 2px 44px 2px;
	font-size: 17px;
	color: var(--footer-text);
	text-align: left;
}
footer a {
	color: var(--footer-link);
	text-underline-offset: 3px;
}
footer a:visited {
	color: var(--footer-link);
}
footer a:hover {
	color: var(--footer-link-hover);
}
footer p {
	margin: 0;
	line-height: 1.6;
}
footer p + p {
	margin-top: 20px;
}

/* Responsive */

@media (max-width: 700px) {
	header {
		padding: 14px 12px;
	}
	#topnav {
		padding: 4px 12px;
	}
	main, .content-inner {
		padding: 32px 12px 0 12px;
	}
	footer {
		padding: 12px 12px 24px 12px;
	}
}

@media (max-width: 480px) {
	header {
		padding: 10px 12px;
		gap: 8px;
	}
	header h1 {
		font-size: 17px;
	}
	header .tagline {
		font-size: 15px;
	}
	#topnav {
		font-size: 15px;
		padding: 2px 12px;
		text-align: left;
	}
	#topnav a {
		margin-left: 0;
		margin-right: 10px;
	}
	main, .content-inner {
		padding-top: 24px;
	}
}