:root {
  --accent-1: #d6959f;
  --background: #575067;
  --marker: #7F7498;
}
body {
  position: relative;
  max-width: 600px;
  margin: 30px auto;
  background: var(--background);
  font: 108%/1.6 "Nunito", sans-serif;
  letter-spacing: .01em;
  word-spacing: .05em;
  color: #dcdcdc;
  text-shadow: 1px 1px #222;
}
a, a:visited, a:active {
  text-decoration: none;
  font-weight: bold;
  color: var(--accent-1);
}
a:hover { color: #f8d5db; }
a img:hover {
  opacity: .5;
  transition: .1s;
}
/*
=========
Structure
=========
*/
header {
  position: fixed;
  top: 70px;
  transform: translateX(-125px);
}
nav {
  position: fixed;
  top: 160px;
  transform: translateX(-130px);
  padding: 8px;
  font-family: "Chicago Plain", sans-serif;
  color: var(--accent-1);
  text-align: center;
  letter-spacing: 0;
  word-spacing: 0;
  border: 1px solid var(--accent-1);
  border-radius: 6px;
  box-shadow: 0 0 1px #ddd;
}
nav a, nav a:visited, nav a:active {
  display: block;
  color: var(--accent-1);
  font-weight: normal;
  text-decoration: none;
  text-shadow: -1px 0 #222, 0 1px #222, 1px 0 #222, 0 -1px #222;
}
nav a:hover { color: white; }
main { padding: 0 1em; }
footer {
  margin: 3.5em 0 1em;
  text-align: center;
}
/*
==================
Additional styling
==================
*/
h1, h2 {
  font-family: "Chicago Plain", sans-serif;
  font-weight: lighter;
  color: white;
  text-shadow: -1px 0 #222, 0 1px #222, 1px 0 #222, 0 -1px #222;
}
h2 { font-size: 125%; }
hr {
  height: 5px;
  margin: 4em 0;
  border: none;
  border-top: 1px solid var(--marker);
  color: var(--marker);
  overflow: visible;
  text-align: center;
}
hr:after {
  position: relative;
  top: -18px;
  padding: 0 4px;
  background: var(--background);
  content: "\1D121";
  font-size: 140%;
  text-shadow: none;
}
.buttons {
  text-align: center;
  image-rendering: pixelated;
}
.buttons img:hover {
  opacity: 100%;
  position: relative;
  top: 1px;
}
mark {
  color: inherit;
  background: linear-gradient(transparent 50%, var(--marker) 50%);
}
time, .date, footer {
  font: 75% monospace;
  text-transform: uppercase;
}
::selection {
  background: #f5f5f5;
  color: var(--background);
  text-shadow: none;
}
/*
===============
Smaller screens
===============
*/
@media screen and (max-width: 900px) {
  body { font-size: 90%; }
  header {
    position: absolute;
    transform: none;
    top: 0;
    left: 0;
  }
  nav {
    position: absolute;
    transform: none;
    max-width: 600px;
    top: 0;
    left: 70px;
  }
  nav a, nav a:visited, nav a:active {
    display: inline-block;
    padding: 0 7px;
  }
  main { transform: translateY(90px); }
}