:root {
	color-scheme: light dark;
	--blue: hsl(217deg 100% 69%);
	--dark-blue: #000258;
	--header-blue: var(--blue);
	--header-dark-blue: var(--dark-blue);
	--separator-gray: #dddddd;
	--foreground-link: hsl(217deg 100% 50%);
	--visited-link: hsl(279deg 100% 40%);
	--dark-gray: #292929;
	--very-light-gray: #f9f9f9;
	--light-gray: #e4e4e4;
	--middle-gray: #cccccc;
	--background: white;
	--foreground: black;
	--term-background: var(--light-gray);
	--term-foreground: black;
	--odd-table-background: #f8f8f8;
	--odd-table-foreground: black;
	--mastodon-bg: white;
	--mastodon-border: #563aac;
	--note-background: #ddd;
	--note-border: #ccc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--dark-blue: #000258;
		--header-blue: #000a36;
		--header-dark-blue: var(--blue);
		--separator-gray: #dddddd;
		--foreground-link: #92bcff;
		--visited-link: #c692ff;
		--dark-gray: #d9d9d9;
		--very-light-gray: #292929;
		--light-gray: #292929;
		--background: #1e1e1e;
		--foreground: white;
		--term-background: #000a36;
		--term-foreground: white;
		--odd-table-background: #080808;
		--odd-table-foreground: white;
		--mastodon-bg: #17063b;
		--note-background: #444;
		--note-border: #555;
	}
}

a,
a:not([class]) {
	color: var(--foreground-link);
	text-decoration: none;
}

a:visited {
	color: var(--visited-link);
}

a:hover {
	text-decoration: underline;
}

table {
	border-collapse: collapse;
}

abbr[title] {
	text-decoration-style: dotted;
}

i.fa-solid,
i.fa-regular {
	margin-right: 0.5em;
}

h1 {
	font-size: 2rem;
}

body {
	line-height: 1.15;
}

p {
	margin: 1lh 0;
}

h1 i.fa-solid,
h1 i.fa-regular,
h2 i.fa-solid,
h2 i.fa-regular {
	margin-right: 0.25em;
}

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

blockquote {
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	font-style: italic;
	border-left: 5px solid var(--light-gray);
}

.quoteattr {
	font-size: 80%;
	text-align: right;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.narrow-only {
	display: none;
}

html {
	margin: 0;
	padding: 0;
	/* https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/ */
	hanging-punctuation: first allow-end last;
}

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	margin: 0;
	padding: 0;
	font-family: serif;
	background-color: var(--background);
	color: var(--foreground);
}

body>main {
	flex: 2;
}

header {
	background-color: var(--header-blue);
	color: white;
	padding: 0.5em;
	border-bottom: 1px solid var(--header-dark-blue);
}

header h1 {
	text-align: center;
	font-family: "Berkeley Mono", "Source Code Pro", monospace;
	margin: 0;
}

header a,
header a:visited {
	color: white;
	text-decoration: none;
}

header a:hover {
	text-decoration: none;
	text-shadow: 0 0 5px rgba(255 255 255 / 75%);
}

main {
	display: flex;
	max-width: 100vw;
	flex-direction: row;
	justify-content: space-between;
	align-content: stretch;
	flex-wrap: nowrap;
}

#main-content {
	order: 1;
	padding: 1em;
	max-width: 100%;
	flex: 5 1 auto;
}

main>nav {
	order: 2;
	min-width: 180px;
	max-width: 30ch;
	flex: 0 1 auto;
	margin: 0.5em;
}

.nav-sidebar a {
	text-decoration: none;
}

.nav-sidebar .pages-list {
	font-weight: bold;
	text-transform: lowercase;
}

footer {
	text-align: right;
	padding: 0.5em 1em;
	color: var(--foreground);
	font-size: 65%;
}

footer p {
	margin: 0;
}

footer a,
footer a:visited {
	color: var(--foreground-link);
}

.nav-sidebar h2 {
	font-size: 100%;
	font-weight: bolder;
	margin: 0;
	padding: 0;
	font-variant: small-caps;
	text-align: center;
	width: 100%;
	margin-top: 1em;
}

.nav-sidebar h2:first-child {
	margin-top: 0;
}

.nav-sidebar section {
	margin: 0.5em 0;
	background-color: var(--light-gray);
	color: var(--dark-gray);
	padding: 1em;
	border-radius: 6px;
}

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

.nav-sidebar li a,
.nav-sidebar li a:visited {
	color: var(--foreground-link);
}

.nav-sidebar li a:hover {
	text-decoration: none;
	text-shadow: 0 0 1px var(--foreground-link);
}

ul.tagcloud {
	list-style: none;
	font-size: 80%;
	margin: 0.5em;
	padding: 5px;
}

ul.tagcloud li {
	display: inline-block;
}

ul.tagcloud li a {
	color: var(--foreground-link);
	text-decoration: none;
}

li.tag-0 {
	font-size: 150%;
}

li.tag-1 {
	font-size: 125%;
}

li.tag-2 {
	font-size: 105%;
}

li.tag-3 {
	font-size: 90%;
}

li.tag-4 {
	font-size: 80%;
}

/* Styling for Sidebar */
.social-list a {
	display: flex;
	align-content: center;
	justify-content: flex-start;
	gap: 4px;
	font-size: 12pt;
}

.social-list>li>a.social-entry,
.social-list>li>a.social-entry:visited {
	color: var(--foreground-link);
}

.social-list>li>a.social-entry>img {
	width: 12pt;
	height: 12pt;
}

.form-search {
	padding: 0;
	margin: 1em 0 0 0;
	font-family: sans-serif;
	font-size: 80%;
}

.form-search img {
	height: 20px;
	display: inline;
	margin: 0;
}

.form-search input[type="search"] {
	width: 100%;
	margin: 0;
	display: inline-block;
	border: 1px solid var(--dark-gray);
	border-radius: 12px;
	color: var(--foreground);
}

.form-search ::placeholder {
	color: var(--foreground);
	opacity: 0.66;
}

.form-search.duckduckgo input[type="search"] {
	background: url("/images/new_icons/duckduckgo.png") no-repeat scroll 1px 1px, var(--background);
	background-size: 20px 20px;
	height: 24px;
	padding: 0 0 0 26px;
}

.form-search button {
	padding: 0.25em 0.5em;
}

.form-search div {
	width: 100%;
	text-align: center;
}

h1, h2, h3, h4, h5 {
	text-wrap: balance;
}

article.article {
	clear: both;
}

#main-content article {
	margin-top: 2em;
}

#main-content article:first-child {
	margin-top: 0;
}

.article-title-link,
.article-title-link:visited {
	color: var(--foreground);
}

article.article .article-title {
	margin: 0;
}

article.article .metadata-block {
	display: flex;
	font-size: 70%;
	column-gap: 2em;
	row-gap: 0.5em;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 1em 0 0 0;
	color: var(--dark-gray);
}

article.article .metadata-block .tags ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

article.article .metadata-block .tags ul li {
	display: inline-block;
	margin: 0 0.5em 0 0;
}

article.article .metadata-block .tags li::after {
	content: "⸱";
}

article.article .metadata-block .tags li:last-child::after {
	content: " ";
}

article.article .article-title a {
	color: var(--foreground);
	text-decoration: none;
}

article figure {
	margin: auto;
	max-width: 80%;
}

article figure img {
	box-shadow: 0 0 5px rgba(0 0 0 / 50%);
	text-align: center;
	display: block;
	margin: 0 auto;
}

article figure figcaption {
	width: 100%;
	text-align: center;
	font-size: 80;
	font-style: italic;
}

article p {
	text-wrap: pretty;
}

article.article .article-content {
	& > h3 {
		border-bottom: 1px dashed var(--blue);
		border-right: 1px dashed var(--blue);
		border-radius: 0 0 2rem 0;
		padding: 0 0.25rem 0.25rem 0;
	}

	& > h4 {
		background: linear-gradient(90deg, var(--light-gray) 0%, var(--light-gray) 50%, var(--background) 100%);
		padding: 0.25rem 0.25rem 0.25rem 0;
	}
}

article.article-page .article-content {
	& > h3 {
		font-size: 1.66rem;
	}

	& > h4 {
		font-size: 1.25rem;
	}
}

.read-more-button {
	border: 2px outset var(--foreground);
	background-color: var(--background);
	color: var(--foreground);
	font-size: 90%;
	padding: 0.25em;
	border-radius: 0.5em;
	text-decoration: none;
}

.read-more-button:visited {
	color: var(--foreground);
}

.read-more-button:hover {
	border: 2px inset var(--foreground);
	background-color: var(--light-gray);
	color: var(--foreground);
	text-decoration: none;
}

.article table.with_border {
	border: 1px solid var(--dark-gray);
}

.article table.all_borders tr td,
.article table.all_borders tr th {
	border-right: 1px solid var(--middle-gray);
}

.article table.with_last tr td:first-child,
.article table.with_last tr th:first-child {
	border-right: 1px solid var(--middle-gray);
}

.article table.with_last th {
	font-size: 120%;
	font-weight: normal;
}

.article table.with_last tr th:last-child,
.article table.with_last tr td:last-child {
	font-weight: bolder;
}

.article table.with_last td {
	text-align: center;
}

.article table {
	width: 100%;
	margin-bottom: 18px;
}

.article table thead:first-child tr th,
.article table thead:first-child tr td {
	border: 0;
}

.article table th,
.article table td {
	padding: 8px;
	border-top: 1px solid #dddddd;
}

.article table tbody>tr:nth-child(odd)>td,
.article table tbody>tr:nth-child(odd)>th {
	background-color: var(--odd-table-background);
	color: var(--odd-table-foreground);
}

.article table tbody tr td {
	text-align: center;
}

.article table tbody tr td:first-child {
	text-align: left;
}

.article table thead {
	background-color: #8d8d8d;
	color: white;
	border-bottom: 1px solid black;
}

.article table:not(.with_border) {
	border: 1px solid #8d8d8d;
}

.footnote-reference {
	font-size: 80%;
	text-decoration: none;
	line-height: 0px;
}

.footnote-definition {
	font-size: 75%;
}

.footnote-definition {
	padding-left: 1em;
	border-top: 1px dashed var(--light-gray);
	margin-top: 1em;
	padding-top: 1em;
}

.footnote-definition+.footnote-definition {
	margin-top: 0;
	border-top: 0;
	padding-top: 0.25em;
}

.footnote-definition code,
.footnote-definition pre,
.footnote-definition kbd,
.footnote-definition samp {
	font-size: 75%;
}

.footnote-definition sup.footnote-definition-label {
	font-weight: bolder;
	font-size: 50%;
}

.footnote-definition p {
	display: inline;
}

.code_table {
	border: 1px solid black;
	border-collapse: 1;
}

.code_table th {
	border-right: 1px solid black;
}

.code_table th,
.code_table td {
	padding: 0.5em;
}

li code {
	word-break: break-all;
}

code,
pre,
kbd {
	font-family: "Berkeley Mono", "Source Code Pro", Monaco, Menlo, Consolas, "Courier Prime", "Courier New", monospace;
	font-size: 12px;
}

samp {
	font-family: "Berkeley Mono", "Source Code Pro", Monaco, Menlo, Consolas, "Courier Prime", "Courier New", monospace;
	font-size: 12px;
	background-color: var(--foreground);
	color: var(--background);
}

pre {
	word-wrap: break-all;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	border: 1px solid rgba(0 0 0 / 15%);
	padding: 8px;
	background-color: var(--term-background);
	color: var(--term-foreground);
	margin: 1em;
	border-radius: 0.2rem;
}

.lfloat {
	float: left;
	margin: 1em;
}

.rfloat {
	float: right;
	margin: 1em;
}

.center {
	display: block;
	margin: 0 auto;
}

.summary .lfloat,
.summary .rfloat {
	max-width: 20%;
}

.article-content .lfloat,
.article-content .rfloat {
	max-width: 20%;
}

.cimg-no-shadow {
	max-width: 80%;
	text-align: center;
	display: block;
	margin: 0 auto;
}

.cimg {
	box-shadow: 0 0 5px rgba(0 0 0 / 50%);
	text-align: center;
	display: block;
	margin: 0.5em auto;
}

.simg {
	box-shadow: 0 0 5px rgba(0 0 0 / 50%);
}

.halfimg {
	max-width: 45%;
}

.qimg {
	max-width: 25%;
}

.meimg {
	max-width: calc(max(75px, min(200px, 25%)));
}

.gallery {
	width: 100%;
	margin: 1em 0;
}

.gallery ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
	list-style: none;
	gap: 0.5em;
}

.gallery li {
	flex: 0 1 auto;
}

.gallery img {
	max-height: 350px;
	max-width: 100%;
	box-shadow: 0 0 5px rgba(0 0 0 / 50%);
	border-radius: 0.25rem;
}

.gallery.gallery-noshadow img {
	box-shadow: none;
}

.gallery img.noshadow {
	box-shadow: none;
}

@media (max-width: 767px) {

	.halfimg,
	.qimg {
		max-width: 90%;
	}
}

@media (max-width: 1023px) {
	.gallery img {
		max-width: 20vw;
	}
}

@media (max-width: 511px) {
	.gallery img {
		max-width: calc(100vw - 4em);
		max-height: auto;
		margin: 0.25em 0;
	}
}

.content-title {
	text-transform: lowercase;
	border: 2px double var(--blue);
	padding: 0.25em 0 0.25em 0.5em;
	border-left: 0;
	border-right: 0;
	margin: 0 -0.5em 0.75em -0.5em;
}

.content-title i {
	color: var(--blue);
}

.content-title strong {
	color: var(--blue);
}

.pagination {
	width: 100%;
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--light-gray);
}

.pagination-centered {
	text-align: center;
}

.pagination ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

.pagination ul li {
	display: inline-block;
	margin: 0 0.25em;
}

.pagination a,
.pagination span,
.pagination a:visited {
	color: var(--foreground-link);
	padding: 0.25em;
	text-decoration: none;
	border-radius: 6px;
}

.pagination li:not(.ellipsis, .active) a:hover {
	color: white;
	background-color: var(--foreground-link);
	text-decoration: none;
}

.pagination li.disabled a,
.pagination li.disabled span {
	color: var(--light-gray);
	font-weight: lighter;
	cursor: not-allowed;
}

.pagination li.active a {
	font-weight: bolder;
	color: var(--foreground);
	cursor: default;
}

.pagination li.prev i,
.pagination li.next i {
	margin: 0;
}

.archive-table {
	width: 100%;
}

.archive-table tr {
	border-bottom: 1px solid var(--light-gray);
}

.archive-table tr:last-child {
	border-bottom: 0;
}

.archive-table tr:hover {
	background-color: var(--light-gray);
}

.archive-table th {
	background-color: var(--header-blue);
	color: white;
}

.archive-table td,
.archive-table th {
	border: 0;
	padding: 0.25em 0.5em;
	text-align: left;
}

.intro-text-wrapper {
	display: flex;
	justify-content: center;
	align-items: middle;
}

.intro-text {
	margin: 0 1em 1em 1em;
	color: var(--dark-gray);
	background-color: var(--very-light-gray);
	padding: 1em;
	border-radius: 6px;
	max-width: 100ch;
}

img.whitebg {
	background-color: white;
}

table.table {
	border: 1px solid var(--light-gray);
}

table.table td,
table.table th {
	border: 1px solid var(--light-gray);
	padding: 1em;
}

table.table-hover tr:hover {
	background-color: var(--light-gray);
}

.page-about img {
	border-radius: 6px;
	margin-top: 0;
}

.page-computers img {
	max-width: 40%;
	border-radius: 6px;
	text-align: center;
	display: block;
	margin: 0.5em auto;
	box-shadow: 0 0 5px rgba(0 0 0 / 50%);
}

.lined-dl dt:first-child {
	border-top: 0;
}

.lined-dl dt {
	border-top: 1px solid #ddf;
}

dd p,
dt p {
	margin: 0;
}

dd p~p,
dt p~p {
	margin-top: 1em;
}

.indent-dl {
	margin: 1em 0;
}

.indent-dl dd {
	margin: 0;
	margin-left: 2.5em;
}

.sidenote {
	max-width: 32ch;
	border: 1px solid #aaa;
	background-color: #eee;
	color: black;
	float: right;
	font-size: 10pt;
	padding: 1em 1em 0.5em 1em;
	margin: -0.5em 1em 0.5em 1em;
	border-radius: 0.5em;
}

.sidenote.sidenote-left {
	float: left;
	margin: 0.5em 2em 0.5em 2em;
}

.sidenote h3 {
	font-size: 10pt;
	font-weight: bolder;
	line-height: 10pt !important;
}

.warning-note {
	margin: 1em auto;
	max-width: 70%;
}

.note {
	padding: 0.5em 1em;
	background-color: var(--note-background);
	color: var(--foreground);
	font-size: 90%;
	border: 1px solid var(--note-border);
}

.warning-note {
	padding: 1em;
	background-color: rgb(255, 250, 156);
	color: black;
	font-size: 90%;
	border: 1px solid rgb(182, 176, 57);
}

.commento-wrapper {
	font-size: 10pt;

	& hr {
		margin: 1em 0;
	}
}

.btn,
.btn:visited {
	border: 1px solid var(--dark-blue);
	border-radius: 4px;
	background-color: var(--blue);
	color: black;
	padding: 0.25em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	margin-bottom: -4px;
}

.btn i {
	margin-right: 0;
}

.btn:hover {
	filter: brightness(90%);
	text-decoration: none !important;
}

.btn-mastodon {
	background-color: var(--mastodon-bg);
	border: 1px solid var(--mastodon-border);
	color: var(--foreground);
}

.btn>img {
	width: 16px;
	height: 16px;
}

.game-review-header {
	background-color: var(--light-gray);
	padding: 0.25rem;
	/*border: 1px solid var(--dark-gray);*/
	border-radius: 0.25rem 0 3.75rem 0.25rem;

	& h3 {
		font-size: 1.15rem;
		a, a:visited {
			color: var(--foreground-link);
		}
	}

	& h4 {
		font-size: 1.0rem;
		font-weight: 400;

		& em {
			font-style: italic;
		}

		strong {
			font-weight: 600;
		}
	}
}

@media (max-width: 767px) {

	.note,
	.warning-note {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}

@media (max-width: 90ch) {
	main {
		flex-wrap: wrap;
	}

	main>nav {
		max-width: 100%;
		flex: 1;
	}

	.nav-sidebar h2 {
		text-align: left;
	}

	#main-content {
		max-width: calc(100vw - 2em);
		padding: 1em;
	}

	.narrow-only {
		display: revert;
	}

	.pagination li:not(.active, .prev, .next) {
		display: none;
	}

	article.article .metadata-block {
		padding: 0 2em;
	}

	.page-computers img {
		max-width: 95%;
	}
}

@view-transition {
	navigation: auto;
}