@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i");

:root {
  --background: #202124;
  --textColor: #fff;
  --lighterVariant: #8f9091;
  --codeBG: rgba(255,255,255,0.08)
}

@media (color-index: 70) {

:root {
    --background: #fff;
    --textColor: #202124;
    --codeBG: rgba(32,33,36,0.08)
}
  }

@media (prefers-color-scheme: light) {

:root {
    --background: #fff;
    --textColor: #202124;
    --codeBG: rgba(32,33,36,0.08)
}
  }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #fff;
  color: var(--textColor);
  background: #202124;
  background: var(--background);
  font-size: 17px;
}

.article p,
.article li {
  font-family: "Merriweather", serif;
}

h1 {
  margin: 0 auto 40px auto;
}

h2 {
  margin: 104px auto 16px auto;
}

h3 {
  margin: 64px auto 16px auto;
}

code {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(255,255,255,0.08);
  background-color: var(--codeBG);
  border-radius: 6px;
}

span.date {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.5;
}

em.aside {
  opacity: 0.6;
  transition: opacity 1s 0.2s
}

em.aside:hover {
    opacity: 0.9;
  }

p, li {
  margin: 0 auto 28px auto;
  line-height: 29px;
}

li {
  margin-bottom: 8px;
}

.article a {
  color: inherit;
  border-bottom: 2px solid #7cace4;
  text-decoration: none;
}

a.ninja {
  border-bottom: none;
}

hr {
  opacity: 0.2;
  margin: 40px auto;
}

.article,
.header,
.footer {
  max-width: 600px;
  margin: auto;
}

.header,
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header #video-icon,
  .header #back-arrow,
  .header #footer-back-arrow,
  .footer #video-icon,
  .footer #back-arrow,
  .footer #footer-back-arrow {
    fill: #fff;
    fill: var(--textColor);
  }

.header a, .footer a {
    display: block;
    color: #fff;
    color: var(--textColor);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    width: 100%;

    opacity: 0.5;
    transition: opacity 0.2s
  }

.header a:hover, .footer a:hover {
      opacity: 1;
    }

.header .pull-right, .footer .pull-right {
    text-align: right;
  }

.header svg,
.footer svg {
  margin-right: 4px;
}

.header {
  margin: 40px auto 64px auto;
  padding-bottom: 12px;
  border-bottom: 1px solid #8f9091;
  border-bottom: 1px solid var(--lighterVariant);
}

.footer {
  margin: 104px auto 40px auto;
  padding-top: 16px;
  border-top: 1px solid #8f9091;
  border-top: 1px solid var(--lighterVariant);
}

.article img {
  width: 100%;
  margin: 24px auto 40px;
  border-radius: 4px;
}