@font-face {
	font-family: "IBM VGA8";
	src: url("/static/fonts/PxPlus_IBM_VGA8.ttf");
}
@font-face {
	font-family: "Roboto";
	src: url("/static/fonts/roboto.subset.woff2");
}
@font-face {
	font-family: "Cantarell Regular";
	src: url("/static/fonts/Cantarell-Regular.otf");
}

:root {
	--transflag-pink: #f5a9b8;
	--transflag-blue: #5bcefa;
}

@media (not (prefers-color-scheme: dark)) {
	/* From: https://gogh-co.github.io/Gogh/
	 * "Selenized Light"
	 */
	:root {
		--terminal-bg: rgb(251, 243, 219);
		--terminal-normal: #000000;
		--terminal-green-bright: #428B00;
		--terminal-blue-bright: #006DCE;
		--terminal-white: #53676D;
		--terminal-white-bright: #3A4D53;

		--phi-color: var(--transflag-blue);
		--phi-shadow: black;
		--link-blue: #0040ff;
		--link-blue-hover: #0080ff;
		--h1: black;
		--h1-shadow: #00000080;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Tango */
		--terminal-normal: #ffffff;
		--terminal-green-bright: #8ae234;
		--terminal-blue-bright: #729fcf;
		--terminal-white: #d3d7cf;
		--terminal-white-bright: #eeeeec;

		--phi-color: var(--transflag-pink);
		--phi-shadow: var(--transflag-pink);
		--link-blue: #0080ff;
		--link-blue-hover: #00a0ff;
		--h1: white;
		--h1-shadow: #ffffff80;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: "EB Garamond";
}

h1 {
	font-weight: normal;
}

a {
	color: var(--link-blue);
	text-decoration: none;
}
a:hover {
	color: var(--link-blue-hover);
	text-decoration: underline;
}

@media (not (prefers-color-scheme: dark)) {
	a:hover {
		/* text-shadow: 1px 1px 0px #00000040; */
	}
}
@media (prefers-color-scheme: dark) {
	a:hover {
		text-shadow: 0px 0px 2px #00a0ff80;
	}
}


/* ── The nav ── */

nav > ul {
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
nav > ul > li {
	font-family: "IBM VGA8";
	display: inline-block;
}
@media (width >= 768px) {
	nav > ul > li {
		margin-left: 2em;
		margin-right: 2em;
	}
}
@media (not (width >= 768px)) {
	nav > ul > li {
		margin-left: 1em;
		margin-right: 1em;
	}
}
nav a::before {
	content: '» ';
	visibility: hidden;
}
nav a:hover::before {
	content: '» ';
	color: #00a0ff;
	visibility: unset;
}
nav a::after {
	content: ' «';
	visibility: hidden;
}
nav a:hover::after {
	content: ' «';
	visibility: unset;
	color: #00a0ff;
}

/* ── The header ── */
header > h1 {
	color: var(--h1);
}
@media (not (prefers-color-scheme: dark)) {
	header > h1 {
		text-shadow: 2px 2px 2px var(--h1-shadow);
	}
}
@media (prefers-color-scheme: dark) {
	header > h1 {
		text-shadow: 0px 0px 5px var(--h1-shadow);
	}
}
header > hr {
	margin: 0;
	border: none;
	height: 1px;
}

/* ── The console ── */
#console {
	font-family: "IBM VGA8";
	margin-top: 1em;
	margin-bottom: 1em;
}

#console .dollah {
	color: var(--terminal-green-bright);
}
#console .bin, #console .builtin {
	font-weight: bold;
}
#console .userhome {
	color: var(--terminal-blue-bright);
}

/* ── The footer ── */
footer {
	font-size: smaller;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
}
footer > .phi {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	color: var(--phi-color);
	text-shadow: 0px 0px 4px var(--phi-shadow);
}

/* ── <main> ── */
main {
	font-family: "Cantarell Regular";
}

main.blog-post {
	hyphens: auto;
	max-width: 50em;
	text-align: justify;
	margin-left: 5em;
	margin-top: 1.5em;
	display: flex;

	position: relative;
	transform-style: preserve-3d;
}