/* WCAG AAA Color Contrast (13.7:1) https://webaim.org/resources/contrastchecker/?fcolor=EEEEED&bcolor=222222 */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@200&family=Oswald&display=swap');

:root {
	--text-width: 20em;
	--font-scale: 18px;
	--base-line-height: 1.414;
	--base-line-height-em: calc(var(--base-line-height) * 1em);
	--header-line-height: 1.0;
	--header-top-margin: calc((var(--header-line-height) * 1.5) * 3em);
	--header-bottom-margin: calc((var(--header-line-height) * 0.5) * 1em);
	--mod-scale: 1.25;
	--header-scale-4: calc(var(--font-scale) * var(--mod-scale));
	--header-scale-3: calc(var(--header-scale-4) * var(--mod-scale));
	--header-scale-2: calc(var(--header-scale-3) * var(--mod-scale));
	--header-scale-1: calc(var(--header-scale-2) * var(--mod-scale));
	--base-color: #eeed;
	--bg-color: #222;
	--highlight-color: #66eeed;
	--line-color: #ddd;
	--hue-rotate: 0deg; /* Moderated by huerotate.js */
}

html {
	box-sizing: border-box;
}

body {
	background-color: var(--bg-color);
	color: var(--base-color);
	font-size: var(--font-scale);
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

main {
	margin: 0 auto;
	max-width: calc((var(--text-width) * 2) + var(--base-line-height-em));
	min-width: min(var(--text-width), 80vw);
	display: flex;
	column-gap: calc(var(--base-line-height-em) * 1);
	flex-flow: row wrap;
	align-items: flex-start;
	align-content: flex-start;
	padding: 1.414em;
}

section, article {
	flex-basis: var(--text-width);
	flex-grow: 1;
}

section.wide, article.wide {
	flex-basis: 100%;
}

aside {
	border-top: 1px solid var(--line-color);
	border-bottom: 1px solid var(--line-color);
	font-size: smaller;
	/* width: 50%; */
	flex-basis: 100%;
	padding: 0 var(--base-line-height-em);
}

section aside {
	float: right;
	width: 50%;
	margin-left: var(--base-line-height-em);
}

aside h3 {
	margin-top: 1em;
}

p, li, span {
	font-size: 1em;
	font-family: 'Bitter', serif;
	page-break-inside: never;
}

p, li {
	text-align: justify;
	text-justify: inter-character; /* Slower but better way to justify, with less artifacts */
	text-align-last: left;
}

ul {
	margin-top: 1.414em;
}

li {
	margin-bottom: 0.8em;
	/* margin-left: -1.414em;  */
}

li::marker {
	color: var(--line-color);
}

a {
	font-weight: bold;
	color: var(--highlight-color);
	filter: brightness(100%) hue-rotate(var(--hue-rotate));
	transition: all 2s ease-in;  
	text-decoration: none;
}

a:hover {
	color: #fff;
	filter: none;
}

p {
	line-height: var(--base-line-height);
	margin-top: var(--base-line-height-em);
	margin-bottom: var(--base-line-height-em);
}

/* Indent sequential p to make it easier to separate each paragraph from the last */
p + p, aside + p, blockquote + p, figcaption + p {
	text-indent: var(--base-line-height-em);
}

a + p {
	margin-top: none;
	padding-top: none;
}

h1, h2, h3, h4 {
	color: var(--highlight-color);
	font-family: 'Oswald', sans-serif;
	line-height: var(--header-line-height);
	margin-top: var(--header-top-margin);
	margin-bottom: var(--header-bottom-margin);
	color: #fff;
}

/* 	Inside of a <section>, h1 will pagebreak but stay inside the flex
	Outside of a <section>, h1 will pagebreak and span the page	*/
h1 {
	page-break-before: always;
	font-size: var(--header-scale-1);
	flex-basis: 100%;
	text-align: center;
	background: 
	linear-gradient(
		90deg,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1),
		rgba(0, 0, 0, 0)
	),
	url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	mix-blend-mode: screen;
	filter: contrast(150%) brightness(650%) hue-rotate(var(--hue-rotate));
	transition: all 2s cubic-bezier(.29, 1.01, 1, -0.68); 
}

h2 {
	font-size: var(--header-scale-2);
}

h3 {
	font-size: var(--header-scale-3);
}

h4 {
	font-size: var(--header-scale-4);
}

/* Slight expansion on abbreviations to make them distinct from uppercase words */
abbr, acronym {
	letter-spacing: 0.01em;
	font-variant: all-small-caps;
}

blockquote {
	margin: var(--base-line-height-em);
	border-left: 1px solid var(--line-color);
	padding-left: var(--base-line-height-em);
	/* margin-bottom: -1em; */
}

blockquote p {
	display: inline;
}

figcaption {
	width: 100%;
	text-align: center;
	font-size: smaller;
	/* margin-top: -1em; */
	font-style: italic;
}

img {
	width: 100%;
	filter: none;
}

.iconbar {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}

.iconbar + .iconbar {
	margin-top: var(--base-line-height-em);
}

img.icon {
	height: max(5vw, 5vh);
}
img.icon_wide {
	width: max(10vw, 10vh);
}

.tenor-gif-embed {
	filter: none !important;
}

/*
.noise {
	width: 5vw;
	max-width: min(var(--text-width), 8vw);
	min-width: 3em;
	background: 
		linear-gradient(
			-33deg,
			rgba(0, 0, 0, 1),
			rgba(0, 0, 0, 0),
			rgba(0, 0, 0, 1)
		),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 600 1500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	filter: contrast(150%) brightness(650%) invert(100%);
	mix-blend-mode: screen;
}
*/