* {
	box-sizing: border-box;
	scroll-behavior: smooth;
	scrollbar-color: #888 transparent;
	scrollbar-width: thin;
}

html {
	--bg1: #FFF;
	--bg2: #F7F7F7;
	color: #222;
	--link-color: #08A; /* From <https://commons.wikimedia.org/wiki/File:Opponent_colors.svg> */
	--font-mono: Consolas, Menlo, monospace;
	overflow-y: scroll;
}

html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

body {
	background: var(--bg1);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Taken from Tachyons */
	font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
	font-size: 18px;
	line-height: 1.4;
}

ol > li > ul {
	/* Second level `ul` under an `ol` can have discs, instead of hollow circles. */
	list-style: disc;
}

.table-wrapper {
	margin: 1em;
	overflow-x: auto;
}

.table-wrapper code {
	white-space: pre;
}

table {
	border-collapse: collapse;
	margin: 0 auto;
}

th {
	text-align: left;
	background-color: #0001;
}

th, td {
	border: 1px solid #BBB;
	padding: 6px;
}

:link, :visited {
	color: var(--link-color);
	word-break: break-word;
}

a img {
	border: 0;
	vertical-align: middle;
}

h2, h3, h4, h5, h6 {
	margin: 1.3em 0 .5em;
}

h1 {
	margin: .3em 0 0;
	font-size: 2.4em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.7em;
}

h4 {
	font-size: 1.5em;
}

h5 {
	font-size: 1.3em;
}

h6 {
	font-size: 1.1em;
}

:is(h1, h2, h3, h4, h5, h6) small {
	font-weight: normal;
}

blockquote {
	background-color: var(--bg2);
	padding: 12px;
	border-left: 4px solid #111;
	margin: 1em 2em;
	font-style: italic;
}

blockquote :first-child {
	margin-top: 0;
}

blockquote :last-child {
	margin-bottom: 0;
}

pre, code, kbd, tt, var {
	font-family: var(--font-mono);
	font-size: .9em;
	background-color: var(--bg2);
	font-variant-ligatures: none;
}

pre {
	max-width: 100%;
	padding: 1em .5em;
	margin: 0;
	overflow: auto;
	word-wrap: normal;
	word-break: normal;
	border: 1px solid #EEE;
	border-radius: 3px;
}

code {
	padding: 0 2px;
	white-space: pre-wrap;
}

pre code {
	padding: 0;
	background: transparent;
	font-size: 1em;
	white-space: pre;
}

kbd {
	border-width: 1px 1px 2px;
	border-style: solid;
	border-color: #111;
	border-radius: 3px;
	padding: 0 3px;
}

a > kbd {
	border-bottom-color: var(--link-color);
}

dd {
	margin-bottom: .5em;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

p.img img, img[src$=".gif"], video {
	margin: 0 auto;
	display: block;
	box-shadow: 0 0 6px #222;
	border-radius: 6px;
}

video {
	max-width: 90%;
}

main {
	width: 100%;
	max-width: 960px;
	padding: 0 6px;
	flex-grow: 1;
}

header {
	width: 100%;
	max-width: 960px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand {
	font-size: 1.3em;
	margin: .5em 0;
	line-height: 1;
	padding: 6px 12px;
}

:is(header, .toc, .post-list) a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

header nav a {
	margin: 0 9px;
}

header nav a.active {
	text-decoration: underline;
}

dt {
	margin-top: 1.5em;
}

.headerlink {
	margin-left: 12px;
	display: none;
	font-family: var(--font-mono);
	font-size: .5em;
	vertical-align: middle;
	padding: 0 3px;
}

:is(h1, h2, h3, h4, h5, h6):hover .headerlink {
	display: inline-block;
}

textarea {
	background-color: #0001;
	color: inherit;
	border: 1px solid currentColor;
}

textarea:focus {
	outline: none;
	border-color: var(--link-color);
}

button, .btn {
	font: inherit;
	cursor: pointer;
	border: 0;
	background-color: var(--link-color);
	color: white;
	border-radius: 2px;
	padding: 6px 1em;
}

button:disabled {
	opacity: .3;
	cursor: not-allowed;
}

.post-list {
	padding-left: 1em;
}

.post-list li {
	margin-bottom: 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.post-list .title {
	font-size: 1.2em;
	margin-left: 1em;
}

.post-list .subtext {
	width: 10ch;
	text-align: right;
	white-space: nowrap;
}

.note {
	background-color: #DEF;
	border-radius: 3px;
	padding: 1em;
	margin-left: 1em;
	margin-right: 1em;
}

footer {
	border-top: 1px solid var(--bg2);
	margin-top: 5em;
	padding: 1em;
	align-self: stretch;
	text-align: center;
}

.toc ul {
	margin: 0;
}

.toctitle {
	font-size: 1.6em;
	font-weight: bold;
	padding: 1em 0 .5em 0;
}

.star-btn {
	border-radius: 6px;
	border: 1px solid #0002;
	box-shadow: 1px 1px 2px #0001;
	color: inherit;
	font-size: .8em;
	padding: 3px 6px;
}

.star-btn:hover {
	background: #EEE;
	text-decoration: none;
}

.ghost {
	position: fixed;
	font-weight: bold;
	z-index: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: default;
	pointer-events: none;
	animation: ghost 1s ease-out;
	page-break-inside: avoid;
}

@keyframes ghost {
	from {
		opacity: 1;
		transform: scale(1.5);
	}
	to {
		opacity: 0;
		transform: translateY(-3em) scale(2.5);
	}
}

.hl {
	position: relative;
	display: grid;
	grid: auto auto / auto 1fr;
}

.hl .filename {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

.hl .linenos {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	text-align: right;
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.hl .content {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}

.hl .linenos + .content {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.hl .filename span {
	background-color: #0001;
	padding: 3px 1em;
	display: inline-block;
	border-radius: 3px 3px 0 0;
	font-weight: bold;
}

.hl .btns {
	display: none;
	position: absolute;
	top: 3px;
	right: 3px;
}

.hl .show-full-code-btn {
	position: absolute;
	bottom: 1em;
	left: 1.6em;
}

.hl .collapse, .hl input[type=checkbox], .hl :checked ~ label {
	display: none;
}

.hl :checked ~ :is(.linenos, .content) .collapse {
	display: initial;
}

.banners {
	margin: 2em 0;
}

.banners p {
	border-left-width: 3px;
	border-left-style: solid;
	padding: 1rem;
	margin: 1rem;
}

.appsmith-ref {
	background-color: #FFF7F0;
	border-color: #F70;
}

.prestige-ref {
	background-color: #EFF;
	border-color: #0AF;
}

del {
	color: #888;
}

.resume h1 {
	text-align: center;
}

.resume .info {
	text-align: center;
}

.pdf-only {
	display: none;
}

/* pygments styles BEGIN */
.hl .hll { background-color: #dfd; display: block }
.hl :is(.c, .ch, .cm, .cp, .cpf, .c1, .cs) { color: #8f5902 } /* Comments */
.hl .err { color: #a40000; outline: 1px solid #ef2929 } /* Error */
.hl .g { color: inherit } /* Generic */
.hl .k { color: #204a87 } /* Keyword */
.hl .l { color: inherit } /* Literal */
.hl .n { color: inherit } /* Name */
.hl .o { color: #ce5c00 } /* Operator */
.hl .x { color: inherit } /* Other */
.hl .p { color: inherit } /* Punctuation */
.hl .gd { color: #a40000 } /* Generic.Deleted */
.hl .ge { color: inherit } /* Generic.Emph */
.hl .gr { color: #ef2929 } /* Generic.Error */
.hl .gh { color: #000080 } /* Generic.Heading */
.hl .gi { color: #00A000 } /* Generic.Inserted */
.hl .go { color: inherit } /* Generic.Output */
.hl .gp { color: #8f5902 } /* Generic.Prompt */
.hl .gs { color: inherit } /* Generic.Strong */
.hl .gu { color: #800080 } /* Generic.Subheading */
.hl .gt { color: #a40000 } /* Generic.Traceback */
.hl :is(.kc, .kd, .kn, .kp, .kr, .kt) { color: #204a87 } /* Keywords */
.hl .ld { color: inherit } /* Literal.Date */
.hl .m { color: #0000cf } /* Literal.Number */
.hl .s { color: #4e9a06 } /* Literal.String */
.hl .na { color: #c4a000 } /* Name.Attribute */
.hl .nb { color: #05d } /* Name.Builtin */
.hl .nd { color: #5c35cc } /* Name.Decorator */
.hl .ni { color: #ce5c00 } /* Name.Entity */
.hl .ne { color: #cc0000 } /* Name.Exception */
.hl .nl { color: #f57900 } /* Name.Label */
.hl .nt { color: #204a87 } /* Name.Tag */
.hl .ow { color: #204a87 } /* Operator.Word */
/*.hl .w { color: #f8f8f8; text-decoration: underline }*/ /* Text.Whitespace */
.hl :is(.mb, .mf, .mh, .mi, .mo, .il) { color: #0000cf } /* Numbers */
.hl :is(.sa, .sb, .sc, .dl, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) { color: #4e9a06 } /* Strings */
.hl .sd { color: #8f5902 } /* Literal.String.Doc */
.hl .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.hl :is(.fm, .vc, .vg, .vi, .vm, .nc, .no, .nf, .nn, .nx, .py, .nv) { color: inherit } /* Names */
/* pygments styles END */

@media (max-width: 350px) {
	header {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	ol, ul {
		padding-left: 1.5em;
	}

	pre {
		padding: 6px;
	}

	article > .hl, .note, blockquote, .toc, .page-author {
		margin-left: -6px;
		margin-right: -6px;
		border-radius: 0;
	}

	pre, .toc {
		border-width: 1px 0;
		border-style: solid;
		border-color: rgba(0, 0, 0, .06);
	}

	video {
		max-width: 100%;
	}

	.hl .download-btn {
		display: none;
	}
}

@media screen {
	::selection {
		background: var(--link-color);
		color: white;
	}

	.print-only {
		display: none !important;
	}
}

@media print {
	.screen-only {
		display: none !important;
	}
}

@media (hover: hover) {
	.hl:hover .btns {
		display: block;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		--bg1: #333;
		--bg2: #444;
		color: #EEE;
		--link-color: #3BD;
	}

	blockquote {
		border-color: #eee;
	}

	.appsmith-ref {
		background-color: #514236;
	}

	.prestige-ref {
		background-color: #3B4A4A;
	}

	.note {
		background-color: #2B3D4E;
	}

	form[name="subscribe"] {
		background-color: #3f3f5d;
	}

	p.img img, img[src$=".gif"], video {
		filter: brightness(80%);
		-webkit-filter: brightness(80%); /* For iOS Safari */
	}

	.star-btn {
		border-color: #888;
		box-shadow: 1px 1px 2px #0003;
	}

	.star-btn:hover {
		background: #777;
	}

	pre {
		border-color: #555;
	}

	.hl .hll { background-color: #463 }
	.hl  { background: #272822; color: #f8f8f2 }
	.hl .c { color: #75715e } /* Comment */
	.hl .err { color: #960050; background-color: #1e0010 } /* Error */
	.hl .k { color: #66d9ef } /* Keyword */
	.hl .l { color: #ae81ff } /* Literal */
	.hl .n { color: #f8f8f2 } /* Name */
	.hl .o { color: #f92672 } /* Operator */
	.hl .p { color: #f8f8f2 } /* Punctuation */
	.hl :is(.ch, .cm, .cp, .cpf, .c1, .cs, .gu) { color: #75715e } /* Comments */
	.hl .gd { color: #f92672 } /* Generic.Deleted */
	.hl .ge { font-style: italic } /* Generic.Emph */
	.hl .gi { color: #a6e22e } /* Generic.Inserted */
	.hl .gs { font-weight: bold } /* Generic.Strong */
	.hl .kc { color: #66d9ef } /* Keyword.Constant */
	.hl .kd { color: #66d9ef } /* Keyword.Declaration */
	.hl .kn { color: #f92672 } /* Keyword.Namespace */
	.hl .kp { color: #66d9ef } /* Keyword.Pseudo */
	.hl .kr { color: #66d9ef } /* Keyword.Reserved */
	.hl .kt { color: #66d9ef } /* Keyword.Type */
	.hl .ld { color: #e6db74 } /* Literal.Date */
	.hl .m { color: #ae81ff } /* Literal.Number */
	.hl .s { color: #e6db74 } /* Literal.String */
	.hl :is(.nb, .ni, .nl, .nn, .py, .nv, .bp, .vc, .vg, .vi, .vm, .il) { color: #f8f8f2 } /* Names */
	.hl .na { color: #a6e22e } /* Name.Attribute */
	.hl .nc { color: #a6e22e } /* Name.Class */
	.hl .no { color: #66d9ef } /* Name.Constant */
	.hl .nd { color: #a6e22e } /* Name.Decorator */
	.hl .ne { color: #a6e22e } /* Name.Exception */
	.hl .nf { color: #a6e22e } /* Name.Function */
	.hl .nx { color: #a6e22e } /* Name.Other */
	.hl .nt { color: #f92672 } /* Name.Tag */
	.hl .ow { color: #f92672 } /* Operator.Word */
	.hl :is(.mb, .mf, .mh, .mi, .mo) { color: #ae81ff } /* Numbers */
	.hl :is(.sa, .sb, .sc, .dl, .sd, .s2, .sh, .si, .sx, .sr, .s1, .ss) { color: #e6db74 } /* Strings */
	.hl .se { color: #ae81ff } /* Literal.String.Escape */
	.hl .fm { color: #a6e22e } /* Name.Function.Magic */
	.hl .il { color: #ae81ff } /* Literal.Number.Integer.Long */

}