@charset "UTF-8";

/* Import ET Book styles – Woff is enough since every browser supports this */
@font-face {
    font-family: "et-book";
    src: url("../../assets/fonts/et-book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "et-book";
    src:url("../../assets/fonts/et-book-italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "et-book";
    src: url("../../assets/fonts/et-book-bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "et-book-old-style";
    src: url("../../assets/fonts/et-book-old-style.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "minima";
  src: url("../../assets/fonts/minima.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*-------------------------------------------------------*/
:root {
	/* root is for css variables */
	--content-width: 65rem;
	/* css color `wheat`:= #f5deb3 */
	--bg-col: #fcf5e9; /* is three shades lighter, but one darker than w/ Tufte */
	--bg-col-transp: #fcf5e98a; /* transparent version */
	--bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23252525' fill-opacity='0.7' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); /* dotted diamond texture */
	--txt-col: #111; /* standard text color */
	--txt-lt-col: #777; /* lighter grey */
	--midgrey-col: rgba(0,0,0,.25);
	--litegrey-col: rgba(0,0,0,.06);
	--contrast-col: #0a214c; /* dark blue */
	--scrollbar-color: var(--contrast-col) var(--bg-col); /* scrollbar styling */
	--pink-col: #DB39A5; /* dark pink-ish */
	--mint-col: #C4E6C3; /* soft mint green */
	--green-col: #32605D; /* dark green */
	--orng-col: #FFC796; /* soft orange */
	--red-col: #F83E4B; /* red */
	--red2-col: #733B40; /* dampened red */
	--hazard-col: #EC5F41; /* screaming orange */
	--trans-dflt: 0.135s cubic-bezier(.79,.14,.15,.86); /* default transition values; circular instead of ease-in-out */
	--trans-all: all var(--trans-dflt); /* simple catch all */
	--max-content-width: 1400px;
}


/* ---------------------- GLOBALS ----------------------*/
html {
	font-size: 15px; /* this is one REM */
	box-sizing: border-box;
	scrollbar-color: var(--scrollbar-color);
	scrollbar-width: thin;
}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

::-moz-selection,
::selection {
	background: var(--contrast-col);
	color: var(--bg-col);
	text-shadow: none;
}

body {
	font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	font-size: 1.4rem;
	height: 100%;
	width: 100%;
	color: var(--txt-col);
	background-color: var(--bg-col);
	counter-reset: sidenote-counter;
}

a {
	color: currentColor;
	text-decoration: none;
	-webkit-text-decoration: none;
	transition: color var(--trans-dflt);
}
a:hover {
	color: var(--hazard-col);
}
a:focus, a:not(.logo):focus {
	outline: 2px dotted var(--hazard-col);
	outline-offset: 5px;
}
::-moz-focus-inner {
	/* disable that focus thing Firefox is doing */
	border: 0;
}
figure > a {
	background: none !important;
}

li {
	list-style: none;
}

strong, b {
	font-weight: 700;
}

del {
	text-decoration: line-through;
	-webkit-text-decoration: line-through;
}
ins {
	text-decoration: underline wavy var(--mint-col);
	-webkit-text-decoration: underline wavy var(--mint-col);
}

code, pre > code {
	font-family: Consolas, "Liberation Mono", Menlo, Monaco, "Andale Mono", Courier, monospace;
	font-size: 1.1rem;
	line-height: 1.42;
	hyphens: none;
	tab-size: 4;
	direction: ltr;
	text-align: left;
	white-space: pre-wrap;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	-webkit-text-size-adjust: 100%; /* Prevents adjustments of font size after orientation changes in iOS. */
}
pre > code {
	font-size: 1.1rem;
	display: block;
}
:not(pre) > code, :not(pre) > code[class*="language-"] {
	/* inline code */
	padding: 3px 5px;
	background: var(--litegrey-col);
	border-radius: 4px;
}
div.code-toolbar + pre > code {
	/* subtitle for code blocks */
	font-family: minima, sans-serif !important;
	font-size: 0.7em;
	margin-bottom: 1rem;
}

kbd {
	font-family: Consolas, "Liberation Mono", Menlo, Monaco, "Andale Mono", Courier, monospace;
	background-color: #fafbfc;
	border: 1px solid var(--midgrey-col);
	border-radius: 4px / 5px;
	box-shadow:  inset 0 -0.175rem 0 var(--orng-col);
	color: var(--txt-lt-col);
	margin: 0 2px;
	padding: 0.2rem 0.4rem;
	vertical-align: middle;
	font-size: 80%;
	position: relative;
	bottom: 0.2rem;
}

table {
	font-family: minima, sans-serif;
	text-align: left;
	border-collapse: collapse; /* means no rounded corners */
	border: 1px solid var(--midgrey-col);
	font-size: 0.8em;
}
table th, table td {
	padding: 8px 10px;
}
table th { /* TABLE HEAD */
	font-weight: 400;
	color: var(--txt-lt-col);
	background-color: #ebe7d9;
	border: 1px solid var(--litegrey-col);
	border-bottom-color: #c9c9c9;
	text-shadow: 0 1px var(--bg-col);
	letter-spacing: 0.05em;
}
table td {
	border: 1px solid var(--litegrey-col);
}
table tr:nth-child(odd) {
	background-color: rgba(255,255,255,0.3);
}
table tr:nth-child(even) {
	background-color: rgba(40,38,37,0.05);
}

/* HELPERS */
.sans {
	font-family: minima, sans-serif;
}

.fullwidth {
	max-width: 90%;
	clear: both;
}

.multiply {
	mix-blend-mode: multiply;
}

.no-underline:link {
	background: unset;
	text-shadow: unset;
}

.danger {
	color: var(--red-col);
}
/* ------------------------- LAYOUT ------------------------- */
.page { /* wrapper around everything */
	max-width: var(--max-content-width);
	padding: 16vh 0 0;
	margin: 0 auto;
	min-height: 100%; /* for keeping the footer at the bottom */
	display: grid;
	grid-gap: 2rem;
}
@media screen and (max-width: 1399px ) {
	.page {
		padding: 6vh 1.5rem 0;
	}
}
/*-------------------------------------------------------*/
.sideslat {
	grid-area: h;
	background-image: var(--bg-texture);
}

.header {
	min-width: 180px;
	padding: 2px 0;
}
.header a {
	position: relative;
	text-transform: uppercase;
	font-size: 1rem;
	padding: .5rem 0;
	font-weight: 700;
	letter-spacing: .06em;
	text-shadow:
		-2px -2px 0 var(--bg-col),
		 2px -2px 0 var(--bg-col),
		-2px  2px 0 var(--bg-col),
		 2px  2px 0 var(--bg-col);
}

.logo {
	grid-area: l;
	width: 70px; /* needs to be set for webkit */
	max-width: 3.5vw;
	min-width: 70px;
	justify-self: center;
	/* svg styling: */
	fill: var(--txt-col);
	transition: var(--trans-all);
}
.logo:hover, .logo:active {
	fill: var(--hazard-col);
}
#menu {
	text-align: center;
}
nav.menu > a {
	display: block;
}
.menu a {
	margin: 0.85em 1.2em;
}
.menu a[aria-current]::before {
	content: "❱❱❱ ";
	/* http://xahlee.info/comp/unicode_matching_brackets.html */
}

.search {
	margin: 1rem 0;
}
input[type="search"] {
	font-family: minima, sans-serif;
	font-size: 1rem;
	width: calc(100% - 1.2rem *2);
	margin-left: 1.2rem;
	padding: 5px;
	background: var(--bg-col-transp);
	border: none;
	border-radius: 2px;
	border-bottom: 2px solid var(--midgrey-col);
	transition: var(--trans-all);
	-webkit-appearance: textfield;
	appearance: textfield;
}
input[type="search"]:focus {
	background: var(--bg-col);
	border-bottom: 2px solid var(--hazard-col);
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none;
}
/* ------------------------------------------------------------ */

main {
	grid-area: m;
	min-height: calc(100vh - 10rem);
}

.text {
	line-height: 1.5em;
}
.text p,
.text figure,
.text table,
.text ul,
.text ol,
.text blockquote {
	margin-bottom: 1.5rem;
}

.text p {
	line-height: 2.25rem;
}

.text h1,
.comments > h1 {
	font-weight: 400;
	font-size: 3.2rem;
	line-height: 1;
	margin-top: 4rem;
	margin-bottom: 1.5rem;
}
.text h2,
.comments > h2 {
	font-style: italic;
	font-weight: 400;
	font-size: 2.2rem;
	line-height: 1;
	margin-top: 2.1rem;
	margin-bottom: 1.4rem;
}
.text h3,
.comments > h3 {
	font-style: italic;
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1;
	margin-top: 2rem;
	margin-bottom: 1.4rem;
}
.text hr {
	display: block;
	height: 1px;
	width: 55%;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

.text > *:first-child {
	margin-top: 0;
}

.text a:link, .text a:visited,
main li h2,
.bits li a {
	white-space: break-word;  /* not nowrap! */
	text-decoration: underline 0.5px;
	-webkit-text-decoration: underline 0.5px;
	transition: color var(--trans-dflt);
}
.text a:hover {
	background: var(--bg-col);
}
.text a:active {
	color: var(--orng-col);
}

.footer {
	grid-area: f;
	margin: 0 auto;
	padding: 1.5rem 0;
	text-align: center;
	font-size: 1rem;
}
.footer .copy {
	font-family: Arial;
	/* the copyright symbol looks off otherwise */
}
.footer a {
	display: inline-block;
}
.footer > a {
	margin-bottom: 0.7em;
	padding-top: 1.25rem;
}
.footer .heart-icon {
	color: var(--pink-col);
	text-shadow: 0 0 5px #fff, 0 0 10px var(--pink-col);
}
.footerline {
	display: flex;
	align-items: center;
	user-select: none;
	width: 20vw;
	min-width: 18rem;
	font-family: et-book;
	font-size: 25px;
	line-height: 2px;
	color: var(--midgrey-col);
}
.footerline::before,
.footerline::after {
	content: "";
	height: 1px;
	background: var(--midgrey-col);
	flex-grow: 1;
}
.footerline::before {
	margin-right: 10px;
}
.footerline::after {
	margin-left: 10px;
}
.footerline > span {
	position: relative;
	top: 4px;
}



/* DARK THEME */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-col: #071228;
		--bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a09b98' fill-opacity='0.7' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
		--bg-col-transp: rgba(187, 163, 133, 0.35);
		--txt-col: #bbb9ab;
		--txt-lt-col: #a09b98;
		--midgrey-col: rgba(187, 163, 133, 0.5);
		--contrast-col: #e5c61e;
	}

	input[type="search"] {
		color: var(--bg-col);
	}

	input[type="search"]:focus {
		color: var(--txt-col);
	}

	:not(pre)>code[class*="language-"],
	pre[class*="language-"] {
		background: #060f20 !important;
	}

	img {
		filter:
			opacity(95%) brightness(0.9) contrast(92%);
	}

	.footer .heart-icon {
		text-shadow: none !important;
	}

	/* PRISM */
	.token.operator,
	.token.entity,
	.token.url,
	.language-css .token.string,
	.style .token.string {
		background: hsla(0, 0%, 100%, 0.2) !important;
	}

	/* NEW */
	.desaturate {
		filter: saturate(0);
	}

	.multiply {
		mix-blend-mode: exclusion;
	}
}