:root {
	--bg: hsl(0, 0%, 10%);
	--bg2: hsl(0, 0%, 20%);
	--fg: hsl(0, 0%, 95%);
	--accent: #f90;
	--mid: hsl(0, 0%, 50%);
}

@media (prefers-color-scheme: light) {
:root {
	--bg: hsl(0, 0%, 90%);
	--bg2: hsl(0, 0%, 80%);
	--fg: hsl(0, 0%, 5%);
}
}

* { box-sizing: border-box; }
html, body {
	background: var(--bg);
	color: var(--fg);
	font-family: Nunito, sans, mono;
	font-size: 18px;
	margin: 0;
	padding: 0;
}
body > div {
	max-width: 500px;
	margin: auto;
	margin-top: 10%;
	border: 1px solid;
	padding: 1em;
}
body > div.post {
	max-width: 800px;
	margin: auto;
	margin-top: 5%;
	margin-bottom: 5%;
	border: 1px solid var(--mid);
	padding: 1em;
}
body > div > h1 {
	padding: 0;
	margin: 0;
	margin-bottom: .5em;
}

p {
	text-align: justify;
	text-justify: inter-character;
}
h1 { font-weight: 600; }
a {
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid;
}
a:visited { border-color: var(--mid); }
a:hover,a:focus { border-color: var(--accent); }
ul { list-style-type: none; }
ol { padding-left: 1.5em; }
li { margin: .3em; }
ul li::before { content: "» "; }

pre {
	overflow: auto;
	background: var(--bg2);
	-moz-tab-size: 3;
	tab-size: 3;
}
div > pre {
	margin-left: -1em;
	margin-right: -1em;
	margin-top: -0.5em;
	margin-bottom: -0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em; 
	padding-right: 1em;
}
code {
	background: var(--bg2);
	padding: 0.1em;
	font-size: 12px;
	font-weight: 500;
}
pre > code {
	background: inherit;
	padding: 0;
}
fig {
	display: flex;
	justify-content: center;
}
fig > pre {
	padding: 0.5em;
}
blockquote {
	margin: 0;
	padding-left: 0.8em;
	border-left: 0.2em solid;
	font-style: italic;
}
blockquote em { font-style: normal; }
blockquote code { font-style: normal; }
header { 
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-between;
}
header > * { flex-grow: 1 }
created {
	text-align: right;
	color: var(--mid);
}

pmeta { display: none }

@media only screen and (max-width: 800px) {
	html, body { font-size: 14px; }
	body > div.post {
		margin: 1em;
		border: 0;
	}
	ul { padding-left: .5em; }
	div > pre {
		margin-left: -2em;
		margin-right: -2em;
		padding-left: 1em;
		padding-right: 1em;
	}
}

@media only screen and (max-width: 500px) {
	body > div {
		margin: 1em;
		padding: 0;
		border: 0;
	}
	p { text-align: revert; }
}