@charset "UTF-8";
/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
@font-face {
  font-family: 'gangster-regular';
  font-style: normal;
  src: url(./../fonts/GangsterGrotesk-Regular.otf) format("opentype"); }

@font-face {
  font-family: 'FiraMono-regular';
  font-style: normal;
  src: url(./../fonts/FiraMono-Regular.ttf) format("truetype"); }

@font-face {
  font-family: 'hk-gothic';
  font-weight: bold;
  font-style: normal;
  src: url(./../fonts/HK-gothic.ttf) format("truetype"); }

/* ~

Font names & weights

Font sizes – expects 3 vals: small, large, very-large

~ */
/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
@font-face {
  font-family: 'gangster-regular';
  font-style: normal;
  src: url(./../fonts/GangsterGrotesk-Regular.otf) format("opentype"); }

@font-face {
  font-family: 'FiraMono-regular';
  font-style: normal;
  src: url(./../fonts/FiraMono-Regular.ttf) format("truetype"); }

@font-face {
  font-family: 'hk-gothic';
  font-weight: bold;
  font-style: normal;
  src: url(./../fonts/HK-gothic.ttf) format("truetype"); }

/* ~

Font names & weights

Font sizes – expects 3 vals: small, large, very-large

~ */
h1, h2, h3, h4, h5, h6, p {
  color: #fff; }

h3 {
  padding-bottom: 1em; }

/* ~ 

Font style generator

~ */
/* ~ 

Generate global responsive font classes

! page specific font classes are set in the page's stylesheet !

~ */
@media only screen and (max-width: 768px) {
  a#title {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  a#title {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 1440px) {
  a#title {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

a#title {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  header #author {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  header #author {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 1440px) {
  header #author {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

header #author {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  h1, a.link-button.large {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.2rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h1, a.link-button.large {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.4rem; } }

@media only screen and (min-width: 1440px) {
  h1, a.link-button.large {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.56rem; } }

h1, a.link-button.large {
  text-transform: uppercase; }

h1, a.link-button.large {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  h2 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.56rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h2 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.56rem; } }

@media only screen and (min-width: 1440px) {
  h2 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.56rem; } }

h2 {
  text-transform: uppercase; }

h2 {
  color: #e6e6e6; }

h2 {
  line-height: 1.2em; }

@media only screen and (max-width: 768px) {
  h2 {
    padding-bottom: 0.25em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h2 {
    padding-bottom: 0.25em; } }

@media only screen and (min-width: 1440px) {
  h2 {
    padding-bottom: 0.25em; } }

@media only screen and (max-width: 768px) {
  h2 {
    padding-top: 2em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h2 {
    padding-top: 2em; } }

@media only screen and (min-width: 1440px) {
  h2 {
    padding-top: 2em; } }

@media only screen and (max-width: 768px) {
  h3 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.3rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h3 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.3rem; } }

@media only screen and (min-width: 1440px) {
  h3 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.3rem; } }

h3 {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  h3 {
    padding-bottom: 0.25em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h3 {
    padding-bottom: 0.25em; } }

@media only screen and (min-width: 1440px) {
  h3 {
    padding-bottom: 0.25em; } }

@media only screen and (max-width: 768px) {
  h3 {
    padding-top: 1em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h3 {
    padding-top: 1em; } }

@media only screen and (min-width: 1440px) {
  h3 {
    padding-top: 1em; } }

@media only screen and (max-width: 768px) {
  h4 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h4 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 1440px) {
  h4 {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

h4 {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  h4 {
    padding-bottom: 0.25em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  h4 {
    padding-bottom: 0.25em; } }

@media only screen and (min-width: 1440px) {
  h4 {
    padding-bottom: 0.25em; } }

@media only screen and (max-width: 768px) {
  p {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  p {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 1440px) {
  p {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

p {
  color: #e6e6e6; }

p {
  line-height: 1.5em; }

@media only screen and (max-width: 768px) {
  button[data-toggle-content] {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  button[data-toggle-content] {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 1440px) {
  button[data-toggle-content] {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

button[data-toggle-content] {
  color: #0453d1; }

button[data-toggle-content] {
  line-height: 1.5em; }

@media only screen and (max-width: 768px) {
  button[data-toggle-content] span {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 0.85em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  button[data-toggle-content] span {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 0.85em; } }

@media only screen and (min-width: 1440px) {
  button[data-toggle-content] span {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 0.85em; } }

button[data-toggle-content] span {
  color: #0453d1; }

button[data-toggle-content] span {
  line-height: 1.5em; }

@media only screen and (max-width: 768px) {
  em {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  em {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 1440px) {
  em {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

em {
  color: #0453d1; }

@media only screen and (max-width: 768px) {
  code, span.secondary-content, span.secondary-content a {
    font-family: "FiraMono-regular", monospace;
    font-weight: 300;
    font-size: 1.1rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  code, span.secondary-content, span.secondary-content a {
    font-family: "FiraMono-regular", monospace;
    font-weight: 300;
    font-size: 1.1rem; } }

@media only screen and (min-width: 1440px) {
  code, span.secondary-content, span.secondary-content a {
    font-family: "FiraMono-regular", monospace;
    font-weight: 300;
    font-size: 1.1rem; } }

code, span.secondary-content, span.secondary-content a {
  color: #0453d1; }

code, span.secondary-content, span.secondary-content a {
  line-height: 1.35em; }

@media only screen and (max-width: 768px) {
  pre {
    margin-bottom: 2em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  pre {
    margin-bottom: 2em; } }

@media only screen and (min-width: 1440px) {
  pre {
    margin-bottom: 2em; } }

@media only screen and (max-width: 768px) {
  .pretitle, .toc_pretitle {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  .pretitle, .toc_pretitle {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1rem; } }

@media only screen and (min-width: 1440px) {
  .pretitle, .toc_pretitle {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1rem; } }

.pretitle, .toc_pretitle {
  text-align: left; }

.pretitle, .toc_pretitle {
  color: #b3b3b3; }

@media only screen and (max-width: 768px) {
  article button {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  article button {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 1440px) {
  article button {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

article button {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  figcaption {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  figcaption {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (min-width: 1440px) {
  figcaption {
    font-family: "gangster-regular", sans-serif;
    font-weight: 300;
    font-size: 1.125rem; } }

@media only screen and (max-width: 768px) {
  button.sidebar-toggle, nav.main a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 0.9em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  button.sidebar-toggle, nav.main a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 0.9em; } }

@media only screen and (min-width: 1440px) {
  button.sidebar-toggle, nav.main a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 0.9em; } }

button.sidebar-toggle, nav.main a {
  text-transform: uppercase; }

button.sidebar-toggle, nav.main a {
  color: #e6e6e6; }

@media only screen and (max-width: 768px) {
  #TableOfContents ul li div.chapter_wrapper a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  #TableOfContents ul li div.chapter_wrapper a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 1440px) {
  #TableOfContents ul li div.chapter_wrapper a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

#TableOfContents ul li div.chapter_wrapper a {
  text-transform: uppercase; }

#TableOfContents ul li div.chapter_wrapper a {
  color: #D9D9D9; }

@media only screen and (max-width: 768px) {
  #TableOfContents ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  #TableOfContents ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 1440px) {
  #TableOfContents ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

#TableOfContents ul li ul li a {
  text-transform: uppercase; }

#TableOfContents ul li ul li a {
  color: #D9D9D9; }

@media only screen and (max-width: 768px) {
  #TableOfContents ul li ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  #TableOfContents ul li ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

@media only screen and (min-width: 1440px) {
  #TableOfContents ul li ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 1em; } }

#TableOfContents ul li ul li ul li a {
  text-transform: capitalize; }

#TableOfContents ul li ul li ul li a {
  color: #D9D9D9; }

#TableOfContents ul li ul li ul li a {
  line-height: 1.8em; }

@media only screen and (max-width: 768px) {
  #TableOfContents ul li ul li ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 0.9em; } }

@media only screen and (min-width: 768px) and (max-width: 1440px) {
  #TableOfContents ul li ul li ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 0.9em; } }

@media only screen and (min-width: 1440px) {
  #TableOfContents ul li ul li ul li ul li a {
    font-family: "hk-gothic", sans-serif;
    font-weight: 300;
    font-size: 0.9em; } }

#TableOfContents ul li ul li ul li ul li a {
  text-transform: capitalize; }

#TableOfContents ul li ul li ul li ul li a {
  color: #D9D9D9; }

#TableOfContents ul li ul li ul li ul li a {
  line-height: 1.8em; }

/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
@font-face {
  font-family: 'gangster-regular';
  font-style: normal;
  src: url(./../fonts/GangsterGrotesk-Regular.otf) format("opentype"); }

@font-face {
  font-family: 'FiraMono-regular';
  font-style: normal;
  src: url(./../fonts/FiraMono-Regular.ttf) format("truetype"); }

@font-face {
  font-family: 'hk-gothic';
  font-weight: bold;
  font-style: normal;
  src: url(./../fonts/HK-gothic.ttf) format("truetype"); }

/* ~

Font names & weights

Font sizes – expects 3 vals: small, large, very-large

~ */
header {
  width: 100%;
  position: relative;
  border-bottom: 1px solid #424242;
  background-color: #000;
  box-sizing: border-box;
  z-index: 10000;
  padding: 1em 2em 1em 2em; }
  header a#title {
    display: inline-block;
    color: #fff;
    text-decoration: none; }
  header nav.main {
    display: inline-block;
    float: right;
    margin-top: 3px; }
    header nav.main a {
      text-decoration: none; }

/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
@font-face {
  font-family: 'gangster-regular';
  font-style: normal;
  src: url(./../fonts/GangsterGrotesk-Regular.otf) format("opentype"); }

@font-face {
  font-family: 'FiraMono-regular';
  font-style: normal;
  src: url(./../fonts/FiraMono-Regular.ttf) format("truetype"); }

@font-face {
  font-family: 'hk-gothic';
  font-weight: bold;
  font-style: normal;
  src: url(./../fonts/HK-gothic.ttf) format("truetype"); }

/* ~

Font names & weights

Font sizes – expects 3 vals: small, large, very-large

~ */
aside {
  z-index: 6;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: auto;
  border-right: 1px solid #424242;
  background-color: #303030;
  border-left: 10px solid #303030;
  border-bottom: 10px solid #303030;
  outline: 1px solid #424242; }
  aside:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    border-left: 1px solid #161616;
    border-bottom: 1px solid #161616;
    pointer-events: none; }
  aside div.sidebar-wrapper {
    position: relative;
    display: inline-block;
    height: 100%;
    transition: background-color .25s; }
    aside div#toc-wrapper.sidebar-wrapper {
      background-color: #303030; }
      aside div#toc-wrapper.sidebar-wrapper:hover {
        background-color: #373737; }
    aside div#rs-wrapper.sidebar-wrapper {
      background-color: #303030; }
      aside div#rs-wrapper.sidebar-wrapper:hover {
        background-color: #373737; }
    aside div.sidebar-wrapper button.sidebar-toggle {
      top: 0;
      left: -60px;
      z-index: 1000;
      position: absolute;
      text-transform: uppercase;
      width: 50px;
      height: 250px;
      white-space: pre;
      display: inline-block;
      background: none;
      background-color: #303030;
      border: none;
      border-left: 1px solid #424242;
      border-bottom: 1px solid #424242;
      padding: 0; }
      aside div.sidebar-wrapper button.sidebar-toggle:hover {
        cursor: w-resize; }
      aside div.sidebar-wrapper button.sidebar-toggle:focus {
        outline: 0; }
      aside div.sidebar-wrapper button.sidebar-toggle span.sidebar-toggle-label {
        position: absolute;
        transform-origin: left top;
        transform: rotate(-270deg) translateX(-45%) translateY(-50%);
        left: 50%; }
    aside div.sidebar-wrapper .sidebar_content {
      width: 100%;
      height: 100%;
      max-height: 90vh;
      overflow-y: auto; }
      aside div.sidebar-wrapper .sidebar_content nav#TableOfContents {
        position: relative;
        top: 0;
        display: inline-block;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        background-color: black;
        padding-top: 4em; }
        aside div.sidebar-wrapper .sidebar_content nav#TableOfContents a {
          text-decoration: none;
          color: #fff;
          font-family: "gangster-regular";
          font-weight: 400; }
        aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] {
          padding-bottom: 4em;
          position: relative; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter]:hover {
            cursor: pointer; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] > ol {
            padding-top: 0.5em;
            padding-left: 2em;
            border-top: solid 1px #424242;
            height: 45px; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] > ol li {
              padding-top: 1em; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] > ol li > ol {
                padding-left: 0.5em; }
                aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] > ol li > ol li {
                  padding-top: 0.5em; }
                  aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] > ol li > ol li > ol {
                    padding-left: 0.5em; }
                    aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] > ol li > ol li > ol li {
                      padding-top: 0.5em; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-0[chapter] {
            background-color: #232323; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-0[chapter] .chapter_wrapper {
              background-color: #232323; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-0[chapter]:hover {
              background-color: #292929; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-0[chapter]:hover .chapter_wrapper {
                background-color: #292929; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-1[chapter] {
            background-color: #262626; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-1[chapter] .chapter_wrapper {
              background-color: #262626; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-1[chapter]:hover {
              background-color: #2c2c2c; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-1[chapter]:hover .chapter_wrapper {
                background-color: #2c2c2c; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-2[chapter] {
            background-color: #292929; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-2[chapter] .chapter_wrapper {
              background-color: #292929; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-2[chapter]:hover {
              background-color: #2f2f2f; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-2[chapter]:hover .chapter_wrapper {
                background-color: #2f2f2f; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-3[chapter] {
            background-color: #2c2c2c; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-3[chapter] .chapter_wrapper {
              background-color: #2c2c2c; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-3[chapter]:hover {
              background-color: #323232; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-3[chapter]:hover .chapter_wrapper {
                background-color: #323232; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-4[chapter] {
            background-color: #2e2e2e; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-4[chapter] .chapter_wrapper {
              background-color: #2e2e2e; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-4[chapter]:hover {
              background-color: #373737; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-4[chapter]:hover .chapter_wrapper {
                background-color: #373737; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-5[chapter] {
            background-color: #2e2e2e; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-5[chapter] .chapter_wrapper {
              background-color: #2e2e2e; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-5[chapter]:hover {
              background-color: #373737; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li.ch-5[chapter]:hover .chapter_wrapper {
                background-color: #373737; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"] {
            background-color: black; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"] .chapter_wrapper {
              background-color: black; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"]:hover {
              background-color: black; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"]:hover .chapter_wrapper {
                background-color: black; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"] .chapter_wrapper .chapter_toggle {
              background-image: url("./../icons/folder_up.png"); }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"] .chapter_wrapper .chapter_toggle:hover {
                cursor: n-resize; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="false"] .chapter_wrapper .chapter_toggle {
            background-image: url("./../icons/folder_down.png"); }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="false"] .chapter_wrapper .chapter_toggle:hover {
              cursor: s-resize; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] a {
            display: block; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] div.chapter_wrapper {
            position: absolute;
            display: inline-block;
            overflow-x: hidden;
            top: 0;
            padding: 1em;
            border: solid 1px #424242;
            border-bottom: none;
            border-left: none; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] div.chapter_wrapper span.toc_pretitle {
              display: block;
              padding-bottom: 0.5em; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] div.chapter_wrapper a {
              display: inline-block;
              margin-right: 1em; }
            aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] div.chapter_wrapper button.chapter_toggle {
              display: inline-block;
              background: none;
              border: none;
              cursor: pointer;
              width: 22px;
              height: 14px;
              background-size: cover; }
              aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter] div.chapter_wrapper button.chapter_toggle:focus {
                outline: none; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="false"] ol li {
            visibility: hidden; }
          aside div.sidebar-wrapper .sidebar_content nav#TableOfContents ol li[chapter][data-chapter-toggled="true"] ol li {
            visibility: visible; }

/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
@font-face {
  font-family: 'gangster-regular';
  font-style: normal;
  src: url(./../fonts/GangsterGrotesk-Regular.otf) format("opentype"); }

@font-face {
  font-family: 'FiraMono-regular';
  font-style: normal;
  src: url(./../fonts/FiraMono-Regular.ttf) format("truetype"); }

@font-face {
  font-family: 'hk-gothic';
  font-weight: bold;
  font-style: normal;
  src: url(./../fonts/HK-gothic.ttf) format("truetype"); }

/* ~

Font names & weights

Font sizes – expects 3 vals: small, large, very-large

~ */
aside#rs-wrapper {
  z-index: 5;
  position: fixed;
  top: 0;
  pointer-events: auto;
  height: 100vh;
  border-right: 1px solid #424242;
  background-color: #303030;
  transition: background-color .15s; }
  aside#rs-wrapper:hover {
    background-color: #323232 !important; }
  aside#rs-wrapper button#rs-toggle {
    position: relative;
    text-transform: uppercase;
    width: 40px;
    height: 100%;
    color: #fff;
    white-space: pre;
    display: inline-block;
    background: none;
    border: none;
    border-right: 1px solid #2e2e2e;
    border-left: 1px solid #424242;
    padding: 0;
    float: left; }
    aside#rs-wrapper button#rs-toggle:focus {
      outline: 0; }
    aside#rs-wrapper button#rs-toggle span#rs-toggle-label {
      position: absolute;
      transform-origin: left 0;
      transform: rotate(-90deg) translateY(-50%);
      top: 57%;
      left: 50%; }

div#reading-progress-bar {
  position: absolute;
  z-index: 5;
  z-index: 1000;
  width: 100%;
  height: 4px;
  background-color: #b3b3b3; }

html body {
  transition: filter .75s;
  background-color: #000;
  overflow-x: hidden;
  position: relative;
  width: 100%; }
  html body a.link-button {
    padding: 0.5em 1em;
    cursor: pointer;
    margin: 2px;
    border: 2px solid #0453d1;
    margin: 0 5px;
    transition: all .25s;
    filter: blur(0px); }
    html body a.link-button.large {
      padding-top: calc(0.5em + 5px); }
      html body a.link-button.large:hover {
        filter: blur(8px); }
    html body a.link-button:hover {
      background-color: #0453d1;
      filter: blur(3px); }
    html body a.link-button:active {
      color: black; }

body::-webkit-scrollbar {
  width: 0.5em; }

body::-webkit-scrollbar-track {
  background-color: black; }

body::-webkit-scrollbar-thumb {
  background-color: #5c5c5c; }

header#home {
  position: absolute; }

main#home div.text {
  position: absolute;
  margin-left: 2em; }
  main#home div.text p {
    z-index: 10000;
    position: relative; }
    @media only screen and (max-width: 768px) {
      main#home div.text p {
        margin-top: 6em;
        width: 95%; } }
    @media only screen and (min-width: 768px) and (max-width: 1440px) {
      main#home div.text p {
        margin-top: 4em;
        width: 50%; } }
    @media only screen and (min-width: 1440px) {
      main#home div.text p {
        margin-top: 4em;
        width: 30%; } }
  main#home div.text a.link-button {
    margin: 0;
    margin-top: 1em;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;
    z-index: 10000; }

main#home canvas {
  margin: 0;
  padding: 0; }

main#home div#overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  overflow: hidden;
  /* top right bottom left */ }
  main#home div#overlay img {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

main#home .data-dragger-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1001;
  pointer-events: none; }
  main#home .data-dragger-container [data-render-line] {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100vh;
    background-color: #0453d1; }

/* ~ 

offsets

~ */
/* ~ 

article responsive offsets

$sizes var needs 3 vals: small device, medium device, large device

~ */
main.single {
  position: relative;
  padding: 6em 0 0 0;
  margin: 0; }
  main.single article {
    width: 100%; }
    main.single article section {
      position: relative;
      display: grid;
      width: 100%;
      border-top: solid 1px #424242;
      background-color: #2c2c2c;
      transition: all .125s; }
      @media only screen and (max-width: 768px) {
        main.single article section {
          grid-template-columns: 10px repeat(18, 1fr) 10px; } }
      @media only screen and (min-width: 768px) and (max-width: 1440px) {
        main.single article section {
          grid-template-columns: 30px repeat(18, 1fr) 30px; } }
      @media only screen and (min-width: 1440px) {
        main.single article section {
          grid-template-columns: 30px repeat(18, 1fr) 30px; } }
      main.single article section span.pretitle {
        display: block;
        padding-top: 0.5em; }
      main.single article section[data-section-toggled="false"] {
        background-color: #2c2c2c;
        padding-bottom: 0px; }
        main.single article section#section-0[data-section-toggled="false"] {
          background-image: linear-gradient(180deg, #232323 33%, #212121 100%);
          background-color: #292929; }
          main.single article section#section-0[data-section-toggled="false"]:hover {
            background-image: none; }
            main.single article section#section-0[data-section-toggled="false"]:hover button.folder-toggle {
              background-color: #292929; }
          main.single article section#section-0[data-section-toggled="false"] button.folder-toggle {
            background-color: #232323; }
        main.single article section#section-1[data-section-toggled="false"] {
          background-image: linear-gradient(180deg, #262626 33%, #242424 100%);
          background-color: #2c2c2c; }
          main.single article section#section-1[data-section-toggled="false"]:hover {
            background-image: none; }
            main.single article section#section-1[data-section-toggled="false"]:hover button.folder-toggle {
              background-color: #2c2c2c; }
          main.single article section#section-1[data-section-toggled="false"] button.folder-toggle {
            background-color: #262626; }
        main.single article section#section-2[data-section-toggled="false"] {
          background-image: linear-gradient(180deg, #292929 33%, #272727 100%);
          background-color: #2f2f2f; }
          main.single article section#section-2[data-section-toggled="false"]:hover {
            background-image: none; }
            main.single article section#section-2[data-section-toggled="false"]:hover button.folder-toggle {
              background-color: #2f2f2f; }
          main.single article section#section-2[data-section-toggled="false"] button.folder-toggle {
            background-color: #292929; }
        main.single article section#section-3[data-section-toggled="false"] {
          background-image: linear-gradient(180deg, #2c2c2c 33%, #2a2a2a 100%);
          background-color: #323232; }
          main.single article section#section-3[data-section-toggled="false"]:hover {
            background-image: none; }
            main.single article section#section-3[data-section-toggled="false"]:hover button.folder-toggle {
              background-color: #323232; }
          main.single article section#section-3[data-section-toggled="false"] button.folder-toggle {
            background-color: #2c2c2c; }
        main.single article section#section-4[data-section-toggled="false"] {
          background-image: linear-gradient(180deg, #2e2e2e 33%, #282828 100%);
          background-color: #373737; }
          main.single article section#section-4[data-section-toggled="false"]:hover {
            background-image: none; }
            main.single article section#section-4[data-section-toggled="false"]:hover button.folder-toggle {
              background-color: #373737; }
          main.single article section#section-4[data-section-toggled="false"] button.folder-toggle {
            background-color: #2e2e2e; }
        main.single article section[data-section-toggled="false"]:hover {
          background-color: #323232; }
          main.single article section[data-section-toggled="false"]:hover button.folder-toggle {
            cursor: s-resize;
            background-color: #323232; }
        main.single article section[data-section-toggled="false"] div.content {
          height: 100px;
          visibility: hidden;
          overflow: hidden; }
      main.single article section[data-section-toggled="true"] {
        background-color: #000;
        padding-bottom: 8em; }
        main.single article section[data-section-toggled="true"] button.folder-toggle {
          background-color: #000; }
          main.single article section[data-section-toggled="true"] button.folder-toggle:hover {
            cursor: n-resize; }
          main.single article section[data-section-toggled="true"] button.folder-toggle span.toggle-icon {
            background-image: url("./../icons/folder_up.png"); }
        main.single article section[data-section-toggled="true"] div.content {
          height: auto;
          overflow: auto; }
      main.single article section[data-section-toggled="false"] button.folder-toggle span.toggle-icon {
        background-image: url("./../icons/folder_down.png"); }
      main.single article section button.folder-toggle {
        position: absolute;
        outline: 0;
        z-index: 5;
        border: none;
        border-top: solid 1px #424242;
        border-right: solid 1px #424242;
        background: #2c2c2c;
        text-align: left; }
        @media only screen and (max-width: 768px) {
          main.single article section button.folder-toggle {
            padding: 0 10px; } }
        @media only screen and (min-width: 768px) {
          main.single article section button.folder-toggle {
            padding: 0 30px; } }
        @media only screen and (max-width: 768px) {
          main.single article section button.folder-toggle {
            padding-top: 1em; } }
        @media only screen and (min-width: 768px) and (max-width: 1440px) {
          main.single article section button.folder-toggle {
            padding-top: 1em; } }
        @media only screen and (min-width: 1440px) {
          main.single article section button.folder-toggle {
            padding-top: 1em; } }
        @media only screen and (max-width: 768px) {
          main.single article section button.folder-toggle {
            padding-bottom: 1em; } }
        @media only screen and (min-width: 768px) and (max-width: 1440px) {
          main.single article section button.folder-toggle {
            padding-bottom: 1em; } }
        @media only screen and (min-width: 1440px) {
          main.single article section button.folder-toggle {
            padding-bottom: 1em; } }
        main.single article section button.folder-toggle:focus {
          outline: 0; }
        main.single article section button.folder-toggle span.pretitle {
          display: block;
          padding-bottom: 0.5em; }
        main.single article section button.folder-toggle h1 {
          display: inline; }
        main.single article section button.folder-toggle span.toggle-icon {
          display: inline-block;
          margin-right: 0;
          width: 22px;
          height: 14px;
          margin-left: 0.5em;
          background-size: cover; }
          @media only screen and (max-width: 768px) {
            main.single article section button.folder-toggle span.toggle-icon {
              display: block;
              margin-left: 0;
              width: 30px;
              height: 17px; } }
      main.single article section div.content {
        position: relative;
        padding-top: 2em;
        overflow: hidden; }
        @media only screen and (max-width: 768px) {
          main.single article section div.content {
            grid-column: 2/span 18; } }
        @media only screen and (min-width: 768px) and (max-width: 1440px) {
          main.single article section div.content {
            grid-column: 2/span 12; } }
        @media only screen and (min-width: 1440px) {
          main.single article section div.content {
            grid-column: 2/span 9; } }
        main.single article section div.content p {
          width: 100%; }
          @media only screen and (max-width: 768px) {
            main.single article section div.content p {
              padding-bottom: 0.5em; } }
          @media only screen and (min-width: 768px) and (max-width: 1440px) {
            main.single article section div.content p {
              padding-bottom: 0.5em; } }
          @media only screen and (min-width: 1440px) {
            main.single article section div.content p {
              padding-bottom: 0.5em; } }
          main.single article section div.content p em {
            padding: 0;
            display: inline; }
          main.single article section div.content p button[data-toggle-content] {
            background: none;
            display: inline-block;
            text-decoration: none;
            cursor: zoom-in;
            border: none;
            padding: 0;
            transition: all .25s; }
            main.single article section div.content p button[data-toggle-content]:focus {
              outline: none !important; }
            main.single article section div.content p button[data-toggle-content] span {
              color: #0453d1;
              padding: 0;
              display: inline-block;
              border: 1px solid #0453d1;
              margin: 0;
              padding-bottom: 10px;
              padding-left: 4px;
              padding-right: 4px;
              margin-left: 5px;
              height: 13px; }
            main.single article section div.content p button[data-toggle-content]:hover {
              filter: blur(3px); }
          main.single article section div.content p span.secondary-content {
            color: #0453d1;
            width: 100%;
            display: inline;
            padding: 0.5em;
            padding-left: 0;
            box-sizing: border-box; }
            main.single article section div.content p span.secondary-content[data-toggled="false"] {
              display: none; }
            main.single article section div.content p span.secondary-content[data-toggled="true"] {
              display: block; }
            main.single article section div.content p span.secondary-content span.source-num {
              display: block; }
            main.single article section div.content p span.secondary-content a {
              text-decoration: underline;
              display: inline-block;
              transition: all .25s; }
              main.single article section div.content p span.secondary-content a:hover {
                filter: blur(3px);
                cursor: ne-resize; }
              main.single article section div.content p span.secondary-content a:active {
                color: black; }
        main.single article section div.content figure {
          width: 100%;
          height: 100%;
          display: block;
          position: relative;
          padding-bottom: 1em; }
          main.single article section div.content figure canvas {
            position: absolute; }
          main.single article section div.content figure img {
            width: 100%;
            transition: filter .15s;
            margin-bottom: 0.5em;
            transition-timing-function: ease-in-out;
            margin: 0; }
          main.single article section div.content figure div.placeholder {
            position: relative;
            width: 60px;
            height: 35px;
            border: 2px solid #0453d1;
            margin-bottom: 0.5em;
            transition: all .125s; }
            main.single article section div.content figure div.placeholder:after {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              content: "";
              width: 45px;
              height: 20px;
              border: 2px solid #0453d1; }
            main.single article section div.content figure div.placeholder:hover {
              background-color: #0453d1;
              filter: blur(7px); }
          main.single article section div.content figure[data-image-quality="placeholder"] div.placeholder {
            cursor: zoom-in; }
          main.single article section div.content figure[data-image-quality="low"] img {
            cursor: zoom-in;
            position: relative;
            z-index: 2; }
          main.single article section div.content figure[data-image-quality="low"] canvas {
            z-index: 6; }
          main.single article section div.content figure[data-image-quality="high"] img {
            cursor: default; }
          main.single article section div.content figure figcaption {
            color: #0453d1;
            text-align: left; }

main#about {
  margin-left: 2em; }
  main#about h2 {
    padding-top: 1em; }
  main#about p {
    z-index: 10000;
    position: relative; }
    @media only screen and (max-width: 768px) {
      main#about p {
        width: 95%; } }
    @media only screen and (min-width: 768px) and (max-width: 1440px) {
      main#about p {
        width: 50%; } }
    @media only screen and (min-width: 1440px) {
      main#about p {
        width: 30%; } }