/* Generated by ParaType Ltd (http://www.paratype.com), and updated significantly by Aranjedeath */
/* Font PT Serif:  Copyright © 2010 ParaType Ltd. All rights reserved.*/
@font-face {
	font-family: 'PT Serif';
	font-display: fallback;
	font-style: normal;
	font-weight: normal;
	src: 
		local('PT Serif Regular'),
		local('PT Serif'),
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Regular.woff2') format('woff2'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Regular.woff') format('woff');
}

@font-face {
	font-family: 'PT Serif';
	font-display: fallback;
	font-style: italic;
	font-weight: normal;
	src: 
		local('PT Serif Italic'), 
		local('PT Serif'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Italic.woff2') format('woff2'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Italic.woff') format('woff');
}

@font-face {
	font-family: 'PT Serif';
	font-display: fallback;
	font-style: normal;
	font-weight: bold;
	src: 
		local('PT Serif Bold'), 
		local('PT Serif'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Bold.woff2') format('woff2'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Bold.woff') format('woff');
}

@font-face {
	font-family: 'PT Serif';
	font-display: fallback;
	font-style: italic;
	font-weight: bold;
	src: 
		local('PT Serif Bold Italic'), 
		local('PT Serif'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Bold%20Italic.woff2') format('woff2'), 
		url('https://explodie.org/fonts/PTSerifWeb/PT%20Serif_Bold%20Italic.woff') format('woff');
}

/* Webfont: Lato-Regular */
@font-face {
	font-family: 'LatoWeb';
	font-display: fallback;
	src: 
		local('Lato Regular'),
		local('Lato'),
		local('LatoWeb'),
		url('https://explodie.org/fonts/LatoWeb/LatoLatin-Regular.woff2') format('woff2'),
		url('https://explodie.org/fonts/LatoWeb/LatoLatin-Regular.woff') format('woff'),
		url('https://explodie.org/fonts/LatoWeb/LatoLatin-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

/* Webfont: Lato-Italic */
@font-face {
	font-family: 'LatoWeb';
	font-display: fallback;
	src: 
		local('Lato Italic'),
		local('Lato'), 
		local('LatoWeb'),
		url('https://explodie.org/fonts/LatoWeb/LatoLatin-Italic.woff2') format('woff2'),
		url('https://explodie.org/fonts/LatoWeb/LatoLatin-Italic.woff') format('woff'),
		url('https://explodie.org/fonts/LatoWeb/LatoLatin-Italic.ttf') format('truetype');
	font-style: italic;
	font-weight: normal;
}

@font-face {
	font-family: 'Cantarell';
	font-display: fallback;
	font-style: normal;
	font-weight: normal;
	src: 
		local('Cantarell Regular'),
		local('Cantarell'),
		url('https://explodie.org/fonts/cantarell/Cantarell-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Source Code Pro';
	font-display: fallback;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	src: 
		local('Source Code Pro Regular'),
		local('Source Code Pro'),
		url('https://explodie.org/fonts/source-code-pro/WOFF2/TTF/SourceCodeVariable-Roman.ttf.woff2') format('woff2 supports variations'),
		url('https://explodie.org/fonts/source-code-pro/WOFF2/TTF/SourceCodeVariable-Roman.ttf.woff2') format('woff2-variations'),
		url('https://explodie.org/fonts/source-code-pro/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'),
		url('https://explodie.org/fonts/source-code-pro/WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'),
		url('https://explodie.org/fonts/source-code-pro/TTF/SourceCodePro-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Source Code Pro';
	font-display: fallback;
	font-weight: 400;
	font-style: italic;
	font-stretch: normal;
	src: 
		local('Source Code Pro Italic'),
		local('Source Code Pro'),
		url('https://explodie.org/fonts/source-code-pro/WOFF2/TTF/SourceCodeVariable-Italic.ttf.woff2') format('woff2 supports variations'),
		url('https://explodie.org/fonts/source-code-pro/WOFF2/TTF/SourceCodeVariable-Italic.ttf.woff2') format('woff2-variations'),
		url('https://explodie.org/fonts/source-code-pro/WOFF2/TTF/SourceCodePro-It.ttf.woff2') format('woff2'),
		url('https://explodie.org/fonts/source-code-pro/WOFF/OTF/SourceCodePro-It.otf.woff') format('woff'),
		url('https://explodie.org/fonts/source-code-pro/TTF/SourceCodePro-It.ttf') format('truetype');
}

/*! Quietly waiting for EU GDPR ruling to outlaw Google Fonts with my self-hosted fonts (more performant under http2 as well) */
/*! well code stolen from bootstrap 3 and timestamp code stolen from The New Yorker */
/*! my own code reused from readable.css 1.10.0, as well. */

/*! performance issue detection css: https://raw.githubusercontent.com/csswizardry/ct/master/ct.css */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/*! changes requested on github have been integrated here, and some modernizations by me */

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: 0.67em 0
}

hr {
	overflow: hidden
}

a {
	background-color: transparent;
	word-break: break-word;
}

abbr[title] {
	border-bottom: 0;
	text-decoration: underline;
	text-decoration: underline dotted
}

b, strong {
	font-weight: bolder
}

pre, code, kbd, samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: small;
}

sub, sup {
	font-size: x-small;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

select {
	word-wrap: normal
}

img {
	border-style: none;
	max-width: 100%;
	height: auto;
	display: inline-block;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button {
	overflow: visible;
	text-transform: none
}

[type=button], [type=reset], [type=submit], button {
	-webkit-appearance: button
}

::-moz-focus-inner {
	border-style: none;
	padding: 0
}

fieldset {
	padding: 0.35em 0.75em 0.625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	max-width: 100%;
	padding: 0;
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox], [type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

summary {
	display: list-item
}

template {
	display: none
}

[hidden] {
	display: none
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

input {
  min-width: 0;
  min-height: 0;
}

::placeholder {
    line-height: normal;
}

/* start my css */
/* additional purple #563d7c */
:root {
	color-scheme: light dark;

	--neon-orange: #ff7f00;
	--timestamp-published: #008aba;
	--timestamp-updated: #00ba8d;

	--lightmode-background-color: #fdfdfd;
	--lightmode-body-text-color: #111111;
	--lightmode-header-text-color: #080808;
	--lightmode-standalone-header-text-color: #000000;

	--lightmode-link-unvisited: #008aba;
	--lightmode-link-unvisited-hover: #5ec8e5;
	--lightmode-link-visited: #ff6c2f;
	--lightmode-link-visited-hover: #ffa563;

	--lightmode-button-background: #6f2da8;
	--lightmode-button-background-hover: #421c52;
	--lightmode-button-text: #ffffff;

	--lightmode-border-color: #2f2f2f;

	--lightmode-nav-border-color: #5b5b5b;
	--lightmode-nav-border-color-hover: #2c2c2c;
	--lightmode-nav-background-hover: #f0f0f0;

	--lightmode-well-background-color: #d0d0d0;

	--lightmode-muted-text: #484848;


	--darkmode-background-color: #020202;
	--darkmode-body-text-color: #eeeeee;
	--darkmode-header-text-color: #f7f7f7;
	--darkmode-standalone-header-text-color: #ffffff;

	--darkmode-link-unvisited: #008aba;
	--darkmode-link-unvisited-hover: #5ec8e5;
	--darkmode-link-visited: #ff6c2f;
	--darkmode-link-visited-hover: #ffa563;

	--darkmode-button-background: #421c52;
	--darkmode-button-background-hover: #6f2da8;
	--darkmode-button-text: #ffffff;

	--darkmode-border-color: #f2f2f2;

	--darkmode-nav-border-color: #b5b5b5;
	--darkmode-nav-border-color-hover: #c2c2c2;
	--darkmode-nav-background-hover: #0f0f0f;

	--darkmode-well-background-color: #202020;

	--darkmode-muted-text: #a7a7a7;
}

article, body, html, p {
	background-color: var(--lightmode-background-color);
	color: var(--lightmode-body-text-color);
	font-family: 'PT Serif', serif;
	font-kerning: normal;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	letter-spacing: normal;
	font-synthesis: weight style;
}

h1, h2, h3, h4, h5, h6, h7 {
	font-family: LatoWeb, sans-serif;
	font-weight: 400;
	line-height: 1.1;
	word-spacing: -.0625em;
	/*margin: 0.618em 0;*/
    margin: 0.754em 0;
	font-kerning: normal;
	color: var(--lightmode-header-text-color);
}

header {
	text-wrap: balance;
}

body>header>h1 {
	font-weight: 700
}

h1, h2, h3, h4, h5, h6, h7, p {
	text-rendering: optimizeLegibility
}

h1 {
	font-size: 2rem;
	text-align: center;
}

h2 {
	font-size: 1.66rem
}

h3 {
	font-size: 1.495rem
}

h4 {
	font-size: 1.33rem
}

h5 {
	font-size: 1.25rem
}

h6 {
	font-size: 1.17rem
}

h7 {
	font-size: 1.1rem
}

article {
/* 	margin: 1.508em auto 1.508em; */
	margin: 0.754em auto 0.754em;
	max-width: 35.22em;
/* 	padding: 0 1.508em 0 1.508em; */
	padding: 0 0.754em 0 0.754em
}

body>header>h1 {
	letter-spacing: -.03125em;
	font-size: 3em
}

header>h1, header>h5 {
	color: var(--lightmode-header-text-color);
	text-align: center
}

header>img {
	display: block;
}

p {
	line-height: 1.45;
	margin: 0.754em 0 0.754em 0;
	font-size: 1rem;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	padding: 0
}

a {
	background-color: transparent;
	color: var(--lightmode-link-unvisited);
	text-decoration: none
}

article a {
	text-decoration: underline;
}

a:hover {
	color: var(--lightmode-link-unvisited-hover)
}

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

a:visited:hover {
	color: var(--lightmode-link-visited-hover)
}

nav {
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 0;
	min-height: 2em;
	width: 100%;
	font-family: Cantarell, sans-serif;
}

nav a, nav p {
	display: inline-block;
	vertical-align: middle;
	padding: 0 1em;
	margin: 0 0.1em;
	line-height: 2;
	border: 1px solid var(--lightmode-nav-border-color);
	border-top: 0;
	color: var(--lightmode-link-unvisited);
	border-bottom: 1px solid var(--lightmode-link-unvisited-hover);
}
/* active:hover highlights and reverses, regular:hover darkens and reverses */
nav a.active {
	color: var(--lightmode-link-unvisited);
	border-bottom: 1px solid var(--lightmode-link-unvisited);
}

nav a.active:hover {
	color: var(--lightmode-link-unvisited-hover);
	border-bottom: 1px solid var(--lightmode-link-visited-hover);
}

nav a.active:visited {
	color: var(--lightmode-link-visited);
	border-bottom: 1px solid var(--lightmode-link-visited);
}

nav a.active:visited:hover {
	color: var(--lightmode-link-visited-hover);
	border-bottom: 1px solid var(--lightmode-link-unvisited-hover);
}

nav a:hover {
	color: var(--lightmode-link-unvisited-hover);
	background-color: var(--lightmode-nav-background-hover);
	border: 1px solid var(--lightmode-nav-border-color-hover);
	border-bottom: 1px solid var(--lightmode-link-visited-hover);
	border-top: 0;
	padding-top: 0;
}

nav a:visited {
	color: var(--lightmode-link-visited);
	border-bottom: 1px solid var(--lightmode-link-visited-hover);
}

nav a:visited:hover {
	color: var(--lightmode-link-visited-hover);
	border-bottom: 1px solid var(--lightmode-link-unvisited-hover);
}

.byline {
	margin: 0.754em auto 0.754em auto;
	color: rgba(51, 53, 58);
	max-width: 35.22em;
	padding: 0 1.508em 0 1.508em;
}

.hanging {
	padding-left: 3em;
	font-size: 85%
}

@supports (text-indent: hanging) {
	.hanging {
		text-indent: 3em hanging;
		padding-left: inherit;
	}
}

.hanging>h4, .hanging>p {
	color: var(--lightmode-muted-text);
	font-family: sans-serif;
	font-size: 0.85em;
}

.hanging h4 {
	text-align: center
}

.wide {
	max-width: 44.025em
}

.mw-5, .mw-50 {
	max-width: 50%
}

.mw-75 {
	max-width: 75%
}

.mw-9, .mw-90 {
	max-width: 90%
}

.italics {
	font-style: italic
}

.bordered {
	border: 1px solid;
	padding: 1em
}

.bold {
	font-weight: 700;
}

.strike {
	text-decoration: line-through
}

.centered {
	margin: 0 auto;
}

/* this selector needs serious work */
/* first class=indented, which is a paragraph and NOT .well,.centered,img */
/* I want every paragraph which has an indented parent element, that (p) is not a well, and which does not have a descendant that is centered or an img */
/* TODO: maybe this should just be indented, with an .unindented pairing; */
.indented:first-of-type p:not(.well):not(.centered):not(img) {
	text-indent: 2.5em
}

a img {
	vertical-align: bottom
}

::-moz-selection {
	background-color: var(--lightmode-link-visited-hover);
	color: var(--lightmode-body-text-color)
}

::selection {
	background-color: var(--lightmode-link-visited-hover);
	color: var(--lightmode-body-text-color)
}

blockquote, code, kbd, pre, samp {
	font-family: 'Source Code Pro', ui-monospace, monospace;
	font-size: 1rem;
}

blockquote, code, pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
	margin-left: 2.2rem;
	margin-right: 2.2rem
}

/*[data-tabs] {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}*/

[data-tabs] ul {
	list-style: none;
	display: flex;
	margin: 0 auto 1em;
	padding: 0;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	text-align: center;
	align-items: center;
}

/* [role="tab"] { */
[data-tabs] ul li a {
	text-decoration: none;
	vertical-align: middle;
	padding: 0 1em;
	margin: 0 0.1em;
	line-height: 2;
	border: 1px solid var(--lightmode-nav-border-color);
	font-family: LatoWeb, sans-serif;
	display: inline-block;
}

/* [role="tab"].active, [role="tab"][aria-selected=true], [role="tab"]:hover { */
[data-tabs] ul li a.active, [data-tabs] ul li a [aria-selected=true], [data-tabs] ul li a:hover {
	background-color: var(--lightmode-nav-background-hover);
	border: 1px solid var(--lightmode-nav-border-color-hover);
}

ul li ul li {
	list-style-type: disc;
}

.well {
	min-height: 1rem;
	padding: 1rem;
	margin-bottom: 1rem;
	background-color: var(--lightmode-well-background-color);
	border: 1px solid var(--lightmode-border-color);
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
}

blockquote.twitter-tweet {
	margin: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--lightmode-border-color);
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
	white-space: normal;
}

blockquote.twitter-tweet p {
	padding-top: 0;
	margin-top: 0;
}

.rounded-photo {
	border-radius: 50%;
}

time {
	font-family: LatoWeb, sans-serif;
}

.dt-published, .dt-updated {
	color: var(--lightmode-button-text);
	display: inline-block;
	padding: 0.309em 0.412em 0.309em 0.412em;
	border-radius: 4px;
/* 	margin-bottom: 12px; */
/* 	line-height: 1.8 */
}

.dt-published {
	background-color: var(--timestamp-published);
}

.dt-updated {
	background-color: var(--timestamp-updated);
}
/* TODO: more complete style for .btn's */
.btn {
	border-radius: 6px;
	border: 0;
	font-family: LatoWeb, sans-serif;
	color: var(--lightmode-button-text);
	/*background-color: #337ab7;*/
	background-color: var(--lightmode-button-background);
	padding: 10px 16px 10px 16px;
	text-decoration: none;
	touch-action: manipulation;
	cursor: pointer;
	white-space: nowrap;
}

.btn:hover {
	/*background-color: #008ABA;*/
	background-color: var(--lightmode-button-background-hover);
	color: var(--lightmode-button-text);
	text-decoration: none;
}
/* TODO: more of these btn styles */
a.btn:visited {
	color: var(--lightmode-button-text);
}

button#share {
	text-indent: 0;
}

audio[controls] {
	width: 100%;
	filter: saturate(200%);
}

iframe[id*=twitter-widget-] {
	vertical-align: inherit
}

article>iframe[id*=twitter-widget-] {
	max-width: 522px
}

.float-right {
	float: right
}

.float-left {
	float: left
}

body[data-twttr-rendered=false]>article {
	max-width: 16em
}

article.oneTimeline {
	max-width: 525px
}

article.twoTimeline {
	max-width: 1080px
}

.big {
	font-size: 1.508rem;
}

.small {
	font-size: 0.508rem;
}

.smaller {
	font-size: 0.809rem;
}

.normal {
	font-size: 1rem;
}
/* my very bad, no good, terrible LinkedIn Widget */
.linkedin {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1rem;
/* cool bug: if you do this, Firefox is unable to give you the "calculated" CSS related to padding in DevTools. lol. */
/* 	--excess: calc(1%); */
/* 	padding: 1rem 1rem calc(1rem - var(--excess)) 1rem; */
	padding: 1rem;
	border: 1px solid var(--lightmode-border-color);
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15);
	white-space: normal;
	max-width: 50%;
}
.linkedin #liphoto {
	max-width: 25%;
	float: left;
	margin: auto 0 auto 0;
}
.linkedin #liphoto img {
	border-radius: 50%;
}
.linkedin #lidetails {
	max-width: 74%;
	display: inline-block;
	padding-left: 1%;
	display: inline-flex;
	flex-flow: row wrap;
}
.linkedin #lidetails #liname {
	font-weight: 700;
}
.linkedin #lidetails #lititle, .linkedin #lidetails #lipositions {
	font-size: 0.809rem;
}
.linkedin #lilink {
	display: inline-flex;
	flex-flow: row wrap;
	margin: 0 auto 0 auto;
	padding-top: 1%;
}

/* https://twitter.com/Una/status/1277657662432391168 */
h2~h1,
h3~h1,
h4~h1,
h5~h1,
h6~h1,
h3~h2:first-of-type,
h4~h2:first-of-type,
h5~h2:first-of-type,
h6~h2:first-of-type,
h4~h3:first-of-type,
h5~h3:first-of-type,
h6~h3:first-of-type,
h5~h4:first-of-type,
h6~h4:first-of-type,
h6~h5:first-of-type {
	outline: 2px dotted var(--neon-orange);
}

img:not([loading="lazy"]), iframe:not([loading="lazy"]) {
	border: 2px dashed var(--neon-orange);
}

/* this is a neat trick that disables downloading fonts on sufficiently recent browsers ... on smart-phone-sized objects */
@media(max-device-width:100mm) and (orientation:portrait), (max-device-width:160mm) and (orientation:landscape) {
	html {
		font-size: 100%;
	}

	article, body, html, p {
		font-family: ui-serif, serif;
	}

	[data-tabs] ul li a, nav, time, .btn {
		font-family: ui-sans-serif, system-ui, sans-serif;
	}
	
	h1, h2, h3, h4, h5, h6, h7 {
        font-family: ui-sans-serif, sans-serif;
    }

	blockquote, code, kbd, pre, samp {
		font-family: ui-monospace, monospace;
	}
	
}

/* This will be revisited someday. But not today. For now I will continue to be pleased by the correctly giant text on big screens. Sit back farther from the screen, motherfucker. */
@media(max-width:475px) {
	[data-tabs] ul {
		min-height: 3em
	}
}

@media(max-width:699px) {
	nav {
		min-height: 3em
	}
}
/* if you do the math, you'll discover 6.25% is 1/16 ... I wonder where that magic number came from lmfao */
/* someday I would like to build a text sizing system that is device-size dependant. But, I am unsure if that is valuable given the variety. */
@media(min-width:900px)and (max-width:1200px) {
	html {
		font-size: 106.25%
	}
}

@media(min-width:1200px)and (max-width:1500px) {
	html {
		font-size: 112.5%
	}
}

@media(min-width:1500px) {
	html {
		font-size: 118.75%
	}
}

@media(min-width:1700px) {
	html {
		font-size: 125%
	}
}

@media(min-width:1940px) {
	html {
		font-size: 131.25%
	}
}

@media(min-width:2420px) {
	html {
		font-size: 137.5%
	}
}

[hidden] {
	display: none;
}

:not(:defined) {
	opacity: 0
}

@media (prefers-color-scheme: no-preference) {
	/* I do nothing! This will just default to "light mode" CSS (which is actually my site CSS without a light or dark mode). Only Safari (OSX+iOS) supports this, as of this note. */
}

@media (prefers-color-scheme: dark) {

	/* dark mode!!! */
	article, body, html, p {
		background-color: var(--darkmode-background-color);
		color: var(--darkmode-body-text-color);
	}

	h1, h2, h3, h4, h5, h6, h7 {
		color: var(--darkmode-header-text-color);
	}

	header>h1, header>h5 {
		color: var(--darkmode-standalone-header-text-color);
	}

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

	a:hover {
		color: var(--darkmode-link-unvisited-hover)
	}

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

	a:visited:hover {
		color: var(--darkmode-link-visited-hover)
	}

	nav a, nav p {
		color: var(--darkmode-link-unvisited);
		border: 1px solid var(--darkmode-nav-border-color);
		border-bottom: 1px solid var(--darkmode-link-visited-hover);
	}

	nav a:hover {
		color: var(--darkmode-link-unvisited-hover);
		background-color: var(--darkmode-nav-background-hover);
		border: 1px solid var(--darkmode-nav-border-color-hover);
		border-bottom: 1px solid var(--darkmode-link-visited);
	}

	nav a:visited {
		color: var(--darkmode-link-visited);
		border-bottom: 1px solid var(--darkmode-link-unvisited-hover);
	}

	nav a:visited:hover {
		color: var(--darkmode-link-visited-hover);
		border-bottom: 1px solid var(--darkmode-link-unvisited);
	}

	nav a.active {
		color: var(--darkmode-link-unvisited);
		border-bottom: 1px solid var(--darkmode-link-visited-hover);
	}

	nav a.active:hover {
		color: var(--darkmode-link-unvisited-hover);
		border-bottom: 1px solid var(--darkmode-link-visited);
	}

	nav a.active:visited {
		color: var(--darkmode-link-visited);
		border-bottom: 1px solid var(--darkmode-link-unvisited);
	}

	nav a.active:visited:hover {
		color: var(--darkmode-link-unvisited);
		border-bottom: 1px solid var(--darkmode-link-visited);
	}

	.byline {
		color: rgba(204, 202, 197);
	}

	.hanging>h4, .hanging>p {
		color: var(--darkmode-muted-text);
	}

	.well {
		background-color: var(--darkmode-well-background-color);
		border: 1px solid var(--darkmode-border-color);
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15);
	}
	
	blockquote.twitter-tweet {
		border: 1px solid var(--darkmode-border-color);
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15);
	}

	.dt-published, .dt-updated {
		color: var(--darkmode-button-text);
	}

	.btn {
		color: var(--darkmode-button-text);
		background-color: var(--darkmode-button-background);
	}

	.btn:hover {
		color: var(--darkmode-button-text);
		background-color: var(--darkmode-button-background-hover);
	}

	a.btn:visited {
		color: var(--darkmode-button-text);
		background-color: var(--darkmode-button-background-hover);
	}

	[data-tabs] ul li a {
		border: 1px solid var(--darkmode-nav-border-color);
	}

	[data-tabs] ul li a.active, [data-tabs] ul li [aria-selected=true], [data-tabs] ul li a:hover {
		background-color: var(--darkmode-nav-background-hover);
		border: 1px solid var(--darkmode-nav-border-color-hover);
	}

	::-moz-selection {
		background-color: var(--darkmode-link-unvisited);
		color: var(--darkmode-body-text-color)
	}

	::selection {
		background-color: var(--darkmode-link-unvisited);
		color: var(--darkmode-body-text-color)
	}

	.linkedin {
		border: 1px solid var(--darkmode-border-color);
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15);
	}
}

@media (prefers-color-scheme: light) {

	/* light mode!!! */
	article, body, html, p {
		background-color: var(--lightmode-background-color);
		color: var(--lightmode-body-text-color);
	}

	h1, h2, h3, h4, h5, h6, h7 {
		color: var(--lightmode-header-text-color);
	}

	header>h1, header>h5 {
		color: var(--lightmode-standalone-header-text-color);
	}

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

	a:hover {
		color: var(--lightmode-link-unvisited-hover)
	}

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

	a:visited:hover {
		color: var(--lightmode-link-visited-hover)
	}

	nav a, nav p {
		color: var(--lightmode-link-unvisited);
		border: 1px solid var(--lightmode-nav-border-color);
		border-bottom: 1px solid var(--lightmode-link-unvisited-hover);
	}

	nav a:hover {
		color: var(--lightmode-link-unvisited-hover);
		background-color: var(--lightmode-nav-background-hover);
		border: 1px solid var(--lightmode-nav-border-color-hover);
		border-bottom: 1px solid var(--lightmode-link-visited);
	}

	nav a:visited {
		color: var(--lightmode-link-visited);
		border-bottom: 1px solid var(--lightmode-link-unvisited-hover);
	}

	nav a:visited:hover {
		color: var(--lightmode-link-visited-hover);
		border-bottom: 1px solid var(--lightmode-link-unvisited);
	}

	nav a.active {
		color: var(--lightmode-link-unvisited);
		border-bottom: 1px solid var(--lightmode-link-visited-hover);
	}

	nav a.active:hover {
		color: var(--lightmode-link-unvisited-hover);
		border-bottom: 1px solid var(--lightmode-link-visited);
	}

	nav a.active:visited {
		color: var(--lightmode-link-visited);
		border-bottom: 1px solid var(--lightmode-link-unvisited);
	}

	nav a.active:visited:hover {
		color: var(--lightmode-link-unvisited);
		border-bottom: 1px solid var(--lightmode-link-visited);
	}

	.byline {
		color: rgba(51, 53, 58);
	}

	.hanging>h4, .hanging>p {
		color: var(--lightmode-muted-text);
	}

	.well {
		background-color: var(--lightmode-well-background-color);
		border: 1px solid var(--lightmode-border-color);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
	}
	
	blockquote.twitter-tweet {
		border: 1px solid var(--lightmode-border-color);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
	}

	.dt-published, .dt-updated {
		color: var(--lightmode-button-text);
	}

	.btn {
		color: var(--lightmode-button-text);
		background-color: var(--lightmode-button-background);
	}

	.btn:hover {
		color: var(--lightmode-button-text);
		background-color: var(--lightmode-button-background-hover);
	}

	a.btn:visited {
		color: var(--lightmode-button-text);
		background-color: var(--lightmode-button-background-hover);
	}

	[data-tabs] ul li a {
		border: 1px solid var(--lightmode-nav-border-color);
	}

	[data-tabs] ul li a.active, [data-tabs] ul li [aria-selected=true], [data-tabs] ul li a:hover {
		background-color: var(--lightmode-nav-background-hover);
		border: 1px solid var(--lightmode-nav-border-color-hover);
	}

	::-moz-selection {
		background-color: var(--lightmode-link-visited-hover);
		color: var(--lightmode-body-text-color)
	}

	::selection {
		background-color: var(--lightmode-link-visited-hover);
		color: var(--lightmode-body-text-color)
	}

	.linkedin {
		border: 1px solid var(--lightmode-border-color);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
	}
}

/* stubs */
/* media queries to do things when scripting is variously available or not */
@media (scripting:none) {}
@media (scripting:initial-only) {}
@media (scripting:enabled) {}

/* media queries to adjust dynamically given how quickly (or not at all) the media can update the content after rendering it */
@media (update:none) {} /* eg: print media */
@media (update:slow) {} /* eg: ebook reader or massively underpowered device */
@media (update:fast) {} /* eg: things that can keep up with constant animations/updates */

/* load no fonts, load tiny (or no) images, etc */
/* this could be fun if I used high-res images anywhere */
@media (prefers-reduced-data:no-preference) {}
@media (prefers-reduced-data:reduce) {}

/* for people with motion sensitivity, you can disable transitions in animations so that changes are instant, and entirely user-controlled. */
@media (prefers-reduced-motion:no-preference) {}
@media (prefers-reduced-motion:reduce) {}

/* reduce ... not eliminate. dissolve etc fair game */
@media (prefers-reduced-transparency:no-preference) {}
@media (prefers-reduced-transparency:reduce) {}

/* detect grid-display-based devices. For example, terminal rendering or similar. */
@media (grid: 0) {}
@media (grid: 1) {}

/* monochrome display detection. number represents bits-per-pixel of the display, if monochrome. 0 is non-monochrome display. */
@media (monochrome) {}
@media (monochrome: 0) {}

/* detects if user agent has inverted the colors */
@media (inverted-colors: inverted) {}
@media (inverted-colors: none) {}

/* improved opacity */
@media (prefers-contrast:more) {
	/* Make all the colors perfect white/black, and fix up UI elements to not be blue/orange */
}
/* https://github.com/w3c/csswg-drafts/issues/6036#issuecomment-786308318 */
@media (prefers-contrast:less) {}

@media (prefers-contrast:custom) {
	/* matches the contrast ratio range between more and less. Could have also been called middle */
}

@media (prefers-contrast:no-preference) {

}

@media (forced-colors: active), (prefers-contrast:forced) {
	/* prefers-contrast: forced; was removed from the spec in Feb 2021. remove next time you see this */

	/* just setting some defaults so that people who use hi-viz modes will have a reasonable experience */
	article, body, html, p {
		background-color: Canvas;
		color: CanvasText;
	}

	h1, h2, h3, h4, h5, h6, h7 {
		color: CanvasText;
	}

	header>h1, header>h5 {
		color: CanvasText;
	}

	a {
		color: LinkText;
	}

	a:visited {
		color: VisitedText;
	}

	a:active {
		color: ActiveText;
	}

	nav a:hover {
		color: ButtonText;
		background-color: ButtonFace;
		border: 1px dotted ButtonText;
	}

	nav a, nav p {
		color: ButtonText;
		background-color: ButtonFace;
		border: 1px solid ButtonText;
	}

	.byline {
		color: CanvasText;
		background-color: Canvas;
	}

	.hanging>h4, .hanging>p {
		color: CanvasText;
	}

	.well {
		background-color: Canvas;
		border: 1px solid CanvasText;
	}
	
	blockquote.twitter-tweet {
		border: 1px solid CanvasText;
	}
	
	.btn {
		color: ButtonText;
		background-color: ButtonFace;
		border: 1px solid ButtonBorder;
	}

	.btn:hover {
		background-color: ButtonFace;
	}

	[data-tabs] ul li a {
		border: 1px solid ButtonBorder;
	}

	[data-tabs] ul li a.active, [data-tabs] ul li a [aria-selected=true], [data-tabs] ul li a:hover {
		color: ButtonText;
		background-color: ButtonFace;
		border: 1px solid ButtonBorder;
	}

	::selection {
		background-color: Highlight;
		color: HighLightText;
	}
}

@media print {
    /* this is very close-but-no-cigar */
	/* much better though, imo */
	@page {
		margin: 2cm
	}
	
	@page :left {
		margin: 2cm
	}

	@page :right {
		margin: 2cm
	}
	
	@page :right {
		@bottom-right {
			content: counter(page);
		}
	}

	@page :left {
		@bottom-left {
			content: counter(page);
		}
	}

	@page :blank {
		@top-center { content: "This page unintentionally left blank." }
	}

	article, body, html, p {
		background-color: #fff;
		color: #000;
		font-size: 1rem;
		line-height: 1.3;
		width: 100%;
	}

	audio, embed, nav, nav a, object, video {
		display: none
	}

	article a, article a:visited, .byline a, .byline a:visited {
		text-decoration: none;
		background-color: #fff;
		color: #000;
	}

	h1, h2, h3, h4, h5, h6, h7 {
		background-color: #fff;
		color: #000;
		page-break-after: avoid;
		page-break-before: auto;
		break-after: avoid-page;
		break-before: auto;
		margin: 0.3em 0;
	}

	p {
		page-break-inside: auto;
		break-inside: auto;
		margin: 0;
		orphans: 2;
		widows: 2;
	}

	/* this is some trick shit that inserts the full URL into the printed text when you hit the print key... so the links are always there */
	article a[href^=http]:after {
		content: " <"attr(href)"> ";
		font-size: 0.8em;
	}

	a:after>img, article a[href^="#"]:after {
		content: "";
	}

	a:not(:local-link):after {
		content: " <"attr(href)"> ";
	}

	q:after {
		content: " (Source: "attr(cite)")";
	}

	a, article, p {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	img {
		max-width: 100% !important;
		max-height: 100% !important;
		page-break-inside: avoid;
		break-inside: avoid-page;
        border: none;
	}

	article>ul {
		margin-top: 0;
		margin-bottom: 0;
	}

	.byline {
		background-color: #fff;
		color: #000;
		margin: 0 auto 0;
	}

	.hanging>h4:first-of-type {
		page-break-before: always;
		page-break-inside: avoid;
		break-before: page;
		break-inside: avoid-page;
	}

	.hanging>h4, .hanging>p {
		font-size: 1em;
	}

	.hanging {
		background-color: #fff;
		color: #000;
		font-size: 100%;
	}

	.btn {
		background-color: #fff;
		color: #000;
		border: 1px solid black;
		margin: 0.3em 0 0.3em 0;
	}
	
	.dt-published, .dt-updated {
		background-color: #fff;
		color: #000;
		padding: 0;
		margin-bottom: 0;
	}

	.well {
		box-shadow: none;
		margin: 0.3em 0 0.3em 0;
		border: 1px solid black;
		background-color: #fff;
		color: #000;
		page-break-inside: avoid;
		break-inside: avoid-page;
	}
	
	blockquote.twitter-tweet {
		border: 1px solid black;
	}

	br {
		display: none;
	}
	
	[hidden] {
		display: block;
	}
}