@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic);

/* Base styles */
body {
  color: #f0f0f0;
  background: #500;
  font-family: PT Sans, DejaVu Sans, Arial, sans;
  margin: 0;
  padding: 0;
}

a {
  color: #f0f0f0;
}

h1 {
  font-size: 150%;
  margin: 0;
  padding: 1em 0 0.5em;
}

h2 {
  font-size: 120%;
  margin: 1.5em 0 0.5em 0;
}

pre {
  margin: 0;
}

code {
  display: block;
  font-family: Consolas, Monaco, monospace;
  font-size: 10pt;
  overflow-x: auto;
  padding: 0.5em;
  scrollbar-width: thin;
  -moz-tab-size: 4;
  tab-size: 4;
}

pre code.hljs {
  /* compatible with school-book */
  padding: 16px 30px 20px;
}

aside {
  background: #600;
  bottom: 0;
  box-shadow: 0 0 1em #000000;
  display: flex;
  flex-direction: column;
  left: 0;
  padding: 0 1.5em 1em;
  position: fixed;
  top: 0;
  width: 16em;
}

.categories {
  flex: 0 4 25%;
}

.styles {
  flex: 1 1 50%;
}

aside ul,
aside li {
  list-style: none;
  margin: 0;
  padding: 0;
}

aside ul {
  position: relative;
  overflow-y: auto;
  scrollbar-width: thin;
}

aside ul::-webkit-scrollbar {
  width: 8px;
}

aside ul::-webkit-scrollbar-track {
  background: #4d0607;
  border-radius: 5px;
}

aside ul::-webkit-scrollbar-thumb {
  background: #926868;
  border-right: 1px solid #4d0607;
  border-left: 1px solid #4d0607;
  border-radius: 5px;
}

aside ul::-webkit-scrollbar-thumb:hover {
  background: #7f5555;
}

aside ul::-webkit-scrollbar-thumb:active {
  background: #5d3333;
}

aside ul a {
  display: block;
  padding: 1px 0.5em 1px 1em;
  text-decoration: none;
}

aside ul a:focus,
aside ul a:hover {
  background: #500;
  outline: none;
}

aside ul a.current:before {
  content: "▶";
  font-size: smaller;
  position: absolute;
  left: 0;
}

main {
  margin-left: 18em;
  min-width: 36em;
  padding: 1px 4em;
}

main > div {
  margin: 2.5em 0 3em;
}

.hidden {
  display: none;
}