:root {
  color-scheme: dark;
  font-family: 'Courier New', monospace;
}

:root * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

:root > * {
  font-size: 75%;
  line-height: 2ch;
  transition: font-size 0.5s cubic-bezier(0, 0, 0, 1);
}

body {
  background: #111;
  color: #fb5;
  margin: 0 auto 0 0;
  max-width: 72ch;
  overflow-wrap: anywhere;
  padding: 0 1ch 0 7ch;
}

@media (min-width: calc((72ch + 9ch) * 0.75)) {
  body {
    margin: 0 auto;
    padding: 0 7ch;
  }
}

@media (min-width: calc(72ch + 14ch)) {
  :root > * {
    font-size: 100%;
  }
}

a {
  color: #f70;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #f20;
}

p,
h1, h2, h3, h4, h5, h6,
ol, ul,
pre,
nav,
.p {
  margin: 2ch 0;
}

h1, h2, h3, h4, h5, h6 {
  position: relative;
}

h1::before {
  content: '#';
  position: absolute;
  left: -2ch;
}

h2::before {
  content: '##';
  position: absolute;
  left: -3ch;
}

h3::before {
  content: '###';
  position: absolute;
  left: -4ch;
}

h4::before {
  content: '####';
  position: absolute;
  left: -5ch;
}

h5::before {
  content: '#####';
  position: absolute;
  left: -6ch;
}

h6::before {
  content: '######';
  position: absolute;
  left: -7ch;
}

ul > li::marker {
  content: '- ';
}

pre {
  overflow-x: scroll;
}

sup {
  vertical-align: baseline;
  position: relative;
  top: -0.25em;
}

sub {
  vertical-align: baseline;
  position: relative;
  top: 0.25em;
}

hr {
  background-color: transparent;
  border: none;
  border-radius: 0.25ch;
  height: 2ch;
  margin: 4ch 0;
}

hr::after {
  content: '';
  background-color: #fb5;
  border-radius: 0.5ch;
  display: block;
  height: 0.25ch;
  position: relative;
  top: 0.875ch;
}

nav {
  background-color: #fb5;
  border-radius: 0.5ch;
  color: #222;
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  text-transform: uppercase;
}

nav a {
  padding: 2ch;
  text-align: center;
  text-decoration: none;
}

nav a,
nav a:hover {
  color: black;
}

nav a:hover {
  background-color: #f93;
}

header {
  margin-bottom: 6ch;
}

footer {
  margin-top: 6ch;
}
