docs/assets/styles/main.css

/* Color Scheme */
/* fonts */
/* radius */
html, body {
  width: 100%;
  height: 100%;
  background-color: #eaeaf3;
  color: #202020;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: "Karla", sans-serif;
  font-size: 1em;
  padding: 0;
  margin: 0;
  overflow: hidden; }

body {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

input {
  background-color: #e0e0e0;
  color: #202020;
  font-size: 1em;
  -webkit-border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -ms-border-radius: 0.4em;
  border-radius: 0.4em;
  border: 1px solid;
  outline: 0;
  padding: 0.3em 1em; }

input[type=submit] {
  margin: 0 0 0 1em; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  padding: 0.2em;
  margin: 0;
  color: #2020a0; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none; }

h1 {
  text-align: center; }

h2, h3, h4, h5, h6 {
  text-align: left;
  margin-top: 1.4em; }

h2 {
  margin-top: 1.4em; }

h4 {
  font-size: 1.4em; }
  h4:after {
    content: ' ';
    width: 31%;
    position: relative;
    top: 0.2em;
    display: block;
    border-bottom: 1px solid #99a; }

.bordered, pre {
  box-sizing: border-box;
  border: 1px solid;
  -webkit-border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -ms-border-radius: 0.4em;
  border-radius: 0.4em;
  padding: 1em;
  overflow: hidden;
  z-index: 50; }

#version_data {
  text-align: center;
  font-size: 1.1em; }

#md_container {
  box-sizing: border-box;
  padding: 1em;
  padding-bottom: 4em;
  display: inline-block;
  margin-left: 20%;
  width: 79%; }
  #md_container p {
    margin: 0;
    padding: 0.5em; }
    #md_container p code {
      padding: 0 0.1em;
      letter-spacing: 1px;
      font-weight: 100;
      color: #800; }
  #md_container h3 {
    padding-top: 3em; }
  #md_container h2 {
    padding-top: 3em;
    border-top: 1px solid; }
  #md_container pre {
    overflow: hidden;
    position: relative;
    width: 96%;
    margin-left: 2%;
    box-sizing: border-box; }
  #md_container pre code {
    display: block;
    width: 100%;
    overflow: scroll;
    box-sizing: border-box; }

#top_nav {
  font-family: "Quicksand", sans-serif;
  display: block;
  width: 100%;
  height: 5em;
  border-bottom: 1px solid;
  box-sizing: border-box; }
  #top_nav ul {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-left: 12em; }
  #top_nav li {
    display: inline-block;
    position: relative;
    top: 2em; }
    #top_nav li a {
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      white-space: nowrap;
      display: inline-block;
      min-width: 7em;
      padding: 0.5em 1em;
      text-align: center;
      margin: 0.2em;
      -webkit-border-radius: 0.4em;
      -moz-border-radius: 0.4em;
      -ms-border-radius: 0.4em;
      border-radius: 0.4em;
      border: 1px solid #e0e0ff;
      background-color: #dadaf0;
      color: #020202;
      text-decoration: none; }
      #top_nav li a:hover {
        background-color: #fff;
        color: #000; }

#show_nav {
  transform: translateX(999999px);
  display: hidden; }

#show_sidebar {
  transform: translateX(999999px);
  display: hidden; }

#side_bar {
  display: block;
  position: fixed;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  left: 0;
  top: 7em;
  width: 20%;
  height: 100%;
  padding-bottom: 9em;
  padding-top: 0;
  padding-left: 0.5em;
  border-right: 1px solid;
  box-sizing: border-box; }
  #side_bar h1, #side_bar h2, #side_bar h3 {
    display: inline-block;
    width: 100%;
    box-sizing: border-box; }
    #side_bar h1 a, #side_bar h2 a, #side_bar h3 a {
      color: inherit;
      text-decoration: none; }
      #side_bar h1 a:hover, #side_bar h2 a:hover, #side_bar h3 a:hover {
        color: 000;
        text-shadow: -3px 3px 2px rgba(150, 150, 150, 0.72);
        text-decoration: underline; }
  #side_bar ul {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: +100; }
  #side_bar li a {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    min-width: 7em;
    padding: 0.2em 1em;
    text-align: left;
    margin: 0.2em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    border-radius: 0.4em;
    color: #020202;
    text-decoration: none;
    box-sizing: border-box; }
    #side_bar li a:visited:after {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      padding: 0.2em 0; }
    #side_bar li a:hover {
      color: #000;
      text-shadow: -3px 3px 2px rgba(150, 150, 150, 0.72); }
      #side_bar li a:hover:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        content: '>';
        padding: 0.2em 0; }
    #side_bar li a:active {
      text-shadow: -3px 0px 2px rgba(150, 150, 150, 0.72); }

.toc {
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transform: translateX(100%);
  z-index: 150;
  left: initial;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #f0f0ff;
  background-color: rgba(240, 240, 255, 0.92);
  border: none;
  border-left: 1px solid;
  border-bottom: 1px solid;
  -webkit-border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -ms-border-radius: 0.4em;
  border-radius: 0.4em;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
  height: 100%; }
  .toc:after {
    content: 'Table of Contents';
    z-index: 125;
    position: absolute;
    top: 1em;
    left: 0;
    width: 10em;
    text-align: center;
    font-size: 1.2em;
    transform: translateX(-100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
    -moz-transition: transform 0.3s ease, opacity 0.3s ease;
    -o-transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    border-radius: 0.4em;
    background-color: #8A8ACE;
    background-color: rgba(200, 200, 248, 0.6); }
  .toc > ul {
    padding: 1em 0.5em;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    display: block; }
  .toc:hover, .toc:focus, .toc:active {
    transform: translateX(0); }
    .toc:hover:after, .toc:focus:after, .toc:active:after {
      transform: translateX(0);
      opacity: 0; }
  .toc li {
    display: block; }
  .toc a {
    display: inline-block;
    position: relative;
    min-width: 7em;
    padding: 0.2em 1em;
    text-align: left;
    margin: 0.2em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    border-radius: 0.4em;
    color: #020202;
    text-decoration: none; }
    .toc a:hover {
      color: #000; }
      .toc a:hover:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        content: '>';
        padding: 0.2em 0; }

#sign {
  height: 5em;
  width: 5em;
  position: absolute;
  right: 1em;
  bottom: 0.5em;
  z-index: 250; }
  #sign:after {
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url("/assets/logo/facil-io.svg");
    background-size: contain; }

#logo {
  position: fixed;
  top: 1em;
  left: 0.5em;
  display: block;
  height: 6em;
  width: 11em;
  z-index: 9999; }
  #logo:after {
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url("/assets/logo/facil-io-side.svg");
    background-size: contain; }

#notice {
  z-index: 99999;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  padding: 1em 0;
  text-align: center;
  height: 100px;
  width: 100%;
  overflow-y: auto;
  color: #000;
  font-weight: bold;
  transition: All 0.25s ease;
  -webkit-transition: All 0.25s ease;
  -moz-transition: All 0.25s ease;
  -o-transition: All 0.25s ease;
  -ms-transition: All 0.25s ease;
  transform-origin: 0 50%;
  -webkit-transform-origin: 50% 0;
  /* Chrome, Safari, Opera */
  -ms-transform-origin: 50% 0;
  /* IE 9 */
  -moz-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1); }
  #notice .notice_close {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5em;
    height: 100%;
    width: 5em;
    text-align: left;
    cursor: pointer;
    border-right: 1px solid #933;
    color: #000; }
    #notice .notice_close:hover {
      color: #900;
      background-color: rgba(0, 0, 0, 0.25); }
  #notice.hidden {
    transform: scale(1, 0);
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    -ms-transform: scale(1, 0); }

#ruby_lang {
  position: fixed;
  top: 1em;
  right: 1em;
  display: block;
  height: 5em;
  width: auto;
  z-index: 9999; }
  #ruby_lang img {
    height: 100%; }

/*  Dark Theme Changes */
body.dark, .dark input {
  background-color: #202020;
  color: #e0e0e0; }
  body.dark mark, .dark input mark {
    background-color: #403020;
    color: #e0e0e0; }
  body.dark a, .dark input a {
    color: #ddf; }
    body.dark a:visited, .dark input a:visited {
      color: #eef; }
  body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6, .dark input h1, .dark input h2, .dark input h3, .dark input h4, .dark input h5, .dark input h6 {
    color: #fad0d0; }
  body.dark h2:after, body.dark h3:after, body.dark h4:after, .dark input h2:after, .dark input h3:after, .dark input h4:after {
    border-bottom: 1px solid #caa; }
  body.dark #top_nav li a, .dark input #top_nav li a {
    border: 1px solid #CE8A8A;
    background-color: #541010;
    color: #CE8A8A; }
    body.dark #top_nav li a:hover, .dark input #top_nav li a:hover {
      background-color: #732626;
      color: #CE8A8A; }
  body.dark #md_container p code, .dark input #md_container p code {
    color: #bfafef; }
  body.dark #logo:after, .dark input #logo:after {
    background-image: url("/assets/logo/facil-io-side-light.svg"); }
  body.dark #sign:after, .dark input #sign:after {
    background-image: url("/assets/logo/facil-io-light.svg"); }
  body.dark .toc, .dark input .toc {
    background-color: #404040;
    background-color: rgba(64, 64, 64, 0.94); }
    body.dark .toc:after, .dark input .toc:after {
      background-color: black;
      background-color: rgba(128, 128, 128, 0.6); }
    body.dark .toc a, .dark input .toc a {
      color: #e0e0e0; }
      body.dark .toc a:hover, .dark input .toc a:hover {
        color: #fff; }
  body.dark #side_bar h2 a, body.dark #side_bar h3 a, body.dark #side_bar h4 a, .dark input #side_bar h2 a, .dark input #side_bar h3 a, .dark input #side_bar h4 a {
    color: inherit;
    text-decoration: none; }
    body.dark #side_bar h2 a:hover, body.dark #side_bar h3 a:hover, body.dark #side_bar h4 a:hover, .dark input #side_bar h2 a:hover, .dark input #side_bar h3 a:hover, .dark input #side_bar h4 a:hover {
      color: 000;
      text-shadow: -3px 3px 2px rgba(150, 150, 150, 0.72);
      text-decoration: underline; }
  body.dark #side_bar li a, .dark input #side_bar li a {
    color: #e0e0e0; }
    body.dark #side_bar li a:hover, .dark input #side_bar li a:hover {
      color: #fff; }

body.light {
  /*
  
  github.com style (c) Vasily Polovnyov <vast@whiteants.net>
  
  */
  /* Comment */
  /* Error */
  /* Keyword */
  /* Comment.Hashbang */
  /* Comment.Multiline */
  /* Comment.Preproc */
  /* Comment.PreprocFile */
  /* Comment.Single */
  /* Comment.Special */
  /* Generic.Deleted */
  /* Generic.Emph */
  /* Generic.Error */
  /* Generic.Heading */
  /* Generic.Inserted */
  /* Generic.Output */
  /* Generic.Prompt */
  /* Generic.Strong */
  /* Generic.Subheading */
  /* Generic.Traceback */
  /* Keyword.Constant */
  /* Keyword.Declaration */
  /* Keyword.Namespace */
  /* Keyword.Pseudo */
  /* Keyword.Reserved */
  /* Keyword.Type */
  /* Literal.Number */
  /* Literal.String */
  /* Name.Attribute */
  /* Name.Builtin */
  /* Name.Class */
  /* Name.Constant */
  /* Name.Decorator */
  /* Name.Entity */
  /* Name.Function */
  /* Name.Namespace */
  /* Name.Tag */
  /* Name.Variable */
  /* Operator.Word */
  /* Text.Whitespace */
  /* Literal.Number.Bin */
  /* Literal.Number.Float */
  /* Literal.Number.Hex */
  /* Literal.Number.Integer */
  /* Literal.Number.Oct */
  /* Literal.String.Affix */
  /* Literal.String.Backtick */
  /* Literal.String.Char */
  /* Literal.String.Delimiter */
  /* Literal.String.Doc */
  /* Literal.String.Double */
  /* Literal.String.Escape */
  /* Literal.String.Heredoc */
  /* Literal.String.Interpol */
  /* Literal.String.Other */
  /* Literal.String.Regex */
  /* Literal.String.Single */
  /* Literal.String.Symbol */
  /* Name.Builtin.Pseudo */
  /* Name.Function.Magic */
  /* Name.Variable.Class */
  /* Name.Variable.Global */
  /* Name.Variable.Instance */
  /* Name.Variable.Magic */
  /* Literal.Number.Integer.Long */ }
  body.light .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #333;
    background: #f8f8f8;
    -webkit-text-size-adjust: none; }
  body.light .hljs-comment,
  body.light .diff .hljs-header {
    color: #998;
    font-style: italic; }
  body.light .hljs-keyword,
  body.light .css .rule .hljs-keyword,
  body.light .hljs-winutils,
  body.light .nginx .hljs-title,
  body.light .hljs-subst,
  body.light .hljs-request,
  body.light .hljs-status {
    color: #333;
    font-weight: bold; }
  body.light .hljs-number,
  body.light .hljs-hexcolor,
  body.light .ruby .hljs-constant {
    color: #008080; }
  body.light .hljs-string,
  body.light .hljs-tag .hljs-value,
  body.light .hljs-doctag,
  body.light .tex .hljs-formula {
    color: #d14; }
  body.light .hljs-title,
  body.light .hljs-id,
  body.light .scss .hljs-preprocessor {
    color: #900;
    font-weight: bold; }
  body.light .hljs-list .hljs-keyword,
  body.light .hljs-subst {
    font-weight: normal; }
  body.light .hljs-class .hljs-title,
  body.light .hljs-type,
  body.light .vhdl .hljs-literal,
  body.light .tex .hljs-command {
    color: #458;
    font-weight: bold; }
  body.light .hljs-tag,
  body.light .hljs-tag .hljs-title,
  body.light .hljs-rule .hljs-property,
  body.light .django .hljs-tag .hljs-keyword {
    color: #000080;
    font-weight: normal; }
  body.light .hljs-attribute,
  body.light .hljs-variable,
  body.light .lisp .hljs-body,
  body.light .hljs-name {
    color: #008080; }
  body.light .hljs-regexp {
    color: #009926; }
  body.light .hljs-symbol,
  body.light .ruby .hljs-symbol .hljs-string,
  body.light .lisp .hljs-keyword,
  body.light .clojure .hljs-keyword,
  body.light .scheme .hljs-keyword,
  body.light .tex .hljs-special,
  body.light .hljs-prompt {
    color: #990073; }
  body.light .hljs-built_in {
    color: #0086b3; }
  body.light .hljs-preprocessor,
  body.light .hljs-pragma,
  body.light .hljs-pi,
  body.light .hljs-doctype,
  body.light .hljs-shebang,
  body.light .hljs-cdata {
    color: #999;
    font-weight: bold; }
  body.light .hljs-deletion {
    background: #fdd; }
  body.light .hljs-addition {
    background: #dfd; }
  body.light .diff .hljs-change {
    background: #0086b3; }
  body.light .hljs-chunk {
    color: #aaa; }
  body.light .highlight .c {
    color: #644;
    font-style: italic; }
  body.light .highlight .err {
    color: #FF0000;
    background-color: #FFAAAA; }
  body.light .highlight .k {
    color: #0000aa; }
  body.light .highlight .ch {
    color: #644;
    font-style: italic; }
  body.light .highlight .cm {
    color: #644;
    font-style: italic; }
  body.light .highlight .cp {
    color: #4c8317; }
  body.light .highlight .cpf {
    color: #644;
    font-style: italic; }
  body.light .highlight .c1 {
    color: #644;
    font-style: italic; }
  body.light .highlight .cs {
    color: #0000aa;
    font-style: italic; }
  body.light .highlight .gd {
    color: #aa0000; }
  body.light .highlight .ge {
    font-style: italic; }
  body.light .highlight .gr {
    color: #aa0000; }
  body.light .highlight .gh {
    color: #000080;
    font-weight: bold; }
  body.light .highlight .gi {
    color: #269; }
  body.light .highlight .go {
    color: #888888; }
  body.light .highlight .gp {
    color: #555555; }
  body.light .highlight .gs {
    font-weight: bold; }
  body.light .highlight .gu {
    color: #800080;
    font-weight: bold; }
  body.light .highlight .gt {
    color: #aa0000; }
  body.light .highlight .kc {
    color: #0000aa; }
  body.light .highlight .kd {
    color: #0000aa; }
  body.light .highlight .kn {
    color: #0000aa; }
  body.light .highlight .kp {
    color: #0000aa; }
  body.light .highlight .kr {
    color: #0000aa; }
  body.light .highlight .kt {
    color: #a0d; }
  body.light .highlight .m {
    color: #00d; }
  body.light .highlight .s {
    color: #aa5500; }
  body.light .highlight .na {
    color: #1e90ff; }
  body.light .highlight .nb {
    color: #a0d; }
  body.light .highlight .nc {
    color: #269;
    text-decoration: underline; }
  body.light .highlight .no {
    color: #aa0000; }
  body.light .highlight .nd {
    color: #888888; }
  body.light .highlight .ni {
    color: #880000;
    font-weight: bold; }
  body.light .highlight .nf {
    color: #269; }
  body.light .highlight .nn {
    color: #a0d;
    text-decoration: underline; }
  body.light .highlight .nt {
    color: #1e90ff;
    font-weight: bold; }
  body.light .highlight .nv {
    color: #aa0000; }
  body.light .highlight .ow {
    color: #0000aa; }
  body.light .highlight .w {
    color: #bbbbbb; }
  body.light .highlight .mb {
    color: #00d; }
  body.light .highlight .mf {
    color: #00d; }
  body.light .highlight .mh {
    color: #00d; }
  body.light .highlight .mi {
    color: #00d; }
  body.light .highlight .mo {
    color: #00d; }
  body.light .highlight .sa {
    color: #aa5500; }
  body.light .highlight .sb {
    color: #aa5500; }
  body.light .highlight .sc {
    color: #aa5500; }
  body.light .highlight .dl {
    color: #aa5500; }
  body.light .highlight .sd {
    color: #aa5500; }
  body.light .highlight .s2 {
    color: #aa5500; }
  body.light .highlight .se {
    color: #aa5500; }
  body.light .highlight .sh {
    color: #aa5500; }
  body.light .highlight .si {
    color: #aa5500; }
  body.light .highlight .sx {
    color: #aa5500; }
  body.light .highlight .sr {
    color: #00d; }
  body.light .highlight .s1 {
    color: #aa5500; }
  body.light .highlight .ss {
    color: #0000aa; }
  body.light .highlight .bp {
    color: #a0d; }
  body.light .highlight .fm {
    color: #269; }
  body.light .highlight .vc {
    color: #aa0000; }
  body.light .highlight .vg {
    color: #aa0000; }
  body.light .highlight .vi {
    color: #aa0000; }
  body.light .highlight .vm {
    color: #aa0000; }
  body.light .highlight .il {
    color: #00d; }
  body.light pre {
    background: #f5f5ff; }

body.dark {
  /*
  
  Railscasts-like style (c) Visoft, Inc. (Damien White)
  
  */
  /* Comment */
  /* Error */
  /* Keyword */
  /* Literal */
  /* Name */
  /* Operator */
  /* Punctuation */
  /* Comment.Hashbang */
  /* Comment.Multiline */
  /* Comment.Preproc */
  /* Comment.PreprocFile */
  /* Comment.Single */
  /* Comment.Special */
  /* Generic.Deleted */
  /* Generic.Emph */
  /* Generic.Inserted */
  /* Generic.Strong */
  /* Generic.Subheading */
  /* Keyword.Constant */
  /* Keyword.Declaration */
  /* Keyword.Namespace */
  /* Keyword.Pseudo */
  /* Keyword.Reserved */
  /* Keyword.Type */
  /* Literal.Date */
  /* Literal.Number */
  /* Literal.String */
  /* Name.Attribute */
  /* Name.Builtin */
  /* Name.Class */
  /* Name.Constant */
  /* Name.Decorator */
  /* Name.Entity */
  /* Name.Exception */
  /* Name.Function */
  /* Name.Label */
  /* Name.Namespace */
  /* Name.Other */
  /* Name.Property */
  /* Name.Tag */
  /* Name.Variable */
  /* Operator.Word */
  /* Text.Whitespace */
  /* Literal.Number.Bin */
  /* Literal.Number.Float */
  /* Literal.Number.Hex */
  /* Literal.Number.Integer */
  /* Literal.Number.Oct */
  /* Literal.String.Affix */
  /* Literal.String.Backtick */
  /* Literal.String.Char */
  /* Literal.String.Delimiter */
  /* Literal.String.Doc */
  /* Literal.String.Double */
  /* Literal.String.Escape */
  /* Literal.String.Heredoc */
  /* Literal.String.Interpol */
  /* Literal.String.Other */
  /* Literal.String.Regex */
  /* Literal.String.Single */
  /* Literal.String.Symbol */
  /* Name.Builtin.Pseudo */
  /* Name.Function.Magic */
  /* Name.Variable.Class */
  /* Name.Variable.Global */
  /* Name.Variable.Instance */
  /* Name.Variable.Magic */
  /* Literal.Number.Integer.Long */ }
  body.dark .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #232323;
    color: #e6e1dc;
    -webkit-text-size-adjust: none; }
  body.dark .hljs-comment,
  body.dark .hljs-shebang {
    color: #bc9458;
    font-style: italic; }
  body.dark .hljs-keyword,
  body.dark .ruby .hljs-function .hljs-keyword,
  body.dark .hljs-request,
  body.dark .hljs-status,
  body.dark .nginx .hljs-title,
  body.dark .method,
  body.dark .hljs-list .hljs-title {
    color: #c26230; }
  body.dark .hljs-string,
  body.dark .hljs-number,
  body.dark .hljs-regexp,
  body.dark .hljs-tag .hljs-value,
  body.dark .hljs-cdata,
  body.dark .hljs-filter .hljs-argument,
  body.dark .hljs-attr_selector,
  body.dark .apache .hljs-cbracket,
  body.dark .hljs-date,
  body.dark .tex .hljs-command,
  body.dark .asciidoc .hljs-link_label,
  body.dark .markdown .hljs-link_label {
    color: #a5c261; }
  body.dark .hljs-subst {
    color: #519f50; }
  body.dark .hljs-tag,
  body.dark .hljs-tag .hljs-keyword,
  body.dark .hljs-tag .hljs-title,
  body.dark .hljs-doctype,
  body.dark .hljs-sub .hljs-identifier,
  body.dark .hljs-pi,
  body.dark .input_number {
    color: #e8bf6a; }
  body.dark .hljs-identifier {
    color: #d0d0ff; }
  body.dark .hljs-class .hljs-title,
  body.dark .hljs-type,
  body.dark .smalltalk .hljs-class,
  body.dark .hljs-doctag {
    text-decoration: none; }
  body.dark .hljs-constant,
  body.dark .hljs-name {
    color: #da4939; }
  body.dark .hljs-symbol,
  body.dark .hljs-built_in,
  body.dark .ruby .hljs-symbol .hljs-string,
  body.dark .ruby .hljs-symbol .hljs-identifier,
  body.dark .asciidoc .hljs-link_url,
  body.dark .markdown .hljs-link_url,
  body.dark .hljs-attribute {
    color: #6d9cbe; }
  body.dark .asciidoc .hljs-link_url,
  body.dark .markdown .hljs-link_url {
    text-decoration: underline; }
  body.dark .hljs-params,
  body.dark .hljs-variable,
  body.dark .clojure .hljs-attribute {
    color: #d0d0ff; }
  body.dark .css .hljs-tag,
  body.dark .hljs-rule .hljs-property,
  body.dark .hljs-pseudo,
  body.dark .tex .hljs-special {
    color: #cda869; }
  body.dark .css .hljs-class {
    color: #9b703f; }
  body.dark .hljs-rule .hljs-keyword {
    color: #c5af75; }
  body.dark .hljs-rule .hljs-value {
    color: #cf6a4c; }
  body.dark .css .hljs-id {
    color: #8b98ab; }
  body.dark .hljs-annotation,
  body.dark .apache .hljs-sqbracket,
  body.dark .nginx .hljs-built_in {
    color: #9b859d; }
  body.dark .hljs-preprocessor,
  body.dark .hljs-preprocessor *,
  body.dark .hljs-pragma {
    color: #8996a8 !important; }
  body.dark .hljs-hexcolor,
  body.dark .css .hljs-value .hljs-number {
    color: #a5c261; }
  body.dark .hljs-title,
  body.dark .hljs-decorator,
  body.dark .css .hljs-function {
    color: #ffc66d; }
  body.dark .diff .hljs-header,
  body.dark .hljs-chunk {
    background-color: #2f33ab;
    color: #e6e1dc;
    display: inline-block;
    width: 100%; }
  body.dark .diff .hljs-change {
    background-color: #4a410d;
    color: #f8f8f8;
    display: inline-block;
    width: 100%; }
  body.dark .hljs-addition {
    background-color: #144212;
    color: #e6e1dc;
    display: inline-block;
    width: 100%; }
  body.dark .hljs-deletion {
    background-color: #600;
    color: #e6e1dc;
    display: inline-block;
    width: 100%; }
  body.dark .coffeescript .javascript,
  body.dark .javascript .xml,
  body.dark .tex .hljs-formula,
  body.dark .xml .javascript,
  body.dark .xml .vbscript,
  body.dark .xml .css,
  body.dark .xml .hljs-cdata {
    opacity: 0.7; }
  body.dark .highlight {
    color: #fee; }
  body.dark .highlight .c {
    color: #babadd; }
  body.dark .highlight .err {
    color: #960050;
    background-color: #1e0010; }
  body.dark .highlight .k {
    color: #66d9ef; }
  body.dark .highlight .l {
    color: #ae81ff; }
  body.dark .highlight .n {
    color: #fee; }
  body.dark .highlight .o {
    color: #f92672; }
  body.dark .highlight .p {
    color: #fee; }
  body.dark .highlight .ch {
    color: #babadd; }
  body.dark .highlight .cm {
    color: #babadd; }
  body.dark .highlight .cp {
    color: #babadd; }
  body.dark .highlight .cpf {
    color: #babadd; }
  body.dark .highlight .c1 {
    color: #babadd; }
  body.dark .highlight .cs {
    color: #babadd; }
  body.dark .highlight .gd {
    color: #f92672; }
  body.dark .highlight .ge {
    font-style: italic; }
  body.dark .highlight .gi {
    color: #a6e22e; }
  body.dark .highlight .gs {
    font-weight: bold; }
  body.dark .highlight .gu {
    color: #babadd; }
  body.dark .highlight .kc {
    color: #66d9ef; }
  body.dark .highlight .kd {
    color: #66d9ef; }
  body.dark .highlight .kn {
    color: #f92672; }
  body.dark .highlight .kp {
    color: #66d9ef; }
  body.dark .highlight .kr {
    color: #66d9ef; }
  body.dark .highlight .kt {
    color: #66d9ef; }
  body.dark .highlight .ld {
    color: #e6db74; }
  body.dark .highlight .m {
    color: #ae81ff; }
  body.dark .highlight .s {
    color: #e6db74; }
  body.dark .highlight .na {
    color: #a6e22e; }
  body.dark .highlight .nb {
    color: #fee; }
  body.dark .highlight .nc {
    color: #a6e22e; }
  body.dark .highlight .no {
    color: #66d9ef; }
  body.dark .highlight .nd {
    color: #a6e22e; }
  body.dark .highlight .ni {
    color: #fee; }
  body.dark .highlight .ne {
    color: #a6e22e; }
  body.dark .highlight .nf {
    color: #a6e22e; }
  body.dark .highlight .nl {
    color: #fee; }
  body.dark .highlight .nn {
    color: #fee; }
  body.dark .highlight .nx {
    color: #a6e22e; }
  body.dark .highlight .py {
    color: #fee; }
  body.dark .highlight .nt {
    color: #f92672; }
  body.dark .highlight .nv {
    color: #fee; }
  body.dark .highlight .ow {
    color: #f92672; }
  body.dark .highlight .w {
    color: #fee; }
  body.dark .highlight .mb {
    color: #ae81ff; }
  body.dark .highlight .mf {
    color: #ae81ff; }
  body.dark .highlight .mh {
    color: #ae81ff; }
  body.dark .highlight .mi {
    color: #ae81ff; }
  body.dark .highlight .mo {
    color: #ae81ff; }
  body.dark .highlight .sa {
    color: #e6db74; }
  body.dark .highlight .sb {
    color: #e6db74; }
  body.dark .highlight .sc {
    color: #e6db74; }
  body.dark .highlight .dl {
    color: #e6db74; }
  body.dark .highlight .sd {
    color: #e6db74; }
  body.dark .highlight .s2 {
    color: #e6db74; }
  body.dark .highlight .se {
    color: #ae81ff; }
  body.dark .highlight .sh {
    color: #e6db74; }
  body.dark .highlight .si {
    color: #e6db74; }
  body.dark .highlight .sx {
    color: #e6db74; }
  body.dark .highlight .sr {
    color: #e6db74; }
  body.dark .highlight .s1 {
    color: #e6db74; }
  body.dark .highlight .ss {
    color: #e6db74; }
  body.dark .highlight .bp {
    color: #fee; }
  body.dark .highlight .fm {
    color: #a6e22e; }
  body.dark .highlight .vc {
    color: #fee; }
  body.dark .highlight .vg {
    color: #fee; }
  body.dark .highlight .vi {
    color: #fee; }
  body.dark .highlight .vm {
    color: #fee; }
  body.dark .highlight .il {
    color: #ae81ff; }
  body.dark pre {
    background: #322; }

@media only screen and (max-width: 768px) {
  body {
    -webkit-overflow-scrolling: auto; }
    body:after {
      content: ' ';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 6em;
      z-index: 90;
      background-color: rgba(240, 240, 240, 0.88);
      filter: blur(10px);
      -webkit-filter: blur(10px);
      pointer-events: none; }

  #output {
    pointer-events: none; }

  #md_container {
    padding: 7em 0.5em;
    display: inline-block;
    margin-left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }

  .toc {
    top: 6em;
    height: 75%;
    right: 0; }
    .toc:after {
      content: 'TOC';
      width: 3em;
      top: 0; }

  #logo {
    top: 0.5em;
    height: 4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    border-radius: 0.4em; }

  #sign {
    position: fixed;
    right: 0.5em;
    bottom: 0.5em;
    z-index: 250; }

  #show_sidebar, #show_nav {
    display: block;
    position: fixed;
    top: 5em;
    left: 0;
    overflow: visible;
    transform: translateX(999999px);
    z-index: 900; }
    #show_sidebar:after, #show_nav:after {
      transform: translateX(-999999px);
      content: "|||";
      font-size: 1.4em;
      display: block;
      box-sizing: border-box;
      padding: 0.3em 0.5em;
      text-align: center;
      -webkit-border-radius: 0.4em;
      -moz-border-radius: 0.4em;
      -ms-border-radius: 0.4em;
      border-radius: 0.4em;
      background-color: gray;
      background-color: rgba(64, 64, 64, 0.64);
      position: absolute;
      left: 0;
      top: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
      -moz-transition: transform 0.3s ease, opacity 0.3s ease;
      -o-transition: transform 0.3s ease, opacity 0.3s ease; }
    #show_sidebar:checked:after, #show_nav:checked:after {
      transform: translateX(-999999px) rotate(-90deg);
      background-color: rgba(64, 32, 64, 0.64); }

  #ruby_lang {
    transform: translateX(200px); }

  #side_bar {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 9em;
    padding-bottom: 1em;
    z-index: 400;
    position: fixed;
    top: 0;
    left: 0;
    overflow: scroll;
    background-color: #f0f0f0;
    background-color: rgba(240, 240, 240, 0.9);
    transform: translateX(-100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
    -moz-transition: transform 0.3s ease, opacity 0.3s ease;
    -o-transition: transform 0.3s ease, opacity 0.3s ease; }

  #show_sidebar:checked + #side_bar {
    transform: translateX(0); }

  #show_nav {
    display: block;
    position: fixed;
    top: 0.2em;
    right: 0;
    left: initial; }
    #show_nav:after {
      right: 0;
      left: initial; }
    #show_nav:checked:after {
      transform: translateX(-999999px) rotate(90deg); }

  #top_nav {
    display: block;
    position: fixed;
    z-index: 500;
    width: 100%;
    height: auto;
    padding: 1em;
    margin: 0;
    padding-bottom: 5em;
    background-color: #f0f0f0;
    background-color: rgba(240, 240, 240, 0.9);
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
    -moz-transition: transform 0.3s ease, opacity 0.3s ease;
    -o-transition: transform 0.3s ease, opacity 0.3s ease; }
    #top_nav ul {
      padding: 0;
      box-sizing: border-box; }
    #top_nav li {
      display: block;
      width: 100%;
      box-sizing: border-box; }
      #top_nav li a {
        display: block;
        width: 100%;
        margin: 0.5em 0;
        min-width: initial;
        padding: 0.2em 1em;
        text-align: center;
        box-sizing: border-box; }

  #show_nav:checked + #top_nav {
    transform: translateX(0); }

  #tagline {
    margin-top: 7em;
    font-size: 1.1em; }

  body.dark:after {
    background-color: rgba(32, 32, 32, 0.88); }
  body.dark #top_nav, body.dark #side_bar {
    background-color: #202020;
    background-color: rgba(32, 32, 32, 0.9); } }

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