html,body {
  margin: auto;
  padding: 0;
}

html {
  background-color: black;
}

* {
  font-family: 'Fira Sans';
  text-rendering: optimizeLegibility;
  font-feature-settings: "calt" 1; /* For IE/Edge */
}

pre, pre > *, code, code > * {
  font-family: 'Fira Code' !important;
}


body {
  background: white;

  /* A nice fade in. */
  opacity: 0;
  animation: .5s fadeIn ease-in 0s 1 forwards;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#hero-wrapper {
  background-color: black;
  position: relative;
}

#hero-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

header > #hero-wrapper > img#background {
  max-height: 90vh;
}

footer > #hero-wrapper > img#background {
  max-height: 40vh;
}

#hero-wrapper > img#background {
  opacity: 0;
  animation: 1s fadeIn ease-in .5s 1 forwards;
  width: 100%;
  display: block;
  object-fit: cover;
}

#hero-wrapper > div.content {
  margin: auto;
  text-align: left;
  position: absolute;
  bottom: 10vh;
  left: 20vw;
  right: 20vw;
  animation: 1s fadeIn ease-in 0s 1 forwards;
}

#hero-wrapper > div.content > * {
  color: white;
  text-shadow: 0px 0px 1em black, 0px 0px 1em black;
}

#hero-wrapper a:visited, #hero-wrapper a {
  color: white;
}

main,aside,nav#pagination {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 3vh;
  padding-bottom: 3vh;
}

header,footer,nav#pagination {
  text-align: center;
}

main,aside,nav#pagination {
  margin-bottom: 5vh;
  margin-top: 2vh;
}

/* Pagination specific */
nav#pagination > a[href="#"] {
  color: #CCCCCC;
  text-decoration: none;
}

/* Pages Navigation */
nav#pages > ul {
  padding-left: 0;
}

nav#pages > ul > li {
  display: inline-block;
}

nav#pages > ul > li > a:hover {
  text-decoration: underline;
}

nav#pages > ul > li > a {
  text-decoration: none;
}

nav#pages > ul > li:not(:first-child):before {
  content: " | ";
}

/* Misc */

hr {
  width: 60%;
  border: none;
  height: 1px;
  margin-top: 2vh;
  margin-bottom: 2vh;
  background-color: rgba(0,0,0,.3);
}

.post-meta {
  color: rgba(0,0,0,.5);
  font-style: italic;
}

span.author,span.image-credit {
  display: block;
  font-size: 12pt;
}

figure {
  text-align: center;
}
img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

main {
  max-width: 60vw;
  margin: auto;
  line-height: 1.4;
}

article > h1:before,article > h2:before {
  content: "";
  width: 45vw;
  height: 5px;
  position: relative;
  display: flex;
  background: #999999;
  height: 1px;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

article > h3:before {
  content: "";
  width: 25vw;
  height: 5px;
  position: relative;
  display: flex;
  background: #999999;
  height: 1px;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

/* Hide the underlines from title links. */
h1 > a,h2 > a,h3 > a,h4 > a {
    text-decoration: none;
    color: #000000;
}

a {
  color: #666666;
}

a:visited {
  color: #999999;
}

article > h2 {
    margin-top: 0px;
}

/* Make a nice button class */
.button {
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  padding: 5pt 15pt;
  margin: 5pt 5pt;
  line-height: 18pt;
  border: 1px solid #DDDDDD;
  box-shadow: 0 0 0px;
  transition: box-shadow 0.2s linear;
}

.button:hover {
    box-shadow: 0 0 2px;
}

.button:active {
    background-color: black;
    color: white;
    box-shadow: 0 0 2px black;
    border-color: black;
}

/* Make a nice border around code. */
pre {
  padding: 5px;
  border: 1px solid #DDDDDD;
  overflow-x: scroll;
  border-radius: 5px;
}

:not(pre) > code {
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #DDDDDD;
  border-radius: 5px;
}

/*
 * GitHub style for Pygments syntax highlighter, for use with Jekyll
 * Courtesy of GitHub.com
 */
.highlight pre, pre, code { background-color: #272822; }
pre, code { color: #ffffff; }
.highlight .hll { background-color: #272822; }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
.highlight .gh { } /* Generic Heading & Diff Header */
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */