@charset "UTF-8";
body {
  background-color: #2b2b2b;
  color: #bababa;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 20pt;
  line-height: 1.25; }

h1 {
  font-size: 180%;
  margin: 0 0 1em 0;
  letter-spacing: 2px; }

h2, h3 {
  font-size: 120%;
  margin: 0 0 0.2em 0;
  letter-spacing: 1px; }

h1, h2, h3 {
  font-weight: bold;
  color: #878787; }

a, nav li {
  -webkit-transition: color 300ms;
  -moz-transition: color 300ms;
  -ms-transition: color 300ms;
  -o-transition: color 300ms;
  transition: color 300ms;
  cursor: pointer;
  color: #6896ba;
  text-decoration: none; }
  a:hover, a:focus, nav li:hover, nav li:focus {
    color: #8baeca; }
  a:active, nav li:active {
    color: #aec7da; }

a, button, input, img, video {
  outline: 0; }

pre {
  margin: 0 !important; }

.hidden {
  display: none; }

body {
  display: flex; }

main {
  flex-grow: 1;
  margin-bottom: 90vh; }

aside {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  max-width: 500px;
  min-height: 100vh;
  max-height: 100vh;
  margin-left: 1.25em;
  border-left: 1px solid #5e5e5e;
  -webkit-box-shadow: -2px 0px 0.25em 0px rgba(94, 94, 94, 0.5);
  -moz-box-shadow: -2px 0px 0.25em 0px rgba(94, 94, 94, 0.5);
  box-shadow: -2px 0px 0.25em 0px rgba(94, 94, 94, 0.5); }

nav {
  flex-grow: 1; }

footer {
  flex-grow: 0; }

nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 1em 0 0 0;
  padding: 0 1em;
  position: relative;
  overflow: auto; }
  nav ol {
    margin: 0;
    padding: 0;
    list-style: none; }
    nav ol li {
      display: block;
      line-height: 1.4; }
  nav a {
    display: block; }

nav > ol > li:not(:last-child) {
  margin-bottom: 1em; }
nav > ol > li > span {
  display: block;
  background-color: #2b2b2b;
  top: 0;
  position: sticky;
  position: -webkit-sticky; }
  nav > ol > li > span:not(:last-child) {
    padding-bottom: 0.25em; }

ol ol ol > li {
  margin-left: 0.5em; }

nav li li {
  font-size: 80%; }

footer .prev, footer .next {
  width: 2em;
  cursor: pointer;
  -webkit-transition: color 300ms;
  -moz-transition: color 300ms;
  -ms-transition: color 300ms;
  -o-transition: color 300ms;
  transition: color 300ms; }
  footer .prev:hover, footer .next:hover {
    color: #6896ba; }
footer .prev {
  float: left; }
footer .next {
  float: right; }

main {
  padding: 1em 0 1em 3em; }

section {
  text-align: justify;
  margin: 2em 0;
  max-width: 800px; }
  section:last-child {
    margin-bottom: 0; }
  section > ol {
    list-style: none;
    margin: 1em 0;
    padding: 0; }
    section > ol > li {
      margin-bottom: 1em; }
      section > ol > li:last-child {
        margin-bottom: 0; }
      section > ol > li li {
        margin: 0.25em 0; }
    section > ol.explanation > li > .number {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      vertical-align: super;
      font-size: 80%;
      margin: 0 0.25em 0 0;
      color: #878787;
      font-weight: bold; }
    section > ol.exercises > li > .number {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      width: 3em;
      color: #a6e22e;
      margin-right: 0.25em; }
      section > ol.exercises > li > .number::before {
        content: "✎"; }
  section > ol.explanation > li ol {
    list-style: decimal; }
  section > ol.exercises > li ol {
    list-style: lower-alpha; }
  section ul {
    list-style: disc; }

::-webkit-scrollbar {
  width: 10px; }

::-webkit-scrollbar-track {
  background: #2b2b2b; }

::-webkit-scrollbar-thumb {
  background: #454545; }

nav {
  scrollbar-color: #bababa #454545; }

span.code {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important; }

.code {
  font-family: monospace;
  font-size: 85%; }

pre {
  line-height: 1 !important; }

.file {
  font-size: 80%; }
  .file > div:not(:first-child) {
    border-top: none !important; }
  .file .filename {
    position: relative;
    border: 1px solid #5e5e5e;
    padding: 0.25em 0.5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer; }
  .file .filecontent {
    border: 1px solid #5e5e5e;
    padding: 0.5em; }

.file {
  margin: 0.5em 0; }

.toggle {
  position: absolute;
  right: 0.5em;
  cursor: pointer;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: -webkit-transform 400ms ease-in-out, color 300ms;
  -moz-transition: -moz-transform 400ms ease-in-out, color 300ms;
  -ms-transition: -ms-transform 400ms ease-in-out, color 300ms;
  -o-transition: -o-transform 400ms ease-in-out, color 300ms;
  transition: transform 400ms ease-in-out, color 300ms; }
  .toggle:hover, .toggle:focus {
    color: #d4d4d4; }
  .toggle:active {
    color: #ededed; }
  .toggle::after {
    content: "⮜"; }

.on {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg); }

img.center {
  display: block;
  margin: 0.5em auto; }

#loader {
  position: fixed;
  bottom: 0.5em;
  left: 0.5em;
  width: 2em;
  height: 2em;
  background: url("../img/waiting.svg") no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%; }

footer {
  padding: 1em;
  text-align: center; }

/*# sourceMappingURL=main.css.map */