@font-face {
	font-family: 'Museo Sans 500 Regular';
	src: url('./MuseoSans-500.otf');
}
@font-face {
	font-family: 'monospace';
	/*src: url('./c.ttf');*/
	src: url('./ca.otf');
}
html {
	scroll-behavior: smooth;
}

body {
	font-family: "Museo Sans 500 Regular";
	background-color: #FFF;
	color: #444;
	line-height: 1.5;
}
@media print {
	@page {
		/* This magic prevents firefox and chrome from printing headers like url and timestamp on paper. */
		margin: 0;
	}
	body {
		margin: 1cm 0;
		font-size: 46.875%;
	}
	x-step,section {
		page-break-inside: avoid;
	}
	a[href='#Top'],.toc {
		display: none !important;
	}
}
@media screen {
	body {
		max-width: 106em;
		font-size: 62.5%;
		line-height: 1.5;
		margin: 0 auto;
		padding: 0 1em;
		/*Fixes issue with ios-safari believing it needs to render text differently
		  than every other browser on the planet.*/
		-webkit-text-size-adjust: 100%;
	}
	a:hover, a:active, a:focus {
		color: #444;
		border-bottom: thin solid #444;
		background-color: #EAE4A2;
	}
	a[target='_blank']::after {
		content: ' \⧉';
	}
}

/* Mobile devices (phones) */
@media screen and (max-width: 768px) {
	body { font-size: 50%; padding: 0 0.5em; }
	section { margin-left: 0.5em; margin-right: 0.5em; }
	section section { margin-left: 0.5em; margin-right: 0.5em; }
	h1 { font-size: 2.5em; }
	h2 { font-size: 1.2em; word-wrap: break-word; }

	.toc { margin: 1em 0.5em; font-size: 1.3em; padding: .5em; }
	.toc ol { margin-left: 0.3em; }

	pre { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.9em; }
	blockquote { margin-left: 1em; padding: 0 0.5em; }
	dl { padding-left: 1em; }
	ol, ul { padding-left: 1.5em; }
	dd { margin-left: 1em; }

	x-sidenote { float: none; display: block; margin: 0.5em 0; white-space: normal; }
	x-sidenote::before { display: none; }
	x-sidenote::after { content: '📝\FE0E '; margin: 0 0.3em 0 0; }
	x-right { float: none; display: block; margin: 0.5em 0; font-size: 0.9em; }
	x-wrap::before { font-size: 1.2em; right: 0.5em; }

	samp, code { word-break: break-word; white-space: normal; }
	kbd.add::before, kbd.del::before, kbd.plc::before { padding: 0 0.5em; margin-right: 0.5em; }
	a { padding: 0.3em 0; }
}

/* Very small screens (portrait phones) */
@media screen and (max-width: 480px) {
	body { font-size: 45%; }
	h1 { font-size: 2em; }
	pre { font-size: 0.85em; }
	.toc { font-size: 1.2em; }
	.toc ol li:before { font-size: 1.1em; }
}

/* Tablet devices */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	body { font-size: 56%; }
	section { margin-left: 1.5em; }
	pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
x-step {
	display: block;
	margin: 2em 0;
}
x-step::before {
	float: left;
	text-align: left;
	width:100%;
	font-weight: 700;
	font-size: .8em;
	counter-increment: step;
	content: "STEP "counter(step);
}
a, a:hover, a:active, a:focus {
	text-decoration: none;
	color: #336699;
}
section {
	margin-left: 2em;
	font-size: 1.5em;
}
h1 {
	text-align: center;
	font-size: 3.76916635em;
}
h2 {
	counter-reset: step;
	border-bottom: thin solid #AAA;
	font-size: 1.1em;
}
h3 {
	counter-reset: step;
	text-align: center;
	font-size: 1em;
	padding: 0 .5em;
}
section section {
	font-size: 1em;
	margin-left: 1.2em;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	padding-bottom: 0;
	border: thin dashed #EAE9D6;
}
section section pre {
	background-color: #EAE9D6;
	border: 0;
	margin-bottom: 0;
}
section section p {
	padding: 0 .5em;
}
kbd {
	font-weight: 700;
}
kbd.root::before {
	font-weight: 100;
	content: '# ';
}
kbd.user::before {
	font-weight: 100;
	content: '$ ';
}
kbd.secondary::before {
	font-weight: 100;
	content: '> ';
}
pre.edit {
	border: thin solid #AAE;
}
kbd.add,kbd.del,kbd.plc {
	line-height: 1em;
}
kbd.del,kbd.plc {
	font-weight: 100;
}
ins {
	text-decoration: none;
}
kbd.add::before {
	border-right: thin solid #666;
	margin-right: 1em;
	padding: 0 .7em;
	content: '+';
	color: #666;
}
kbd.del::before {
	border-right: thin solid #666;
	margin-right: 1em;
	padding: 0 .7em;
	content: '-';
}
kbd.plc::before {
	border-right: thin solid #666;
	margin-right: 1em;
	padding: 0 .7em;
	content: ' ';
}
x-omitted::before  {
	color: #888;
	content: '✂\FE0E✂\FE0E✂\FE0E  Output Trimmed ✂\FE0E✂\FE0E✂\FE0E';
}
x-wrap::before {
	color: #7f8e8f;
	content: '↩\FE0E\000A   ';
	position: relative;
	right: 1em;
	top: .65em;
	font-size: 1.5em;
	line-height: 0em;
	white-space: pre;
}
x-sidenote::before {
	content: '';
	display: inline-block;
	width: 1em;
	border-bottom: 1px dotted #AAA;
	margin: 0 0.5em 0.2em 0.5em;
}
x-sidenote::after {
	content: '📝\FE0E';
	margin-left: 0.3em;
}
x-sidenote {
	font-family: "Museo Sans 500 Regular";
    color: #444;
	font-size: .8em;
	float: right;
	clear: right;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	cursor: default;
	/* selection disablement is here to prevent accidental selection when
	   copy-pasting commands, not to be a jackass. */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Safari */
	-khtml-user-select: none;    /* Konqueror HTML */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Chrome */
}
x-right {
	float: right;
}
pre {
	border-radius: 1em;
	background-color: #EAE4A2;
	color: #000;
	border: thin dashed #AAE;
	font-family: monospace;
	padding: .2em .5em;
	margin: .5em 0;
}
samp {
	color: #001f5e;
	font-size: 1.17em;
	font-weight: 700;
	font-family: monospace;
	white-space: nowrap;
}
code {
	color: #5e1f00;
	font-size: 1.2em;
	font-family: monospace;
	white-space: nowrap;
}
var {
	font-weight: inherit;
	font-style: italic;
	white-space: nowrap;
}
blockquote {
	padding: 0 1em;
	margin-left: 2.5em;
	border-left: .33em solid #EAE4A2;
}
a[href='#Top'] {
	float: right;
	text-align: right;
	font-size: .8em;
	vertical-align: baseline;
	font-weight: 100;
}
dl {
	padding-left: 2em;
	background-color: #F7F7F7;
	border: thin solid #AAA;
}
strong {
	font-size: 0.9em;
	color: red;
}
.toc {
	background-color: #E8E8E7;
	border: thin solid #AAE;
	color: #000;
	margin: 2em;
	max-width: 42em;
	font-size: 1.5em;
	padding: .5em .2em  0 1em;
	box-sizing: border-box;
}
.toc ol {
	padding-left: 0;
	margin-left: .5em;
	list-style-position:inside;
	list-style-type: none;
	counter-reset:mainNum;
}
.toc ol li:before{
	content: counter(mainNum, decimal-leading-zero)" - ";
	counter-increment:mainNum;
	font-family: monospace;
	font-size: 1.25em;
}