body {
  /* background-color: #202020; */
  background-color: #000000;
  /* color: #ffffff; */
  color: #dddddd;
  font-family: helvetica, arial, "sans-serif";
  font-size: 18px;
}

header {
  padding-top: 8px;
  text-align: center;
}

header .slogan {
  text-align: center;
  color: #ffffff;
  font-size: 1.1em;
}

header a img {
  max-width: 100%;
}

.logo {
  animation-duration: 1s;
  animation-delay: 2s;
  animation-name: logo-glitch;
}

nav {
  border: none;
  /* border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea; */
  border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea;
  border-radius: 8px;

  /* background-color: #303030; */
  background-color: #202020;

  display: flex;
  flex-wrap: wrap;
  /* text-align: center; */

  animation-duration: 0.4s;
  animation-delay: 1s;
  animation-name: nav-glitch;
}

nav a,
nav a:link,
nav a:visited,
nav a:active {
  flex-grow: 1;
  display: block;
  font-size: 1em;
  color: #eaeaea;
  text-decoration: none;
  text-align: center;
  /* border-left: 1px solid rgba(10, 10, 10, 0.5); */
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
}

nav a:first-child {
  border-left: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

na a:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

nav a:hover {
  background-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.5) 0,
    transparent 100%
  );
}

main h1 {
  text-align: center;
}

main h1,
main h2,
main h3 {
  margin-top: 32px;
  font-weight: normal;
}

main,
footer {
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 800px;
}

p {
  line-height: 1.25em;
}

ul li {
  line-height: 1.25em;
}

nav {
  margin-left: 16px;
  margin-right: 16px;
}

a,
a:link {
  color: #20eaea;
}

a:visited {
  color: #10dada;
}

a:hover {
  color: #ea20ea;
}

.blog-feed h1 a,
h1 a {
  display: block;
  color: #ea20ea;
  text-decoration: none;
}

.blog-feed h1 a:hover,
h1 a:hover {
  text-decoration: underline;
}

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

a.read-more:hover {
  text-decoration: underline;
}

strong {
  color: #ea20ea;
}

em {
  color: #20eaea;
}

hr {
  border: none;
  border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea;
  background-color: none;
  height: 8px;
}

code {
  color: #20eaea;
}

pre {
  font-size: 1em;

  overflow-x: auto;

  border: none;
  border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea;
  border-radius: 8px;

  background-color: #202020 !important;
  /* background-color: #303030 !important; */

  padding-top: 24px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 16px;

  margin-bottom: 24px;
  margin-top: 24px;

  position: relative;
}

pre.code {
}

pre.code.elixir:before {
  content: "elixir " attr(data-file);
  color: #20eaea;
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.8em;
}

pre.shell-commands:before {
  content: "shell " attr(data-file);
  color: #20eaea;
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.8em;
}

pre.code.html:before {
  content: attr(data-file);
  color: #20eaea;
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.8em;
}

pre.code.css:before {
  content: attr(data-file);
  color: #20eaea;
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.8em;
}

a.image {
  display: block;
  text-align: center;
}

.blog-image {
  max-height: 256px;
  max-width: 100%;
  border: none;
  border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea;
  border-radius: 8px;
}

small {
  font-size: 0.6em;
}

footer .following {
  display: flex;
  margin-top: 84px;
}

footer .following section {
  flex-grow: 1;
  width: 100%;
}

footer .webring {
  width: 256px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 32px;
}

.newsletter input[type="text"],
.newsletter input[type="email"] {
  display: block;
  font-size: 1em;

  border: none;
  border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea;
  border-radius: 8px;

  background-color: #202020;
  /* background-color: #303030; */
  color: #ffffff;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: none;
}

.newsletter input[type="checkbox"] {
  box-shadow: none;
}

.newsletter input[type="email"]::placeholder {
  /* color: #101010; */
  color: #999999;
}

.newsletter .checkbox-holders {
  display: flex;
}

.newsletter .checkbox-holders .checkbox-holder {
  flex-grow: 1;
}

.newsletter .checkbox-holder label {
  font-size: 0.8em;
}

.newsletter button {
  border: none;
  /* border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea; */
  border-left: 1px solid #ea20ea;
  border-right: 1px solid #20eaea;
  border-radius: 8px;

  background-color: #202020;
  /* background-color: #303030; */
  color: #ffffff;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.blog-post-date {
  display: block;
  text-align: center;
}

.iframe-embed {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.iframe-embed iframe,
.iframe-embed object,
.iframe-embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fancy-video-container {
  text-align: center;
}

video.fancy {
  width: 100%;
  border: none;
  border-top: 1px solid #ea20ea;
  border-bottom: 1px solid #20eaea;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Desktop-specific */

/* Make logo behave. With 8px margins etc. we need 378px to show it at full quality (retina 2x sort of) */
@media (min-width: 378px) {
  header a img {
    max-width: 360px;
  }

  main,
  footer {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/*
Mobile-specific
*/
@media (max-width: 640px) {
  footer .following {
    display: block;
  }
  footer .following section {
    margin-top: 48px;
    width: 100%;
  }

  .newsletter .checkbox-holders {
    display: block;
  }

  pre {
    font-size: 0.8em;
  }
}

/* Animations */

@keyframes logo-glitch {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  9% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    opacity: 0.2;
    transform: translate(2px, 0) scale(2, 1);
  }
  19% {
    opacity: 0.2;
    transform: translate(2px, 0) scale(1, 1);
  }
  20% {
    opacity: 0.4;
    transform: translate(-4px, 0);
  }
  29% {
    opacity: 0.4;
    transform: translate(-4px, 0);
  }
  30% {
    opacity: 0.2;
    transform: translate(-2px, -4px);
  }
  49% {
    opacity: 0.2;
    transform: translate(-2px, -4px);
  }
  50% {
    opacity: 0;
    transform: translate(0px, 2px);
  }
  59% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  60% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  69% {
    opacity: 0.2;
  }
  72% {
    opacity: 1;
  }
  76% {
    opacity: 0.2;
  }
  82% {
    opacity: 1;
  }
}

@keyframes nav-glitch {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  9% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    opacity: 0.2;
    transform: translate(2px, 0) scale(2, 1);
  }
  19% {
    opacity: 0.2;
    transform: translate(2px, 0) scale(1, 1);
  }
  20% {
    opacity: 0.4;
    transform: translate(-4px, 0);
  }
  29% {
    opacity: 0.4;
    transform: translate(-4px, 0);
  }
  30% {
    opacity: 0.2;
    transform: translate(-2px, -4px);
  }
  49% {
    opacity: 0.2;
    transform: translate(-2px, -4px);
  }
  50% {
    opacity: 0;
    transform: translate(0px, 2px);
  }
  59% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  60% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  69% {
    opacity: 0.2;
  }
  72% {
    opacity: 1;
  }
  76% {
    opacity: 0.2;
  }
  82% {
    opacity: 1;
  }
}
pre.code pre {
  background-color: #272822;
}
pre.code .hll {
  background-color: #272822;
}
pre.code .c {
  color: #75715e;
} /* Comment */
pre.code .err {
  color: #960050;
  background-color: #1e0010;
} /* Error */
pre.code .k {
  color: #66d9ef;
} /* Keyword */
pre.code .l {
  color: #ae81ff;
} /* Literal */
pre.code .n {
  color: #f8f8f2;
} /* Name */
pre.code .o {
  color: #f92672;
} /* Operator */
pre.code .p {
  color: #f8f8f2;
} /* Punctuation */
pre.code .cm {
  color: #75715e;
} /* Comment.Multiline */
pre.code .cp {
  color: #75715e;
} /* Comment.Preproc */
pre.code .c1 {
  color: #75715e;
} /* Comment.Single */
pre.code .cs {
  color: #75715e;
} /* Comment.Special */
pre.code .ge {
  font-style: italic;
} /* Generic.Emph */
pre.code .gs {
  font-weight: bold;
} /* Generic.Strong */
pre.code .kc {
  color: #66d9ef;
} /* Keyword.Constant */
pre.code .kd {
  color: #66d9ef;
} /* Keyword.Declaration */
pre.code .kn {
  color: #f92672;
} /* Keyword.Namespace */
pre.code .kp {
  color: #66d9ef;
} /* Keyword.Pseudo */
pre.code .kr {
  color: #66d9ef;
} /* Keyword.Reserved */
pre.code .kt {
  color: #66d9ef;
} /* Keyword.Type */
pre.code .ld {
  color: #e6db74;
} /* Literal.Date */
pre.code .m {
  color: #ae81ff;
} /* Literal.Number */
pre.code .s {
  color: #e6db74;
} /* Literal.String */
pre.code .na {
  color: #a6e22e;
} /* Name.Attribute */
pre.code .nb {
  color: #f8f8f2;
} /* Name.Builtin */
pre.code .nc {
  color: #a6e22e;
} /* Name.Class */
pre.code .no {
  color: #66d9ef;
} /* Name.Constant */
pre.code .nd {
  color: #a6e22e;
} /* Name.Decorator */
pre.code .ni {
  color: #f8f8f2;
} /* Name.Entity */
pre.code .ne {
  color: #a6e22e;
} /* Name.Exception */
pre.code .nf {
  color: #a6e22e;
} /* Name.Function */
pre.code .nl {
  color: #f8f8f2;
} /* Name.Label */
pre.code .nn {
  color: #f8f8f2;
} /* Name.Namespace */
pre.code .nx {
  color: #a6e22e;
} /* Name.Other */
pre.code .py {
  color: #f8f8f2;
} /* Name.Property */
pre.code .nt {
  color: #f92672;
} /* Name.Tag */
pre.code .nv {
  color: #f8f8f2;
} /* Name.Variable */
pre.code .ow {
  color: #f92672;
} /* Operator.Word */
pre.code .w {
  color: #f8f8f2;
} /* Text.Whitespace */
pre.code .mf {
  color: #ae81ff;
} /* Literal.Number.Float */
pre.code .mh {
  color: #ae81ff;
} /* Literal.Number.Hex */
pre.code .mi {
  color: #ae81ff;
} /* Literal.Number.Integer */
pre.code .mo {
  color: #ae81ff;
} /* Literal.Number.Oct */
pre.code .sb {
  color: #e6db74;
} /* Literal.String.Backtick */
pre.code .sc {
  color: #e6db74;
} /* Literal.String.Char */
pre.code .sd {
  color: #e6db74;
} /* Literal.String.Doc */
pre.code .s2 {
  color: #e6db74;
} /* Literal.String.Double */
pre.code .se {
  color: #ae81ff;
} /* Literal.String.Escape */
pre.code .sh {
  color: #e6db74;
} /* Literal.String.Heredoc */
pre.code .si {
  color: #e6db74;
} /* Literal.String.Interpol */
pre.code .sx {
  color: #e6db74;
} /* Literal.String.Other */
pre.code .sr {
  color: #e6db74;
} /* Literal.String.Regex */
pre.code .s1 {
  color: #e6db74;
} /* Literal.String.Single */
pre.code .ss {
  color: #e6db74;
} /* Literal.String.Symbol */
pre.code .bp {
  color: #f8f8f2;
} /* Name.Builtin.Pseudo */
pre.code .vc {
  color: #f8f8f2;
} /* Name.Variable.Class */
pre.code .vg {
  color: #f8f8f2;
} /* Name.Variable.Global */
pre.code .vi {
  color: #f8f8f2;
} /* Name.Variable.Instance */
pre.code .il {
  color: #ae81ff;
} /* Literal.Number.Integer.Long */

pre.code .gh {
} /* Generic Heading & Diff Header */
pre.code .gu {
  color: #75715e;
} /* Generic.Subheading & Diff Unified/Comment? */
pre.code .gd {
  color: #f92672;
} /* Generic.Deleted & Diff Deleted */
pre.code .gi {
  color: #a6e22e;
} /* Generic.Inserted & Diff Inserted */