/* ============================================================
   Fonts
   ============================================================ */

@font-face {
	font-family: 'Inconsolata';
	src: url('Inconsolata.woff2') format('woff2'),
	     url('Inconsolata.ttf') format('truetype');
	font-weight: 200 900;
	font-stretch: 50% 200%;
	font-display: swap;
}

/* ============================================================
   Modern CSS Reset
   ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	text-decoration: inherit;
	vertical-align: baseline;
}

:where(article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
main, search) {
	display: block;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	color-scheme: light dark;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	/* line-height from the original reference stylesheet */
	line-height: 1.272;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

ol, ul, menu {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ============================================================
   Custom Properties
   ============================================================ */

:root {
	--header-col: #fed314;
	--background-col: #f9f9f9;
	--text-col: black;
	--pre-col: black;
	--pre-bg: rgba(0, 0, 0, 0.15);
	--code-col: rgba(0, 0, 0, 0.8);
	--markdown-col: rgba(0, 0, 0, 0.6);
	--link-col: #1a6be0;
	--hr-col: rgba(0, 0, 0, 0.25);
	--mono: 'Inconsolata', monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--header-col: #7151ab;
		--background-col: rgb(50, 54, 57);
		--text-col: #9ed9d7;
		--pre-col: #80feb2;
		--pre-bg: rgba(0, 0, 0, 0.50);
		--code-col: #efc5bc;
		--markdown-col: #729492;
		--link-col: #6db3f2;
		--hr-col: rgba(255, 255, 255, 0.25);
	}

	img {
		opacity: 0.60;
		transition: opacity 0.15s ease-in-out;
	}
	img:hover {
		opacity: 1;
	}
}

/* ============================================================
   Layout
   ============================================================ */

body {
	max-width: 38rem;
	padding-inline: 2rem;
	margin-inline: auto;
	background-color: var(--background-col);
	color: var(--text-col);
	font-family: var(--mono);
	font-size: 1rem;
}

/* ============================================================
   Markdown-style Content
   ============================================================ */

/* --- Paragraphs --- */

p {
	margin-block: 0.5em;
}

/* --- Links --- */

a[href] {
	color: var(--link-col);
	text-decoration: underline;
}

/* --- Emphasis / Strong --- */

em {
	font-style: italic;
}
em::before, em::after {
	content: '*';
	color: var(--markdown-col);
}

strong {
	font-weight: bold;
}
strong::before, strong::after {
	content: '**';
	color: var(--markdown-col);
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mono);
	font-weight: bold;
	position: relative;
	display: inline-block;
	font-size: var(--heading-size);
	margin-block-start: 1em;
}

h1 { --heading-size: 2em; }
h2 { --heading-size: 1.5em; }
h3 { --heading-size: 1.25em; }
h4 { --heading-size: 1.125em; }
h5 { --heading-size: 1.0625em; }
h6 { --heading-size: 1em; }

/* h1 and h2 get underline-style markers (=== and ---) */
h1 { width: 100%; }

h1, h2 {
	padding-block-end: calc(var(--heading-size) * 0.5);
}
h1::after, h2::after {
	content: var(--underline);
	position: absolute;
	inset-inline: 0;
	top: calc(100% - 1em);
	color: var(--markdown-col);
	overflow: hidden;
	white-space: nowrap;
}

h1 { --underline: '================================================================'; }
h2 { --underline: '----------------------------------------------------------------'; }

/* h3-h6 get prefix-style markers (#, ##, etc.) */
h3::before, h4::before, h5::before, h6::before {
	content: var(--prefix);
	color: var(--markdown-col);
	vertical-align: middle;
	margin-inline-end: 0.25em;
}

h3 { --prefix: '###'; }
h4 { --prefix: '####'; }
h5 { --prefix: '#####'; }
h6 { --prefix: '######'; }

/* --- Lists --- */

ul, ol {
	padding-inline-start: 2em;
	margin-block: 0.5em;
}

ul > li::before {
	content: '- ';
	color: var(--markdown-col);
	margin-inline-start: -1.25em;
	position: absolute;
}

ol {
	counter-reset: md-ol;
}
ol > li {
	counter-increment: md-ol;
}
ol > li::before {
	content: counter(md-ol) '. ';
	color: var(--markdown-col);
	margin-inline-start: -2em;
	position: absolute;
}

li {
	position: relative;
	margin-block: 0.25em;
}

/* nested lists */
:is(ul, ol) :is(ul, ol) {
	margin-block: 0.25em;
}

/* --- Code --- */

code {
	font-family: var(--mono);
	color: var(--code-col);
	background: var(--pre-bg);
	padding-inline: 0.25em;
	border-radius: 0.25em;
}
code::before, code::after {
	content: '`';
	color: var(--markdown-col);
}

/* code inside pre should not have inline styling */
pre code {
	background: none;
	padding: 0;
	border-radius: 0;
}
pre code::before, pre code::after {
	content: none;
}

pre {
	font-family: var(--mono);
	margin-block: 1em;
	padding: 1em;
	border-radius: 0.375em;
	position: relative;
	background-color: var(--pre-bg);
	color: var(--pre-col);
	white-space: pre-wrap;
	overflow-x: auto;
	padding-block-start: calc(1em + 1.5em);
	padding-block-end: calc(1em + 1.5em);
}
pre::before, pre::after {
	content: '```';
	color: var(--markdown-col);
	position: absolute;
	inset-inline-start: 1em;
	display: block;
}
pre::before {
	top: 0.5em;
}
pre::after {
	bottom: 0.5em;
}

/* --- Blockquote --- */

blockquote {
	border-inline-start: 3px solid var(--markdown-col);
	padding-inline-start: 1em;
	margin-block: 0.5em;
	color: var(--text-col);
}

/* --- Horizontal Rule --- */

hr {
	border: none;
	margin-block: 1em;
	color: var(--markdown-col);
	text-align: center;
}
hr::after {
	content: '---';
	display: block;
}

/* --- Images --- */

img {
	border-radius: 8px;
	transition: opacity 0.15s ease-in-out, border-radius 0.15s ease-in-out;
}
img:hover {
	border-radius: 0;
}

/* --- Tables --- */

th, td {
	padding: 0.5em 1em;
	border: 1px solid var(--hr-col);
}
th {
	font-weight: bold;
}

/* --- Misc --- */

mark {
	background-color: var(--header-col);
	padding-inline: 0.125em;
}

del::before, del::after {
	content: '~~';
	color: var(--markdown-col);
}