/*
 * Heavily inspired by the Echo theme for Nibbleblog, by Paulo Nunes.
 * https://github.com/syndicatefx/nibbleblog-themes
 */

@import url('fonts/iosevka-papyri-light.css');
@import url('fonts/iosevka-papyri-regular.css');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,500,700');
@import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');

:root {
	--grey-1: #323334;
	--grey-2: #474849;
	--grey-3: #77787b;
	--grey-4: #a0a2a5;
	--grey-5: #bbbdc2;
	--grey-6: #d6d9de;
	--grey-bg: #e4e7ec;
	--grey-bg-pale: #f6f7f9;
	
	--red: #c82020;
	--red-bg: #f5d5d5;
	--red-bg-pale: #fae9e9;
	--orange: #d07820;
	--orange-bg: #f6e5d5;
	--orange-bg-pale: #faf2e9;
	--yellow: #a29429;
	--yellow-bg: #f2eecc;
	--yellow-bg-pale: #faf8ea;
	--green: #50a020;
	--green-bg: #deedd5;
	--green-bg-pale: #eef6e9;
	--cyan: #209c85;
	--cyan-bg: #ccf4ed;
	--cyan-bg-pale: #e5f9f6;
	--blue: #2068b0;
	--blue-bg: #d0e2f6;
	--blue-bg-pale: #e5f0fa;
	--purple: #a05088;
	--purple-bg: #ead9e5;
	--purple-bg-pale: #f6eef3;
	
	--font-family-sans: 'Roboto', 'Lato', 'Open Sans', 'Arial', sans-serif;
	--font-family-serif: 'Times', 'Times New Roman', serif;
	--font-family-mono: 'Iosevka Papyri', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Consolas', 'Lucida Console', monospace;
	--font-size-largest: 32px;
	--font-size-larger: 28px;
	--font-size-large: 20px;
	--font-size-regular: 16px;
	--font-size-small: 14px;
	--font-size-smaller: 12px;
	--font-size-smallest: 10px;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-bold: 500;
	--font-weight-black: 700;
	--line-height-regular: 1.675em;
	--line-height-condensed: 1.25em;
	--font-size-mono: 0.9375em; /* 15/16 */
	--font-size-mono-listing: 15px;
	--line-height-mono-listing: 1.4em;
	tab-size: 4;
	--tab-width: 4ch; /* fix for older browsers */
	
	--anchor-size: 37px;
	--anchor-font-size: 22px;
	--padding-left-main: 32px;
	
	--box-border: 1px solid var(--grey-3);
	--padding-panel: 8px 16px;
	--padding-main: 8px 8px 8px var(--padding-left-main);
	--width-main: 40rem;
	--margin-block-vertical: 0.7em;
	
	--animation-time: 0.5s;
}

html, body {
	margin: 0; padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body > article { flex-grow: 1; }
body > footer { text-align: center; font-size: var(--font-size-small); }
body > article, body > footer { width: var(--width-main); }

body, article table {
	font-family: var(--font-family-sans);
	font-weight: var(--font-weight-light);
	text-rendering: optimizeLegibility;
	color: var(--grey-1);
	word-break: keep-all;
	font-size: var(--font-size-regular);
	line-height: var(--line-height-regular);
}

a[href] { text-decoration: none; color: var(--blue); }
article p a, article .panel a, article .anchor-icon { border-bottom: 1px solid var(--grey-6); }
article a[href]:hover { color: var(--blue); border-color: var(--blue); }
:not(:not(h1, h2, h3, h4, h5, h6)) > a[href]:not(:hover) { color: inherit; }
b, strong { font-weight: var(--font-weight-bold); }

article hr { border: 0; height: 1px; background-color: var(--grey-6); }
article .metadata { font-size: var(--font-size-small); }

small { font-size: var(--font-size-small); }
sub, sup, a.footnote-ref { vertical-align: baseline; font-size: var(--font-size-smaller); position: relative; }
sub { top: 0.5em; } sup, a.footnote-ref { bottom: 0.5em; }

h1, h2, h3, h4 { margin-top: 1.5em; margin-bottom: 0.5em; }
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0; }
h1, h1 > a, h2, h2 > a, h3, h3 > a { line-height: var(--anchor-size); color: var(--grey-3); }
h1 { font-size: var(--font-size-largest); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-largest); font-weight: var(--font-weight-regular); }
h3 { font-size: var(--font-size-larger); font-weight: var(--font-weight-light); }
h4 { font-size: var(--font-size-small); line-height: 1em; margin-bottom: 0.25em; font-weight: var(--font-weight-bold); color: var(--grey-1); }
h5 { font-size: var(--font-size-smaller); }	
h6 { font-size: var(--font-size-smallest); }

img { display: block; }
article > img, section > img, .panel > img { margin-left: auto; margin-right: auto; }
p, ul, ol, hr, .panel { margin: var(--margin-block-vertical) 0; clear: both; }
body > header > :first-child, article > :first-child, section > :first-child, .panel > :first-child, article > .anchor:first-child + * { margin-top: 0; }
article > :last-child, section > :last-child, .panel > :last-child { margin-bottom: 0; }

.tabular-data { margin-left: auto; margin-right: auto; border-collapse: collapse; border: var(--box-border); }
.tabular-data > * > tr:first-child > th, .tabular-data > * > tr:first-child > td { border-top: var(--box-border); padding-top: 3px; }
.tabular-data > * > tr:last-child > th, .tabular-data > * > tr:last-child > td { border-bottom: var(--box-border); padding-bottom: 3px; }
.tabular-data > * > tr > th, .tabular-data > * > tr > td { padding: 1px .5em; }

.panel {
	display: block;
	padding: var(--padding-panel);
	background-color: var(--grey-bg-pale);
	border-bottom: 1px solid var(--grey-bg);
}
.panel.footnote { background-color: var(--yellow-bg-pale); border-color: var(--yellow-bg); }
.panel.warning, .panel.error { background-color: var(--red-bg-pale); border-color: var(--red-bg); }
.panel.correct, .panel.achievement { background-color: var(--green-bg-pale); border-color: var(--green-bg); }
.panel.info, .panel.action, .panel.question { background-color: var(--blue-bg-pale); border-color: var(--blue-bg); }
.panel.footnote { display: none; transition-property: opacity; transition-duration: var(--animation-time); }
.panel.footnote.show { display: block; }

.anchor { position: relative; }
.anchor::before {
	/* transparent box just to receive mouse hover in the margin */
	position: absolute;
	width: var(--padding-left-main);
	height: 100%;
	right: 100%;
	content: "";
}
.anchor-icon {
	position: absolute;
	top: 0; right: 100%; margin-right: var(--padding-left-main);
	width: var(--anchor-size); height: var(--anchor-size);
	background-color: var(--grey-bg-pale);
	line-height: var(--anchor-size);
	font-size: var(--anchor-font-size);
	text-size-adjust: none;
	text-align: center;
	color: var(--grey-5);
}
.anchor[href] .anchor-icon { cursor: pointer; }
.anchor[href]:hover .anchor-icon {
	color: var(--blue);
	border-color: var(--blue);
}
li .anchor-icon, .panel .anchor-icon { display: none; }
.anchor-icon, .noselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }

article { counter-reset: footnote-ref; }
a.footnote-ref {
	color: var(--blue);
	border: none;
	cursor: pointer;
}
a.footnote-ref::before {
	counter-increment: footnote-ref;
	content: '(' counter(footnote-ref) ')';
}

pre.listing, code, samp, kbd {
	font-family: var(--font-family-mono);
	font-weight: var(--font-weight-light);
}
pre.listing, pre.listing code, pre.listing samp, pre.listing kbd {
	line-height: var(--line-height-mono-listing);
	font-size: var(--font-size-mono-listing);
	white-space: pre-wrap;
}
code, samp, kbd { font-size: var(--font-size-mono); }
samp.stdout { color: var(--green); }
samp.stderr { color: var(--red); }
code, samp, kbd {
	background-color: var(--grey-bg-pale);
	border-bottom: 1px solid var(--grey-bg);
	white-space: pre;
	overflow-wrap: break-word;
	border-radius: 4px;
	padding: 2px 3px;
	margin: 0px -1px;
}
.panel code, .panel samp, .panel kbd {
	background-color: transparent;
	border-bottom: none;
	border-radius: initial;
	padding: initial;
	margin: initial;
}

@keyframes fadeInAndOut {
	0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }
}

.syntax-highlight span.name { color: var(--grey-1); }
.syntax-highlight span.name-def { color: var(--purple); }
.syntax-highlight span.punctuation, .syntax-highlight span.lparen, .syntax-highlight span.rparen, .syntax-highlight span.op, .syntax-highlight span.keyword-op { color: var(--grey-1); }
.syntax-highlight span.keyword { color: var(--blue); }
.syntax-highlight span.string { color: var(--green); }
.syntax-highlight span.number { color: var(--red); }
.syntax-highlight span.keyword-literal { color: var(--red); }
.syntax-highlight span.unmatched-paren, .syntax-highlight span.err { background-color: var(--red); color: white; }
.syntax-highlight span.type-annotation { color: var(--cyan); }
.syntax-highlight span.comment { color: var(--grey-3); font-style: italic; }
.syntax-highlight a.comment { font-style: italic; }
.syntax-highlight span.decorator { color: var(--purple); font-style: italic; }
.syntax-highlight span.lparen.hover-highlight, .syntax-highlight span.rparen.hover-highlight { background-color: var(--blue-bg); }

.syntax-highlight.lang-papyri span.op,
.syntax-highlight.lang-papyri span.lparen,
.syntax-highlight.lang-papyri span.rparen,
.syntax-highlight.lang-papyri span.keyword,
.syntax-highlight.lang-papyri span.decorator,
.syntax-highlight.lang-papyri span.name,
.syntax-highlight.lang-papyri span.name-def { font-weight: var(--font-weight-regular); }

pre.listing .line {
	position: relative;
	margin: 0;
}
pre.listing .line[data-line-no]::before {
	position: absolute;
	right: 100%;
	margin-right: 18px;
	display: none;
	white-space: pre;
	content: attr(data-line-no) ':';
	color: var(--grey-5);
	text-align: right;
}
pre.listing:hover .line[data-line-no]::before { display: inline-block; }

@media only screen {
	body { background: linear-gradient(to right, var(--grey-bg) 18em, white 18em); }
	body > header h1 { font-size: var(--font-size-large); }
	body > header [data-title]::before { content: attr(data-title); font-weight: var(--font-weight-bold); font-size: var(--font-size-small); text-transform: uppercase; color: var(--grey-3); }
	body > header nav { margin: var(--margin-block-vertical) 0; }
	body > header nav > ul { padding: 0; list-style: none; font-size: var(--font-size-small); }
	body > header li { line-height: var(--line-height-condensed); margin: var(--margin-block-vertical) 0; }
	body > header nav > ul > li { font-weight: var(--font-weight-bold); }
	body > header ul ul { margin: 0; padding-left: 2em; list-style-type: disc; font-weight: var(--font-weight-regular); }
	body > article, body > footer { margin: 2rem; margin-left: 20rem; }
}

@media only screen and (max-width: 980px) {
	body { background: linear-gradient(to right, var(--grey-bg) 3.5rem, white 3.5rem); }
	body > header, body > article, body > footer { margin: 0; margin-left: 3.5rem; padding: 2rem; }
	article, section { width: auto; max-width: var(--width-main); }
	code, samp, kbd { white-space: pre-wrap; }
}
@media only screen and (not (max-width: 980px)) {
	body > header { position: absolute; top: 0; left: 0; padding: 2rem 1rem; width: 13.5rem; }
	body > header nav { margin: 1.5em 0; }
}
@media only print {
	.anchor-icon { visibility: hidden; }
	body > header { display: none; }
	body > article { margin-left: auto; margin-right: auto; }
	article h1, article h2, article h3, article h4, article h5, article h6 { position: relative; page-break-after: avoid; break-after: avoid; }
	article h1 + *, article h2 + *, article h3 + *, article h4 + *, article h5 + *, article h6 + * { position: relative; page-break-before: avoid; break-before: avoid; }
	article h1, article h2 { page-break-before: always; break-before: always; margin-top: 0 !important; }
	article h1 + h2 { page-break-before: avoid; break-before: avoid; }
	article p, article .panel, article li, article table { position: relative; page-break-inside: avoid; break-inside: avoid; }
	pre.listing .line[data-line-no]::before { display: inline-block; }
}