@font-face {
  font-family: Spectral;
  src: url(woff2/spectral-regular.woff2);
}

body {
	font-family: Spectral;
	background: #111;
	color: #eee;
	min-width: 60%;
	max-width: 60%;
	margin: auto;
	padding: 1.5em;
}



article {
  margin-left: 0px;
  margin-right: auto;
	max-width: 60%;
	counter-reset: footnotes;
	counter-reset: footnotelabel;
}

.sidenote {
	counter-increment: footnotes; /* 1 */
}

.footnotelabel {
	counter-increment: footnotelabel; /* 1 */
}

.footnotelabel::after {
	content: '[' counter(footnotelabel) ']'; /* 1 */
	vertical-align: super; /* 2 */
	font-size: 0.7em; /* 3 */
	margin-left: 2px; /* 4 */
	color: #ddd; /* 5 */
}



.sidenote::before {
	content: counter(footnotes) ; /* 1 */
	vertical-align: super; /* 2 */
	font-size: 0.7em; /* 3 */
	margin-left: 2px; /* 4 */
	color: #fff; /* 5 */
}

.sidenote {
  float: right;
  color: #999;
  font-style: italic;
  font-size: 0.9em;
  width: 40%;
  margin-right: -100%;
  position: relative;
  transform: translateY(-100%);
}

@media only screen and (max-width: 796px) {


	body {
		font-family: Spectral;
		background: #111;
		color: #eee;
		width:95%;
		max-width: 100%;
		padding:0.5em;
		margin: 0px 0px;
	}

	article {
		max-width: 100%;
	}

	.sidenote {
		float:none;
		transform: translateY(0%);
		color: #999;
		font-style: italic;
		margin-right: 0;
		font-size: 0.7em;
	}

	.display .katex {
		font-size: 0.7em;
		overflow: scroll;
	}

}

header { font-size: 1.1em; }
footer { border-top: 0.25em solid #eee; margin-top: 1.5em; text-align: right; }
nav { margin-bottom: 1.5em; padding-bottom: 0.5em; }
nav a { margin-left: 0.2em; }
h1 { margin: 0.5em 0em; }
h2 { margin: 0.6em 0em; }
h3 { margin: 0.7em 0em; }
h4 { font-size: 1em; margin: 0.8em 0em; }
h5 { font-size: 1em; margin: 0.8em 0em; }
h6 { font-size: 1em; margin: 0.8em 0em; }
p {
	line-height: 1.5em;
	text-align: left;
	hyphens: auto;
	text-justify: inter-word;
	overflow-wrap: break-word;
	margin: 1em 0 0.5em 0;
}
a { color: #bbb;; text-decoration-thickness: 0.08em; }
li { line-height: 1.5em;}
ul { padding-left: 3em; }
ol { padding-left: 3em; }
dl { line-height: 1.5em; }
dt { font-weight: bold; }
dd { font-style: italic; }
hr { color: #bfbfbf; border: solid 0.05em; margin: 1.5em 0em; }
figure { color: #646464; margin: 0.5em 0; padding: 0.5em; }
figcaption { padding-top: 0.5em; font-style : italic; }
img { }
video { margin: 1em; }
table { border-collapse: collapse; }
tr { background-color: white; }
tr:nth-child(2n) { background-color: #f9f9f9; }
th {
	font-weight: bold;
	border: 0.08em solid #bfbfbf;
	padding: 0.5em 1em;
}
td {
	border: 0.08em solid #bfbfbf;
	padding: 0.5em 1em;
}
blockquote {
	padding: 0 1em;
	color: #ddd;
	border-left: 0.25em solid #bfbfbf;
}
pre {
	background-color: #f9f9f9;
	border: 0.1em solid #bfbfbf;
	padding: 0.5em 0.8em;
	border-radius: 0.2em;
}

img, video { width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
table{ max-width: 100%; overflow-x: auto; display: block; }



code span.al { color: #ff0000; font-weight: bold; }
/* Annotation */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; }
/* Attribute */
code span.at { color: #7d9029; }
/* BaseN */
code span.bn { color: #40a070; }
/* BuiltIn */
code span.bu { }
/* ControlFlow */
code span.cf { color: #007020; font-weight: bold; }
/* Char */
code span.ch { color: #4070a0; }
/* Constant */
code span.cn { color: #880000; }
/* Comment */
code span.co { color: #60a0b0; font-style: italic; }
/* CommentVar */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; }
/* Documentation */
code span.do { color: #ba2121; font-style: italic; }
/* DataType */
code span.dt { color: #902000; }
/* DecVal */
code span.dv { color: #40a070; }
/* Error */
code span.er { color: #ff0000; font-weight: bold; }
/* Extension */
code span.ex { }
/* Float */
code span.fl { color: #40a070; }
/* Function */
code span.fu { color: #06287e; }
/* Import */
code span.im { }
/* Information */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; }
/* Keyword */
code span.kw { color: #007020; font-weight: bold; }
/* Operator */
code span.op { color: #666666; }
/* Other */
code span.ot { color: #007020; }
/* Preprocessor */
code span.pp { color: #bc7a00; }
/* SpecialChar */
code span.sc { color: #4070a0; }
/* SpecialString */
code span.ss { color: #bb6688; }
/* String */
code span.st { color: #4070a0; }
/* Variable */
code span.va { color: #19177c; }
/* VerbatimString */
code span.vs { color: #4070a0; }
/* Warning */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; }