* {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

:root { --lh: 1.5em }

::selection { background: #d4d4d4; color: #1a1a1a }

html {
  margin: 0 0 0 calc(100vw - 100%);
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font: 1em/var(--lh) "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  background: #f3f0ec;
  color: #1a1a1a;
  padding: 16vh 2em 0;
  display: grid;
  grid: 1fr / minmax(auto, 64ch);
  justify-content: center;
  height: 100%;
}

a {
  display: inline-block;
  padding: .16666em;
  margin-left: -.16666em;
  text-decoration: none;
}

a i { border-bottom: 1px dotted }
a:hover i { border-bottom-style: solid }

h1,
p,
nav { margin-bottom: var(--lh) }

h2,
h3 { margin-bottom: var(--lh) }

h2 { margin-top: calc(var(--lh) * 2) }
h3 { margin-top: var(--lh) }

ol,
ul { margin-bottom: var(--lh); padding-left: 2em }
li { margin-bottom: calc(var(--lh) / 4) }
li:last-child { margin-bottom: 0 }

nav { margin-top: -.16666em }

footer { padding: calc(var(--lh) * 2) 0 8vh }
footer p { margin: 0 }

@media (max-width: 600px) {
  body { padding-top: 2em; justify-content: start }
  footer { padding-bottom: 2em }
}

@media (prefers-color-scheme: dark) {
  ::selection { background: #444; color: #e0e0e0 }

  body { background: #1a1a1a; color: #c4c4c4 }

  a i { border-color: #555 }
}