@font-face {
  font-family: SpyAgency;
  src: url('/assets/fonts/spyagencyv3.ttf');
}

/* lora-regular - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'),
       url('/assets/fonts/lora-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/lora-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lora-italic - latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: local('Lora Italic'), local('Lora-Italic'),
       url('/assets/fonts/lora-v12-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/lora-v12-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lora-700 - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: local('Lora Bold'), local('Lora-Bold'),
       url('/assets/fonts/lora-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/lora-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lora-700italic - latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: local('Lora Bold Italic'), local('Lora-BoldItalic'),
       url('/assets/fonts/lora-v12-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/lora-v12-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* bitter-regular - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: local('Bitter Regular'), local('Bitter-Regular'),
       url('/assets/fonts/bitter-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* bitter-italic - latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  src: local('Bitter Italic'), local('Bitter-Italic'),
       url('/assets/fonts/bitter-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* bitter-700 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: local('Bitter Bold'), local('Bitter-Bold'),
       url('/assets/fonts/bitter-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
  --serif-font: Lora, Georgia, Cambria, 'Times New Roman', Times, serif;
  --sans-font: Bitter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --mono-font: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;
  --nav-font-size: 1rem;
  --mag-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEzIj48ZyBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2FhYSIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTExLjI5IDExLjcxbC00LTQiLz48Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iNCIvPjwvZz48L3N2Zz4KICA=');
  --scissors-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAA6UlEQVQokZ3SvytGcRTH8ZfrUo9sDJJJfpWYDEZkkMkku7IJ/4IoG5vJarWZ/AlKrJIVo/QYJIZ7bnl0b93v85m+3zrvzznn06GZlnCG2Yb1HdrAD57xgpkUOEcbx/F/xVGKwVB0H/nzXk0xyHCK+4AvUuBSWwGfdwMP6swAprBYfnLsYQ2fMXKGXrxhHi284xBzWMYXHrHZo9hxDH1R3MIHJjGBhzAsb2Adt7hCf46DmvFvwmwhOk7jDsP4DtOsbvddRXD/L28n1mnjCeNV8EDAJzXmo1hR5Fepa0WAXWlb9eiNdYn9FOAXZbMrt2GlyTYAAAAASUVORK5CYII=');

  /* standard color palette, change vars for themes */
  --bgcolor: #222;
  --fgcolor: #eee;
  --boardfg: white;
  --boardbg: black;
  --high:    #ccc;
  --medhigh: #aaa;
  --lowhigh: #888;
  --highlow: #666;
  --medlow:  #555;
  --low:     #444;
  --lowlow:  #333;

  background: var(--bgcolor);
  color: var(--fgcolor);
  font-size: 20px;
  font-weight: 400;
  font-family: var(--serif-font);
  /*line-height: 1.75rem;*/
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* normalize */
  margin: 0;
  margin-block-start:0;
  margin-block-end:0;
  margin-inline-start:0;
  margin-inline-end:0;
  padding: 0;
  padding-block-start:0;
  padding-block-end:0;
  padding-inline-start:0;
  padding-inline-end:0;

  /* all the things */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

br {
  margin: 0;
}

.spy {
  font-family: SpyAgency, sans-serif;
}

.important {
  display: block;
  border-left: solid 2px var(--medhigh);
  padding-left: 1rem;
  padding-right: 1rem;
}

[contenteditable] {
  outline: none;
}

a {
  color: var(--fgcolor);
  border-bottom: dotted 2px var(--highlow);
  text-decoration: none;
  margin-top: 0;
  margin-bottom: 0;
}
a[href^="http"] {
  text-decoration: none;
  color: var(--high);
  border: none;
} 
a[href^="http"]:not(.nodecor)::after {
  content: '»';
  color: var(--low);
} 
a[href^="http"]:not(.nodecor)::before {
  content: '«';
  color: var(--low);
} 
a:hover, .homelink:hover, .nav-link:hover {
  color: var(--medhigh);
  font-style: normal;
}
a.nav-link {
  color: var(--medlow);
  border: none;
}
a.nav-link::before { color: var(--medlow) !important; }
a.nav-link::after { color: var(--medlow) !important; }
a.homelink {
  color: var(--medlow);
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 400;
  border: none;
  margin-left: .1rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}
a.nav-link, 
a[href^="http"].nav-link:hover,
{
  font-style: normal;
  content: "";
}

.figure {
  margin-top: 2.4rem;
  text-align: center;
}

ul, ol {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

ul {
  list-style-type: square;
}

li {
  margin: 0;
  margin-left: 1.5rem;
}

.container {
  margin-top: 2rem;
}

h1 {
  font-size: 1.4rem;
  line-height: 1.5rem;
  margin: 0;
}
h1 a {
  border: none;
}
h2#subtitle {
  font-weight: normal;
  padding: 0;
  margin: 0;
  margin-top: .1rem;
  font-size: 1.05rem;
  border: 0;
  color: var(--medhigh);
}
h2#subtitle:hover {
  cursor: inherit;
  content: '';
}
h2#subtitle:hover:before {
  content: '' !important;
  padding: 0;
  vertical-align: top;
}
h2, h3, h4, h5, h6 {
  line-height: 1.4rem;
}
h2 {
  border-bottom: 1px solid var(--medhigh);
  padding-bottom: .3rem;
  font-size: 1.3rem;
}
h3 {
  font-size: 1.3rem;
}
h2, h3, h4, h5, h6 {
  font-family: var(--sans-font);
}
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover {
  cursor: pointer;
}
h2:not(.nolink):hover:before,
h3:not(.nolink):hover:before,
h4:not(.nolink):hover:before,
h5:not(.nolink):hover:before,
h6:not(.nolink):hover:before {
  font-weight: normal;
  padding-bottom: .1rem;
  vertical-align: top;
}

figcaption, .caption {
  text-align: center;
	font-size: 1rem;
	font-style: italic;
}

.center {
  text-align: center;
  display: block;
  float: center;
}

div[class^=co-],
div[class=Reminder],
section[class^=co-] {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .01rem;
  padding-bottom: .01rem;
  margin-left: 0;
  margin-right: 0;
  border-left: solid 1.75rem var(--low);
  background: var(--lowlow); 
  text-align: left;
}

div[class=Reminder] {
  border-color: darkred;
}

blockquote {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
  padding-bottom: .01rem;
  margin-left: 0;
  margin-right: 0;
  border-left: solid 1.75rem transparent;
}
blockquote p {
  margin: 0;
}

pre, code, .sourceCode {
  font-family: var(--mono-font);
}

code {
  letter-spacing: -0.004rem;
  border-radius: 0.1rem;
  overflow-wrap: break-word;
  padding-top: 4px;
  padding-bottom: 1px;
  padding-left: 4px;
  padding-right: 4px;
}
pre code {
  letter-spacing: -0.004rem;
  display: block;
  color: var(--boardfg);
  background-color: var(--boardbg);
  background-image: var(--scissors-image);
  background-repeat: no-repeat;
  background-position: 99.2% 4px;
  font-size: 12px;
  page-break-inside: avoid;
  line-height: 1.2rem;
  word-wrap: break-word;*/
  max-width: 100%;
  overflow: hide;
  border: 1px dashed var(--fgcolor);
  white-space: pre-wrap;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}
pre code.zoomed {
  margin: 0;
  position: fixed;
  top: 0rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  font-size: 1.6rem;
  line-height: 2.2rem;
  border: none;
  overflow: auto;
  background: var(--boardbg);
  color: var(--boardfg);
}

.hide {
  display: none;
}

img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

table {
	border-bottom: 1px solid var(--medhigh);
	border-right: 1px solid var(--medhigh);
  border-spacing: 0;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
  font-size: .85rem;
}
table caption {
	font-size: 1rem;
	font-style: italic;
  caption-side: bottom;
}
table th {
  padding: .2rem 1rem;
  background-color: var(--lowlow);
	border-top: 1px solid var(--medhigh);
	border-left: 1px solid var(--medhigh);
}
table td {
  padding: .2rem 1rem;
	border-top: 1px solid var(--medhigh);
	border-left: 1px solid var(--medhigh);
  vertical-align: top;
}

nav {
  margin: 0;
  font-family: var(--sans-font);
}

.nav-bar {
  margin: 0;
  display: block;
  padding-left: 1rem;
  background: var(--bgcolor);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  right: 0;
}
.nav-right {
  margin: 0;
  position: absolute;
  right: 1.5rem;
  top: 0rem;
  white-space: nowrap;
  padding-left: 1.5rem;
  display: flex;
}

.nav-links {
  display: none;
  white-space: pre-wrap;
  position: fixed;
  top: 1.8rem;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 99;
  background: var(--bgcolor);
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  line-height: 1rem;
  list-style-type: none;
}
.nav-item {
  line-height: 2rem;
  font-size: var(--nav-font-size);
  white-space: nowrap;
  display: inline-block;
  font-weight: bold;
  margin-left: -1rem;
  text-align: left;
  margin-right: 1rem;
}

.sidebar-button {
  display: inline-block;
  margin: 0;
  margin-right: .75rem;
  vertical-align: middle;
  cursor: pointer;
}
.sidebar-button:hover {
  color: var(--medhigh);
}
.sidebar-button::before {
  content: '≡' ;
  font-size: 3rem;
  color: var(--medlow);
}

main {
  margin-top: 3rem;
}

main, footer {
  max-width: 720px;
}

footer {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  color: var(--medlow);
}
footer a, 
footer a[href^="http"]
{
  border: 0;
  text-decoration: none;
  font-style: normal;
  font-size: .75rem;
  line-height: 1.4;
  content: "";
  color: var(--medlow);
}
footer a[href^=http]::before { content: '«';}
footer a[href^=http]::after { content: '»'; }
footer a[href^=http]:hover { color: var(--lowhigh);}
footer a[href^=http]:hover::before { color: var(--medlow);}
footer a[href^=http]:hover::after { color: var(--medlow);}
footer p {
  font-size: .75rem;
  line-height: 1.4;
}

/* ----------------------------------------------- */
@media (max-width: 304px) {

blockquote {
  border-left-width: .75rem;
}

span.hideable {
  display: none;
}

}

/* ----------------------------------------------- */
@media (max-width: 780px) {
  .nav-right span.hideable {
    display: none;
  }
  main, footer {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* ----------------------------------------------- */
@media (min-width: 780px) {
  main, footer {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ----------------------------------------------- */
/* don't forget to change the onresize js as well to
 * match the px value */
@media (min-width: 1310px) {

.sidebar-button {
  display: none;
}

.nav-links {
  display: inline-block;
  border: 0;
  white-space: nowrap;
  position: relative;
  top: .2rem;
}

.nav-item {
  display: inline-block;
  white-space: nowrap;
  font-weight: normal;
  margin: 0;
  margin-left: 1.3rem;
  position: relative;
}

}