:root {
	/* colors from: https://github.com/NLKNguyen/papercolor-theme#-colors */
	--fg-color: #000000;
	--bg-color: #eeeeee;
	--bg-secondary-color: #d0d0d0;
	--link-color: #005faf;
	/* #0087af or #005f87 */
	--text-color-on-secondary: #000000;
	--outline-color: #d75f00;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* dark colors from darkreader extension on light colors */
		--fg-color: #e8e6e3;
		--bg-color: #181a1b;
		--bg-secondary-color: #333739;
		--link-color: #63afff;
		/* original from darkreader, but way too bold*/
		--link-color: #1ebeff;
		--link-color: #3D9CFF;
		--link-color: #5fbbff;
		--link-color: #a3d0ff;
		--link-color: #8ac3ff;
		--text-color-on-secondary: #ffffff;
	}
}

/* fonts */
@font-face {
	font-family: 'Commit Mono';
	src: url('/assets/fonts/commitmono-450-regular.woff2') format('woff2');
	font-display: swap;
}

/* trying to make fallbacks that look similar by adjusting font proportions and spacing
 */
@font-face {
	/* generated with: https://screenspan.net/fallback
     * but the horiz spacing is not perfect compared to default windows chromium monospace font, courier 
    /* but courier is so much different in height and weight */
	font-family: 'Windows Fallback';
	src: local(Lucida Sans Typewriter);
	size-adjust: 99.75%;
}

/* styling main elements of page structure */
html {
	color: var(--fg-color);
	background-color: var(--bg-color);
	font-family: "Commit Mono", "Windows Fallback", ui-monospace, monospace;
	font-size: 14px;
	line-height: 1.5em;
	padding: 1em;
}

/* Constrain and center layout */
body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

.content {
	max-width: 70ch;
	width: 100%;
	padding: 0 1ch;
	margin-bottom: 10em;
}

main,
article {
	/* fit overflow figures like wide pre blocks and force them to scroll, esp for 70ch wide screens; account for scroll bar width on desktop/windows too */
	max-width: calc(100vw - 5.5ch);
}

article>div,
li>div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-weight: normal;
}

header {
	margin-top: 4em;
	margin-bottom: -1em;
	text-align: center;
}

header>* {
	margin-bottom: 0;
}

/* bracketed links, used on homepage */
h2>span::before {
	content: "[" / "";
}

h2>span::after {
	content: "]" / "";
}

h2>span {
	font-weight: normal;
	/* in case im using bold header text */
	position: absolute;
	right: -1.5ch;
	/* compromise bt -2ch perfect symmetry without scrollbar (ie mobile) and -1ch symmetry with scrollbar taking up vw space (ie desktop) */
}

h2>span>a {
	/* treat anchor tag link as more of a UI element than text, and hopefully help parsers ignore these elements */
	user-select: none;
}

nav::before {
	content: "[ " / "";
}

nav::after {
	content: " ]" / "";
}

nav>*:not(:first-child)::before {
	content: " | " / "";
}

.tags>span::before {
	content: "#" / "";
}

.tags>*:not(:last-child)::after {
	content: ", " / "";
}

/* */

/* lists prefixed with dashes fitting monospace grid, instead of default browser dots */
ul {
	list-style-type: "- ";
	padding-left: 0;
	margin: 0;
}

/* */

/* blockquote example:
 *
 *  |  "So this is a quote
 *  |  and this vertical bar on
 *  |  the left will keep going"
 */
blockquote {
	margin-left: 1ch;
	/* padding-left: 4ch; */
	position: relative;
	overflow: hidden;
}

blockquote:before {
	position: absolute;
	top: 0;
	left: 0;
	white-space: pre;
	content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|" / "";
}

/* */

br {
	/* patch because firefox applies * {margin: ...} to
<br>s, unlike safari and chrome */
	margin-bottom: 0;
}

/* */

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

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

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

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

a:focus {
	outline-color: var(--outline-color);
}

::selection {
	background: var(--link-color);
	/* background: #0087af; lighter compared to heavy --link-color, but greenish */
	/* background: rgba(0, 95, 175, 0.5); link color with partial opacity */
	color: var(--bg-color);
}

footer {
	padding-top: 10em;
}

/* */

/* trying to style code, aka 'very monospace' compared to default monospace plaintext */
code,
kbd,
pre {
	background-color: var(--bg-secondary-color);
	color: var(--text-color-on-secondary);
	overflow-x: auto;
	/* so that fixed-width parent will cause horiz scroll */
	padding: 1em;
	border-radius: 3px;
}

code,
kbd {
	/* inline code elements */
	display: inline;
	white-space: nowrap;
	padding: 1px 0.5ch;
	border-radius: 3px;
}

code {
	/* try different font weight as alternative to different background, although not ideal */
	background-color: var(--bg-color);
	font-weight: 300;
}