/*
 * Copyright (c) 2018, Hugo Freire <hugo@exec.sh>.
 *
 * This source code is licensed under the license found in the
 * LICENSE.md file in the root directory of this source tree.
 */

@font-face {
  font-family: "casper-icons";
  src: url("../fonts/casper-icons.eot?v=1");
  src: url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"),
  url("../fonts/casper-icons.woff?v=1") format("woff"),
  url("../fonts/casper-icons.ttf?v=1") format("truetype"),
  url("../fonts/casper-icons.svg?v=1#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Apply these base styles to all icons */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "casper-icons", "Open Sans", sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-left:before {
  content: "\f605";
}

html {
  height: 100%;
  max-height: 100%;
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  height: 100%;
  max-height: 100%;
  letter-spacing: 0.01rem;
  font-size: 1.8rem;
  line-height: 1.75em;
  color: #3A4145;
  background-color: #000000;
  -webkit-font-feature-settings: 'kern' 1;
  -moz-font-feature-settings: 'kern' 1;
  -o-font-feature-settings: 'kern' 1;
  text-rendering: geometricPrecision;
}

::-moz-selection {
  color: #d64e9c;
  background: #2db454;
}

::selection {
  color: #2db454;
  background: #d64e9c;
}

h1, h2, h3,
h4, h5, h6 {
  -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  color: #2E2E2E;
  line-height: 1.15em;
  margin: 0 0 0.4em 0;
  font-family: "Open Sans", sans-serif;
  text-rendering: geometricPrecision;
}

h1 {
  font-size: 5rem;
  letter-spacing: -2px;
  text-indent: -3px;
}

h2 {
  font-size: 3.6rem;
  letter-spacing: -1px;
}

h3 {
  font-size: 3rem;
  letter-spacing: -0.6px;
}

h4 {
  font-size: 2.5rem;
}

h5 {
  font-size: 2rem;
}

h6 {
  font-size: 2rem;
}

a {
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
}

p, ul, ol, dl {
  -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
  -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
  -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
  margin: 0 0 1.75em 0;
  text-rendering: geometricPrecision;
}

ol, ul {
  padding-left: 3rem;
}

ol ol, ul ul,
ul ol, ol ul {
  margin: 0 0 0.4em 0;
  padding-left: 2em;
}

dl dt {
  float: left;
  width: 180px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  margin-bottom: 1em;
}

dl dd {
  margin-left: 200px;
  margin-bottom: 1em
}

li {
  margin: 0.4em 0;
}

li li {
  margin: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: #EFEFEF 1px solid;
  margin: 3.2em 0;
  padding: 0;
}

blockquote {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.75em 0 1.75em -2.2em;
  padding: 0 0 0 1.75em;
  border-left: #4A4A4A 0.4em solid;
}

blockquote p {
  margin: 0.8em 0;
  font-style: italic;
}

blockquote small {
  display: inline-block;
  margin: 0.8em 0 0.8em 1.5em;
  font-size: 0.9em;
  color: #CCC;
}

blockquote small:before {
  content: "\2014 \00A0";
}

blockquote cite {
  font-weight: 700;
}

blockquote cite a {
  font-weight: normal;
}

mark {
  background-color: #fdffb6;
}

code, tt {
  padding: 1px 3px;
  font-family: Inconsolata, monospace, sans-serif;
  font-size: 0.85em;
  white-space: pre-wrap;
  border: #E3EDF3 1px solid;
  border-radius: 2px;
  -webkit-font-feature-settings: "liga" 0;
  -moz-font-feature-settings: "liga" 0;
  font-feature-settings: "liga" 0;
}

kbd {
  display: inline-block;
  margin-bottom: 0.4em;
  padding: 1px 8px;
  border: #CCC 1px solid;
  color: #666;
  text-shadow: #FFF 0 1px 0;
  font-size: 0.9em;
  font-weight: 700;
  background: #F4F4F4;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
  0 1px 0 0 #fff inset;
}

table {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.75em 0;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
}

table th,
table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: #EFEFEF 1px solid;
}

table th {
  color: #000;
}

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
  border-top: 0;
}

table tbody + tbody {
  border-top: #EFEFEF 2px solid;
}

table table table {
  background-color: #FFF;
}

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
  background-color: #F6F6F6;
}

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
  background: transparent;
}

iframe, .fluid-width-video-wrapper {
  display: block;
  margin: 1.75em 0;
}

/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */
.fluid-width-video-wrapper iframe {
  margin: 0;
}

textarea, select, input {
  width: 260px;
  padding: 6px 9px;
  margin: 0 0 5px 0;
  outline: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 100;
  line-height: 1.4em;
  background: #fff;
  border: #e7eef2 1px solid;
  border-radius: 4px;
  box-shadow: none;
  -webkit-appearance: none;
}

textarea {
  width: 100%;
  max-width: 340px;
  min-width: 250px;
  height: auto;
  min-height: 80px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
  border: #bbc7cc 1px solid;
  background: #fff;
  outline: none;
  outline-width: 0;
}

select {
  width: 270px;
  height: 30px;
  line-height: 30px;
}

button {
  min-height: 35px;
  width: auto;
  display: inline-block;
  padding: 0.1rem 1.5rem;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px; /* Hacks targeting Firefox. */
  line-height: 13px; /* Hacks targeting Firefox. */
  font-weight: 300;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: none;
  border-radius: 0.3rem;
  border: rgba(0, 0, 0, 0.05) 0.1em solid;
  background: #5ba4e5;
}

/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */

/* Clears shit */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

/* Hides shit */
.hidden {
  text-indent: -9999px;
  visibility: hidden;
  display: none;
}

/* Mobile first media queries */

/* Base style */
/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */

/* Big cover image on the home page */
.main-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: left;
  background-image: url("https://i.imgur.com/YEsDiQC.png");
  background-size: cover;
  overflow: hidden;
  
}

.main-header .inner {
  width: 100%;
}

/* Create a bouncing scroll-down arrow on homepage with cover image */
.scroll-down {
  color: #000000;
  display: block;
  position: absolute;
  z-index: 100;
  bottom: 80px;
  left: 7%;
  margin-top: 0px;
  width: 80px;
  height: 80px;
  font-size: 80px;
  text-align: left;
  text-decoration: none;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-animation: bounce 4s 2s infinite;
  animation: bounce 4s 2s infinite;
  padding: 20px;
}

/* Stop it bouncing and increase contrast when hovered */
.scroll-down:hover {
  color: #d733ff;
  -webkit-animation: none;
  animation: none;
}

.main-header.paged .scroll-down {
  display: none;
}

/* Appears in the top left corner of your home page */
.blog-logo {
  display: block;
  float: left;
  background: none !important; /* Makes sure there is never a background */
  border: none !important; /* Makes sure there is never a border */
}

.blog-logo img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  max-height: 40vh;
  width: auto;
  border-radius: 0%;
  border: 4px solid #4A4A4A;
  transition: all 0.2s ease;
}

.blog-logo img:hover {
  border-color: #66cc7f;
  background-color: rgba(214,78,156,0.33);
  background-image: url("https://i.imgur.com/MQKem4D.png");
}

.main-header-content {
  padding-bottom: 10vh;
}

.main-header-title {
  margin: 10px 0 10px 0;
  font-size: 3rem;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

.main-header.paged .main-header-title {
  display: none;
}

.main-header-second-title {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.01rem;
  color: #000000;
  position: relative;
  display: inline-block;
  font-family: Monaco, Arial, Helvetica, sans-serif;
  line-height: 24px;
}

.blackshit{
color:#000000;
text-align:right;
}

.blackshit:hover{
	color:#ffffff;
	text-align:right;
}

.jimmyclass1 {
 font-size: 1.6rem;
 letter-spacing: 0.01rem;
 color:#850b7e;
 font-family: "Open Sans", sans-serif;
 position:relative;
 display: inline-block;
 text-align: right;
}

.jimmyclass1:hover {
	 font-size: 1.6rem;
	  letter-spacing: 1rem;
	   color:#1db954;
	    font-family: "Open Sans", sans-serif;
	     position:relative;
	      display: inline-block;
      }

.main-header-second-title::after {
  content: "/";
  position: absolute;
  top: 0;
  right: -15px;
  /* Remove display: inline-block if not required to be on the same line as text etc */
  display: inline-block;
  background-color: #00d900;
  vertical-align: top;
  width: 10px;
  /* Set height to the line height of .text */
  height: 24px;
  /*
  Animation paramaters:
  blink = animation-name,
  1s = animation-duration,
  step-end = animation-timing-function,
  infinite = animation-iteration-count
  */
  -webkit-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

.main-header-second-title a {
  color: #000000;
}

.main-header-second-title a:hover {
  color: #d733ff;
}

.main-header-description {
  margin: 0;
  font-size: 3rem;
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0.01rem;
  color: rgba(0, 0, 0, 0.8);
}

.fakeButtons {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  top: -3px;
  left: -95px;
  background-color: #ff5f58;
  border-color: #e14540;
  display: inline-block;
}

.fakeMinimize {
  left: -92px;
  background-color: #ffbd2e;
  border-color: #dfa023;
}

.fakeZoom {
  left: -89px;
  background-color: #29ce42;
  border-color: #1dac2c;
}

.fakeMenu {
  width: 250px;
  box-sizing: border-box;
  height: 23px;
  background-color: #e5e3e5;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.fakeScreen {
  background-color: #151515;
  box-sizing: border-box;
  width: 250px;
  margin: 0 auto;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  justify-items: left;
  align-items: left;
  display: flex;
}

/* Every post, on every page, gets this style on its <article> tag */
.post {
  word-wrap: break-word;
  color: #C5C8C6;
}

.home-template .post {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.post .post-title {
  color: #1db954;
}

/* Add a little circle in the middle of the border-bottom on our .post
   just for the lolz and stylepoints. */
.post:after {

}

.post-header {
  padding: 65px 20px;
}

body:not(.post-template) .post-title {
  font-size: 3.6rem;
}

body:not(.home-template) .main-header-content,
body:not(.home-template) .scroll-down {
  display: none;
}

body:not(.home-template) .main-header {
  height: 50vh;
}

.main-content-pink article {
  background-color: #000000;
}

.main-content-pink .post-title {
  color: #1db954;
}

.main-content-black article {
  background-color: #000000;
}

.main-content-black .post-title {
  color: #e246ab;
}

.main-content-pink .kg-card-markdown h6 {
  color: #efadff;
}

.post-title {
  letter-spacing: 0px;
}

.post-title a {
  text-decoration: none;
}

.post-title {
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.post-excerpt p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.7em;
}

.read-more {
  text-decoration: none;
}

.post-meta {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #9EABB3;
  text-align: center;
}

.post-meta a {
  color: #9EABB3;
  text-decoration: none;
}

.post-meta a:hover {
  text-decoration: underline;
}

.main-content-pink .post-date,
.post-template .post-date {
  color: #efadff;
}

.main-content-black .post-date {
  color: #a0abb2;
}

.post-date {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.5rem;
  white-space: nowrap;
}

.post-contentb pre {
  overflow-x: auto;
  margin: 0.6em 0 3em;
  padding: 20px;
  max-width: 100%;
  font-size: 1.4rem;
  line-height: 1.5em;
  background: #000000;
  border-radius: 5px;
  
}

.post-contentb code {
  font-size: 1.3rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  color: #C5C8C6;
  padding: 0;
  line-height: 2.8rem;
  font-weight: 400 !important;
  border-radius: 3px;
  border: none;
}

/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */

.post-template .main-content {
  background: #000000;

}

.post-template .post {
  padding: 0;
}

.post-template .post-header {
  background-color: rgba(226,70,171,0);
  width: 33%;
  box-sizing: border-box;
  margin-bottom: 3.4rem;
}

.post-template .post-title {
  font-size: 3rem;
}

.post-template .post-meta {
  margin: 0;
}

.post-template .post-date {
  padding: 0;
  margin: 0;
  border: none;
}

.post-template h1, h2, h3, h4, h5, h6 {
  color: #a0abb2;
}

.post-template .post-contentb {
  padding: 0 4vw;
}

.post-template .post-contentb a {
  color: #efadff;
}

/* Stop elements, such as img wider than the post content, from
   creating horizontal scroll - slight hack due to imperfections
   with browser width % calculations and rounding */
.post-template .main-content {
  overflow: hidden;
}

/* Tweak the .post wrapper style */
.post-template .post {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 40px;
}

/* Kill that stylish little circle that was on the border, too */
.post-template .post:after {
  display: none;
}

.post-contentb {
  font-family: Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.6em;
}

/* Keep images centered, and allow images wider than the main
   text column to break out. */
.post-contentb img {
  display: block;
  max-width: 137%;
  height: auto;
  padding: 0em 0;
  /* Centers an image by (1) pushing its left edge to the
     center of its container and (2) shifting the entire image
     in the opposite direction by half its own width.
     Works for images that are larger than their containers. */
  position: relative;
  left:35%;
  -webkit-transform: translateX(-50%); /* for Safari and iOS */
  -ms-transform: translateX(-50%); /* for IE9 */
  transform: translateX(-50%);
}

.footnotes {
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.6em;
}

/* The author credit area after the post */
.post-footer {
  position: relative;
  margin: 6rem 0 0 0;
  padding: 3rem 0 0 0;
  border-top: #EBF2F6 1px solid;
}

.post-footer h4 {
  font-size: 1.8rem;
  margin: 0;
}

.post-footer p {
  margin: 1rem 0;
  font-size: 1.4rem;
  line-height: 1.75em;
}

/* Create some space to the right for the share links */
.post-footer .author {
  margin-right: 180px;
}

.post-footer h4 a {
  color: #efadff;
  text-decoration: none;
}

.post-footer h4 a:hover {
  text-decoration: underline;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
  position: absolute;
  top: 3rem;
  right: 0;
  width: 140px;
}

.post-footer .share a {
  font-size: 1.8rem;
  display: inline-block;
  margin: 1rem 1.6rem 1.6rem 0;
  color: #BBC7CC;
  text-decoration: none;
}

.post-footer .share .icon-twitter:hover {
  color: #55acee;
}

.post-footer .share .icon-facebook:hover {
  color: #3b5998;
}

.post-footer .share .icon-google-plus:hover {
  color: #dd4b39;
}

/* ==========================================================================
   9. Pagination - Tools to let you flick between pages
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination {
  position: relative;
  width: 100%;
  max-width: 710px;
  margin: 2rem auto;
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  color: #d78ed3;
  text-align: left;
}

.pagination a {
  color: #9EABB3;
  transition: all 0.2s ease;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
  position: absolute;
  display: inline-block;
  padding: 0 15px;
  border: #bfc8cd 1px solid;
  text-decoration: none;
  border-radius: 4px;
  transition: border 0.3s ease;
}

.older-posts {
  right: 0;
}

.page-number {
  display: inline-block;
  padding: 2px 0;
  min-width: 100px;
}

.newer-posts {
  left: 0;
}

.older-posts:hover,
.newer-posts:hover {
  color: #d733ff;
  border-color: #13790a;
}

.extra-pagination {
  display: inline-block;
  border-bottom: #EBF2F6 1px solid;
}

.extra-pagination:after {
  display: block;
  content: "";
  width: 7px;
  height: 7px;
  border: #E7EEF2 1px solid;
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
  background: #FFF;
  border-radius: 100%;
  box-shadow: #FFF 0 0 0 5px;
}

.extra-pagination .pagination {
  width: auto;
}

/* ==========================================================================
   11. Footer - The bottom of every page
   ========================================================================== */

footer {
  display: flex;
  align-items: left;
  justify-content: left;
  flex-direction: column;
  margin: 4rem 0 4rem 0;
  padding: 1rem 15px;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.75em;
  color: #e246ab;
  background-color: #000000;
}

footer a {
  color: #1db954;
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  color: #d733ff;
}

.kg-card-markdown {
  display: flex;
  flex-direction: column;
  max-width: 920px;
}

/* Larger than mobile screen */
@media (max-width: 40.0rem) {
  .scroll-down {
    bottom: 0px;
    visibility: hidden;
  }

  .post-contentb {
    margin: 0 auto;
    max-width: 60%;
  }
}

/* Larger than tablet screen */
@media (min-width: 80.0rem) {
  body:not(.home-template) .main-header {
    height: 35vh;
  }

  .blog-logo img {
    height: 172px;
  }

  .main-header-title {
    font-size: 4rem;
  }

  .main-header-second-title {
    font-size: 1.6rem;
  }

  .main-header-description {
    font-size: 2rem;
  }

  .scroll-down {
    bottom: 20px;
  }
}

/* Larger than desktop screen */
@media (min-width: 120.0rem) {
}

/* Gist */

.post-contentb table td:first-child {
  background-image: none !important;
}

.gist {
  font-size: 18px
}

.gist .gist-file {
  border-radius: 5px !important;
  padding-top: 20px;
}

.gist .gist-data {
  border: none !important;
  background-color: #2b2b2b !important;
}

.gist-meta, .gist-file, .octotree_toggle, ul.comparison-list > li.title, button.button, a.button, span.button, button.minibutton, a.minibutton, span.minibutton, .clone-url-button > .clone-url-link {
  background: #3b3f41 !important;
  border-color: #383838 !important;
  border-radius: 0 0 3px 3px !important;
  text-shadow: none !important;
  color: #b5b5b5 !important
}

.markdown-format pre, .markdown-body pre, .markdown-format .highlight pre, .markdown-body .highlight pre, body.blog pre, #facebox pre, .blob-expanded, .terminal, .copyable-terminal, #notebook .input_area, .blob-code-context, .markdown-format code, body.blog pre > code, .api pre, .api code, .CodeMirror, .highlight {
  background-color: #3b3f41 !important;
  color: #C5C8C6 !important
}

.gist .blob-code {
  padding: 1px 10px !important;
  text-align: left;
  background: #000;
  border: 0
}

.blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  color: #6B6B6B !important;
  border: 0
}

.blob-code, .blob-code-inner {
  color: #C5C8C6 !important
}

.pl-c, .pl-c span {
  color: #969896 !important;
  font-style: italic !important
}

.pl-c1 {
  color: #DE935F !important
}

.pl-cce {
  color: #DE935F !important
}

.pl-cn {
  color: #DE935F !important
}

.pl-coc {
  color: #DE935F !important
}

.pl-cos {
  color: #B5BD68 !important
}

.pl-e {
  color: #F0C674 !important
}

.pl-ef {
  color: #F0C674 !important
}

.pl-en {
  color: #F0C674 !important
}

.pl-enc {
  color: #DE935F !important
}

.pl-enf {
  color: #F0C674 !important
}

.pl-enm {
  color: #F0C674 !important
}

.pl-ens {
  color: #DE935F !important
}

.pl-ent {
  color: #B294BB !important
}

.pl-entc {
  color: #F0C674 !important
}

.pl-enti {
  color: #F0C674 !important;
  font-weight: 700 !important
}

.pl-entm {
  color: #C66 !important
}

.pl-eoa {
  color: #B294BB !important
}

.pl-eoac {
  color: #C66 !important
}

.pl-eoac .pl-pde {
  color: #C66 !important
}

.pl-eoai {
  color: #B294BB !important
}

.pl-eoai .pl-pde {
  color: #B294BB !important
}

.pl-eoi {
  color: #F0C674 !important
}

.pl-k {
  color: #B294BB !important
}

.pl-ko {
  color: #B294BB !important
}

.pl-kolp {
  color: #B294BB !important
}

.pl-kos {
  color: #DE935F !important
}

.pl-kou {
  color: #DE935F !important
}

.pl-mai .pl-sf {
  color: #C66 !important
}

.pl-mb {
  color: #B5BD68 !important;
  font-weight: 700 !important
}

.pl-mc {
  color: #B294BB !important
}

.pl-mh .pl-pdh {
  color: #DE935F !important
}

.pl-mi {
  color: #B294BB !important;
  font-style: italic !important
}

.pl-ml {
  color: #B5BD68 !important
}

.pl-mm {
  color: #C66 !important
}

.pl-mp {
  color: #81A2BE !important
}

.pl-mp1 .pl-sf {
  color: #81A2BE !important
}

.pl-mq {
  color: #DE935F !important
}

.pl-mr {
  color: #B294BB !important
}

.pl-ms {
  color: #B294BB !important
}

.pl-pdb {
  color: #B5BD68 !important;
  font-weight: 700 !important
}

.pl-pdc {
  color: #969896 !important;
  font-style: italic !important
}

.pl-pdc1 {
  color: #DE935F !important
}

.pl-pde {
  color: #DE935F !important
}

.pl-pdi {
  color: #B294BB !important;
  font-style: italic !important
}

.pl-pds {
  color: #B5BD68 !important
}

.pl-pdv {
  color: #C66 !important
}

.pl-pse {
  color: #DE935F !important
}

.pl-pse .pl-s2 {
  color: #DE935F !important
}

.pl-s {
  color: #B294BB !important
}

.pl-s1 {
  color: #B5BD68 !important
}

.pl-s2 {
  color: #c5c8c6 !important
}

.pl-mp .pl-s3 {
  color: #B294BB !important
}

.pl-s3 {
  color: #81a2be !important
}

.pl-sc {
  color: #c5c8c6 !important
}

.pl-scp {
  color: #DE935F !important
}

.pl-sf {
  color: #DAD085 !important
}

.pl-smc {
  color: #F0C674 !important
}

.pl-smi {
  color: #c5c8c6 !important
}

.pl-smp {
  color: #c5c8c6 !important
}

.pl-sok {
  color: #B294BB !important
}

.pl-sol {
  color: #B5BD68 !important
}

.pl-som {
  color: #C66 !important
}

.pl-sr {
  color: #C66 !important
}

.pl-sra {
  color: #B294BB !important
}

.pl-src {
  color: #B294BB !important
}

.pl-sre {
  color: #B294BB !important
}

.pl-st {
  color: #B294BB !important
}

.pl-stj {
  color: #c5c8c6 !important
}

.pl-stp {
  color: #DE935F !important
}

.pl-sv {
  color: #DE935F !important
}

.pl-v {
  color: #DE935F !important
}

.pl-vi {
  color: #DE935F !important
}

.pl-vo {
  color: #C66 !important
}

.pl-vpf {
  color: #DE935F !important
}

.pl-mi1 {
  color: #8F9D6A !important;
  background: rgba(0, 64, 0, .5) !important
}

.pl-mdht {
  color: #8F9D6A !important;
  background: rgba(0, 64, 0, .5) !important
}

.pl-md {
  color: #C66 !important;
  background: rgba(64, 0, 0, .5) !important
}

.pl-mdhf {
  color: #C66 !important;
  background: rgba(64, 0, 0, .5) !important
}

.pl-mdr {
  color: #DE935F !important;
  font-weight: 400 !important
}

.pl-mdh {
  color: #C66 !important;
  font-weight: 400 !important
}

.pl-mdi {
  color: #C66 !important;
  font-weight: 400 !important
}

.pl-ib {
  background-color: #C66 !important
}

.pl-id {
  background-color: #C66 !important;
  color: #fff !important
}

.pl-ii {
  background-color: #C66 !important;
  color: #fff !important
}

.pl-iu {
  background-color: #C66 !important
}

.pl-mo {
  color: #c5c8c6 !important
}

.pl-mri {
  color: #DE935F !important
}

.pl-ms1 {
  background-color: #c5c8c6 !important
}

.pl-va {
  color: #DE935F !important
}

.pl-vpu {
  color: #DE935F !important
}

.pl-entl {
  color: #c5c8c6 !important
}

.CodeMirror-gutters {
  background: #222 !important;
  border-right: 1px solid #484848 !important
}

.CodeMirror-guttermarker {
  color: #fff !important
}

.CodeMirror-guttermarker-subtle {
  color: #aaa !important
}

.CodeMirror-linenumber {
  color: #aaa !important
}

.CodeMirror-cursor {
  border-left: 1px solid #fff !important
}

.CodeMirror-activeline-background {
  background: #27282E !important
}

.CodeMirror-matchingbracket {
  outline: 1px solid grey !important;
  color: #fff !important
}

.cm-keyword {
  color: #f9ee98 !important
}

.cm-atom {
  color: #FC0 !important
}

.cm-number {
  color: #ca7841 !important
}

.cm-def {
  color: #8DA6CE !important
}

.cm-variable-2, span.cm-tag {
  color: #607392 !important
}

.cm-variable-3, span.cm-def {
  color: #607392 !important
}

.cm-operator {
  color: #cda869 !important
}

.cm-comment {
  color: #777 !important;
  font-style: italic !important;
  font-weight: 400 !important
}

.cm-string {
  color: #8f9d6a !important
}

.cm-string-2 {
  color: #bd6b18 !important
}

.cm-meta {
  background-color: #141414 !important;
  color: #f7f7f7 !important
}

.cm-builtin {
  color: #cda869 !important
}

.cm-tag {
  color: #997643 !important
}

.cm-attribute {
  color: #d6bb6d !important
}

.cm-header {
  color: #FF6400 !important
}

.cm-hr {
  color: #AEAEAE !important
}

.cm-link {
  color: #ad9361 !important;
  font-style: italic !important;
  text-decoration: none !important
}

.cm-error {
  border-bottom: 1px solid red !important
}

#notebook .highlight table {
  background: #1d1f21 !important;
  color: #c5c8c6 !important
}

.highlight .hll {
  background-color: #373b41 !important
}

.highlight .c {
  color: #969896 !important
}

.highlight .err {
  color: #c66 !important
}

.highlight .k {
  color: #b294bb !important
}

.highlight .l {
  color: #de935f !important
}

.highlight .h, .highlight .n {
  color: #c5c8c6 !important
}

.highlight .o {
  color: #8abeb7 !important
}

.highlight .p {
  color: #c5c8c6 !important
}

.highlight .cm {
  color: #969896 !important
}

.highlight .cp {
  color: #969896 !important
}

.highlight .c1 {
  color: #969896 !important
}

.highlight .cs {
  color: #969896 !important
}

.highlight .gd {
  color: #c66 !important
}

.highlight .ge {
  font-style: italic !important
}

.highlight .gh {
  color: #c5c8c6 !important;
  font-weight: 700 !important
}

.highlight .gi {
  color: #b5bd68 !important
}

.highlight .gp {
  color: #969896 !important;
  font-weight: 700 !important
}

.highlight .gs {
  font-weight: 700 !important
}

.highlight .gu {
  color: #8abeb7 !important;
  font-weight: 700 !important
}

.highlight .kc {
  color: #b294bb !important
}

.highlight .kd {
  color: #b294bb !important
}

.highlight .kn {
  color: #8abeb7 !important
}

.highlight .kp {
  color: #b294bb !important
}

.highlight .kr {
  color: #b294bb !important
}

.highlight .kt {
  color: #f0c674 !important
}

.highlight .ld {
  color: #b5bd68 !important
}

.highlight .m {
  color: #de935f !important
}

.highlight .s {
  color: #b5bd68 !important
}

.highlight .na {
  color: #81a2be !important
}

.highlight .nb {
  color: #c5c8c6 !important
}

.highlight .nc {
  color: #f0c674 !important
}

.highlight .no {
  color: #c66 !important
}

.highlight .nd {
  color: #8abeb7 !important
}

.highlight .ni {
  color: #c5c8c6 !important
}

.highlight .ne {
  color: #c66 !important
}

.highlight .nf {
  color: #81a2be !important
}

.highlight .nl {
  color: #c5c8c6 !important
}

.highlight .nn {
  color: #f0c674 !important
}

.highlight .nx {
  color: #81a2be !important
}

.highlight .py {
  color: #c5c8c6 !important
}

.highlight .nt {
  color: #8abeb7 !important
}

.highlight .nv {
  color: #c66 !important
}

.highlight .ow {
  color: #8abeb7 !important
}

.highlight .w {
  color: #c5c8c6 !important
}

.highlight .mf {
  color: #de935f !important
}

.highlight .mh {
  color: #de935f !important
}

.highlight .mi {
  color: #de935f !important
}

.highlight .mo {
  color: #de935f !important
}

.highlight .sb {
  color: #b5bd68 !important
}

.highlight .sc {
  color: #c5c8c6 !important
}

.highlight .sd {
  color: #969896 !important
}

.highlight .s2 {
  color: #b5bd68 !important
}

.highlight .se {
  color: #de935f !important
}

.highlight .sh {
  color: #b5bd68 !important
}

.highlight .si {
  color: #de935f !important
}

.highlight .sx {
  color: #b5bd68 !important
}

.highlight .sr {
  color: #b5bd68 !important
}

.highlight .s1 {
  color: #b5bd68 !important
}

.highlight .ss {
  color: #b5bd68 !important
}

.highlight .bp {
  color: #c5c8c6 !important
}

.highlight .vc {
  color: #c66 !important
}

.highlight .vg {
  color: #c66 !important
}

.highlight .vi {
  color: #c66 !important
}

.highlight .il {
  color: #de935f !important
}

/* ==========================================================================
   14. Animations
   ========================================================================== */

/* Used to fade in title/desc on the home page */
@-webkit-keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Used to bounce .scroll-down on home page */
@-webkit-keyframes bounce {
  0%, 10%, 25%, 40%, 50% {
    -webkit-transform: translateY(0) rotate(-90deg);
    transform: translateY(0) rotate(-90deg);
  }
  20% {
    -webkit-transform: translateY(-10px) rotate(-90deg);
    transform: translateY(-10px) rotate(-90deg);
  }
  30% {
    -webkit-transform: translateY(-5px) rotate(-90deg);
    transform: translateY(-5px) rotate(-90deg);
  }
}

@keyframes bounce {
  0%, 10%, 25%, 40%, 50% {
    -webkit-transform: translateY(0) rotate(-90deg);
    transform: translateY(0) rotate(-90deg);
  }
  20% {
    -webkit-transform: translateY(-10px) rotate(-90deg);
    transform: translateY(-10px) rotate(-90deg);
  }
  30% {
    -webkit-transform: translateY(-5px) rotate(-90deg);
    transform: translateY(-5px) rotate(-90deg);
  }
}