/* normalize.css */ 
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

body {
  line-height: 1.5;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

a { color: #123; text-decoration: underline; }
a:visited { color: #123; }
a:hover { color: #42e; }

/* Header & footer */

#header {
  font-size: 1.5em;
  position: relative;
  margin-bottom: 30px;
  border-bottom: 1px solid #fff;
  line-height: 70px;
}

#footer {
  font-size: 1.1em;
  color: #aeb7c1;
  width: 70%;
  margin-left: 30%;
  padding: 30px 0;
}

#header a {
  color: #123;
  text-decoration: none;
}
#header a:hover {
  color: #42e;
  border-bottom: none;
}

#footer a:link, #footer a:visited { color: #aeb7c1; }


#pts {
  display: inline-block;
  padding-left: 30px;
  padding-right: 0;
  font-weight: normal;
}
#pts a {
  display: inline-block;
  font-weight: bold;
}
#pts a > span {
  color: #42e;
  display: inline-block;
   padding: 0 2px; 
}

#topmenu {
  position: absolute;
  top: 0; right: 30px;
  height: 100%; 
  vertical-align: middle;
}

#topmenu > a {
  display: inline-block;
  vertical-align: middle;
  padding-left: 15px;
  height: 100%;
}


/* ---------- */

#menu {
  position: fixed;
  top: 105px;; left: 0; width: 25%;
  max-width: 300px;
  font-size: 1em;
  counter-reset: c;
  padding-left: 40px;
  padding-bottom: 50px;
  line-height: 2.4;
}

#menu li {
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.3em;
  font-weight: 400;
}

#menu li {
  /* border-top: 1px solid #f1f3f5; */
  clear: left;
}

#menu li:first-child {
  /* border-bottom: 1px solid #42e; */
}

#menu li:before {
  counter-increment: c;
  content: counter(c);
  color: #42e;
  display: block;
  float: left;
  text-align: left;
  padding-right: 10px;
  min-width: 20px;

}

#menu li a { 
  color: #123; text-decoration: none; 
  display: block;
}
#menu li a:visited { color: #123; }
#menu li a:hover { color: #42e; }

#post {
  position: relative;
  margin-left: 30%;
  width: 50%;
  min-width: 300px;
  padding: 0 0px 30px;
  color: #123;
  font-size: 1.3em;
  border-bottom: 2px solid #123; 
  margin-bottom: 100px;
}


#post li {
  /* margin-bottom: 0.5em; */
}

#post img { max-width: 100%; width: 100%; }


h1 { font-size: 4em; line-height: 1; margin: 50px 0 75px; font-weight: 500; color: #42e; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.6em; margin-top: 50px; font-weight: 500;}
h4 { font-size: 1.35em; }
h5 { font-size: 0.8em; font-weight: normal; color: #90959C; margin-top: -0.8em; margin-bottom: 2.5em; }

code { 
  display: inline-block; 
  font-size: 0.9em; 
}

p code, h5 code, li code {
  font-size: 1em;
  color: #60636F;
  font-style: normal;
  font-size: 0.85em;
  
}

em > code {
  background: #FFF93A;
}

a > code {
  background: #F1F3FA;
  border: 1px solid #e2e6ef;
  padding: 0 5px;
}

a:hover > code {
  background: #0ca;
  border-color: #0ca;
  color: #fff;
}

#toc {
  position: fixed; top: 0px; left: 0;
  display: none;
  width: 100px; height: 80px;
  background: transparent;
  color: #42e;
  line-height: 78px;
  text-align: center;
  font-size: 4em;
}

#close {
  display: none;
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  line-height: 78px; text-align: center;
  font-size: 3em;
  text-decoration: none;
  color: #fff;
}

#close:hover {
  color: #0ca;
}


pre {
  border-left: 2px solid #0ca;
  padding: 5px 0 5px 20px;
  font-size: 0.9em;
  margin: 20px 0 40px;
}

code {
  font-family: "Menlo", "Consolas", "Monaco", monospace;
}

code.hljs {
  overflow: visible;
}

/* Demo elements */
p {
  position: relative;
  margin-bottom: 1.5em;
}

.demoOverlay {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  /* background: rgba(0,0,0,.2); */
  box-sizing: border-box;
}


.demoOverlay::after, .demoOverlay .sourceCodeLink {
  display: block;
  position: absolute; bottom: 0; right: 0;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 10px;
  font-size: 11px;
  content: 'Touch to try demo';
}

.demoOverlay.active {
  box-shadow: 0 0 0 2px #fff;
}

.demoOverlay.active::after {
  display: none;
}

.demoOverlay .sourceCodeLink {
  display: none;
}

.demoOverlay.active .sourceCodeLink {
  display: block;
}

.demoOverlay.active .sourceCodeLink::after {
  content: "↗";
}


/* Mobile and Responsive */
@media screen and (max-device-width : 768px), screen and (max-width : 768px), print {

  /* Header and footer */
  
  #header, #footer {
    width: 70%;
    margin: 0 auto;
    line-height: 80px;
  }
  
  #footer { 
    line-height: 1.4;
    padding: 100px 0 30px; 
  }


  #header a:first-child {
    padding-left: 0;
  }

  #header a:last-child {
    padding-right: 0;
  }

  #topmenu > a {
    display: inline-block;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }

  #pts { padding-left: 0; }
  #pts a { padding: 0; }
  #topmenu { right: 0; }
  #topmenu a { right: 0; }

  /* --------- */

  #menu {
    position: fixed;
    left: -100%; top: 0; bottom: 0;
    padding: 100px; margin: 0;
    width: 90%;
    box-sizing: border-box;
    overflow: auto;
    z-index: 100;
    background: #42e;
  }

  #menu li {
    color: #fff;
    font-size: 2.2em;
    border: none;
  }

  #menu li:last-child {
    border: none;
  }

  #menu li:before {
    font-weight: normal;
    color: rgba(255,255,255,.6);
  }

  #menu li a { color: #fff; text-decoration: none; }
  #menu li a:visited { color: #fff; }
  #menu li a:hover { color: #0ca; }

  #post {
    margin: 0 auto;
    width: 70%;
    min-width: 50%;
    font-size: 1.3em;
  }


  #toc {
    display: block;
    text-decoration: none;
  }

  #menu:target {
    background: #42e;
    transition: left 0.3s;
    left: 0;
  }

  #close { display: block; }
}

/* Mobile */
@media screen and (max-device-width : 767px) {

  /* Header and Footer */

  
  #header {
    padding: 0;
    margin-left: 15%;
    width: 85%;
    line-height: 70px;
    font-size: 1.2em;
  }  


  #topmenu > a { padding-left: 0; }
  #topmenu > a:nth-child(2) { display: none; }
  #topmenu > a:last-child { padding-right: 20px; }

  #toc { 
    width: 50px; height: 80px; line-height: 65px; 
    font-size: 2.5em;
  }

  /* ------- */

  #menu {
    padding: 50px;
  }

  #menu li {
    font-size: 1.2em;
  }

  #menu li::before {
    padding-right: 10px;
  }


  #close {
    font-size: 2.2em;
    line-height: 60px;
    width: 60px;
  }

  h1 {
    font-size: 2.5em; 
    margin: 1em 0;
  }
  
  code { font-size: 0.8em; }
  
  .demoOverlay.active .sourceCodeLink::after {
    content: "(desktop)"
  }

  .demoOverlay {
    touch-action: none;
  }
}

/* Print */
@media print {
  #close, #toc { display: none; }
  #header, #footer { text-align: left; }
  #footer { padding-bottom: 0; }
  #topmenu { display: none; }
  #header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  h1, h2, h3 {
    break-after: avoid-page;
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  h5 {
    margin: 10px;
  }
}


/*

XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fff;
  color: black;
}

.hljs-comment,
.hljs-quote {
  color: #006a00;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #aa0d91;
}

.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string {
  color: #c41a16;
}

.hljs-regexp,
.hljs-link {
  color: #080;
}

.hljs-title,
.hljs-tag,
.hljs-symbol,
.hljs-bullet,
.hljs-number,
.hljs-meta {
  color: #1c00cf;
}

.hljs-section,
.hljs-class .hljs-title,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #5c2699;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9b703f;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}