:root {
	--bg: white;
	--fg: #222;
	--fg-shadow: #224;
	--fg-muted: #666;
	--bg-muted: #eee;
	--bg-slightly-muted: #f8f8f8;
	--fg-code: var(--fg);
	--bg-code: rgba(231, 231, 231, .5);
	--fg-pre: var(--fg);
	--bg-pre: #ddf;
	--border-pre: #006;
	--fg-link: blue;
	--fg-visited: purple;
	--fg-post-header: black;
	--bg-post-header: ;
	--bg-mypost: hsl(210,20%,95%);
	--accent-mypost: hsl(210,20%,80%);
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: black;
		--fg: #ddd;
		--fg-muted: #888;
		--bg-muted: #222;
		--bg-slightly-muted: #111;
		--bg-code: #112;
		--bg-pre: #112;
		--border-pre: #888;
		--fg-link: #88e;
		--fg-visited: #e8e;
		--fg-post-header: #ddd;
		--bg-post-header: ;
		--bg-mypost: hsl(210,20%,5%);
		--accent-mypost: hsl(210,20%,30%);
	}
}

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

@font-face {
	font-family: code;
	src: local("monofur"), url("/utils/fonts/monof55.ttf");
	font-display: optional;
}

@font-face {
	font-family: heading;
	src: local("Archistico Bold"), url("/utils/fonts/Archistico_Bold.ttf");
	font-display: optional;
}

article, aside, nav, header, footer, hgroup, figure { display: block; }
body {
	color: var(--fg);
	background: var(--bg);
	margin: 0;
	font-family: sans-serif;
	overflow-wrap: break-word;
	tab-size: 3;
}

body > * {
	margin: 0 auto;
}

.page-header {
	display: flex;
	max-width: 50em;
	justify-content: center;
}

.page-header > * {
	align-self: center;
	margin: 0 1em;
}

.page-header > h1 {
	color: var(--fg);
	text-align: center;
	font-size: 1.5em;
	letter-spacing: 2px;
}

.page-header > h1 > a {
	color: inherit;
	text-decoration: none;
}

.entry-content {
	padding: 0 9px 1em;
}

.entry-content > h2, .entry-content > h3 {
	margin: .5em 0;
}
.entry-content > h2 {
	border-bottom: thin solid var(--fg);
	background: linear-gradient(
		to right,
		#B00B69 3px,
		#449 0,
		#449 6px,
		#042069 0,
		#042069 9px,
		transparent 0);
	margin-left: -9px;
	padding-left: 10px;
}

.entry-content code {
	background: var(--bg-code);
}
.entry-content > h1 > code, .entry-content > h2 > code, .entry-content > h3 > code {
	background: transparent;
}

.entry-content > pre.code {
	border-left: 1px solid var(--border-pre);
	border-bottom: 1px solid var(--border-pre);
	background: var(--bg-pre);
	color: var(--fg-pre);
	padding: .5em;
	line-height: 1.2;
}

.entry-content code,
.entry-content pre.code {
	white-space: pre-wrap;
	font-family: code, monospace;
	font-size-adjust: .65;
}

.entry-content p,
.entry-content li {
	text-align: justify;
	margin: .5em;
	line-height: 1.5;
}

#posts {
	padding: 0;
}

.post {
	position: relative;
}

.post header {
	position: relative;
	background: linear-gradient(
		to bottom,
		#B00B69 5px,
		#449 0,
		#449 10px,
		#042069 0,
		#042069 15px,
		transparent 0);
	padding-top: 20px;
}

.post h1 {
	color: var(--fg-post-header);
	font-family: heading, sans-serif;
	font-size: 4em;
	margin: .5rem auto;
	text-align: center;
	max-width: 50rem;
}

.post footer {
	text-align: center;
	font-size: small;
	font-weight: bold;
	color: var(--fg);
	display: flex;
	justify-content: center;
}

.post footer > * {
	text-decoration: none;
	color: inherit;
	display: block;
}

.post .permalink {
}

.post .permalink * {
	display: inline;
}

.post .shortpostnav {
	position: relative;
	width: 4em;
	margin: 0 .5em;
}
.post .shortpostnav > i {
	position: absolute;
	top: 0;
	width: 0; height: 0;
	border-left: var(--bg) solid 2em;
	border-right: var(--bg) solid 2em;
	background: transparent;
	transition: border .3s, height .3s, background .3s;
}
.post .shortpostnav:hover > i {
	border-color: transparent;
	border-top-width: 0;
	border-bottom-width: 0;
	height: 1em;
}

.post .older > i {
	left: 0;
	border-top: var(--fg) solid 1em;
	border-bottom: none;
}
.post .newer > i {
	right: 0;
	border-top: none;
	border-bottom: var(--fg) solid 1em;
}

.entry-content {
	max-width: 50em;
	margin: 0 auto;
}

.post .updated {
	text-align: center;
	max-width: 20em;
	margin: 1em auto;
}

.post .comment-link {
	max-width: 50em;
	margin: 1em auto;
	text-align: center;
}

/* Table Markup */

table {
	word-wrap: normal;
	overflow-wrap: normal;
	hyphens: manual;
}

table {
	margin: 1em auto;
	border-collapse: collapse;
	border: hidden;
}
table caption {
	max-width: 50em;
	margin: 0 auto 1em;
}

table td,  table th {
	padding: 0.5em 1em;
	border-width: 1px;
	border-color: var(--bg-muted);
	border-top-style: solid;
}

table thead td:empty {
	padding: 0;
	border: 0;
}

table thead,
table tbody{
	border-bottom: 2px solid;
}

table colgroup {
	border-left: 2px solid;
}

table tbody th:first-child {
	border-right: 2px solid;
	border-top: 1px solid var(--bg-muted);
	padding-right: 1em;
}

table th[colspan],
table td[colspan] {
	text-align: center;
}

table.complex th,
table.complex td {
	border: 1px solid var(--bg-muted);
	text-align: center;
}

table.longlastcol td:last-child,
table td.long {
	vertical-align: baseline;
	text-align: left;
}

table img {
	vertical-align: middle;
}

/*	.big wraps things that are self-sizing and centered
	and might be too large for the content column
	(like tables).
	It allows them to grow to the full screen size,
	but scrollbars them if they would be larger than that.
*/
@supports (width: min(0px, 1px)) {
	.big {
		width: calc(100vw - 40px);
		margin-left: min(0px, (50em - (100vw - 40px)) / 2);
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}
	.big > * {
		margin-top: 0;
		margin-bottom: 0;
	}
}