* {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    box-sizing: border-box;
}

::selection { background: #ddd; color: #000 }

:root { --lh: 1.5em }

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

body {
    font: 1em/var(--lh) monospace;
    padding: 16vh 2em 0;
    background: #f2f2f2;
    display: grid;
    grid: 1fr / minmax(auto, 64ch);
    justify-content: center;
    height: 100%;
}

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

a i { border-bottom: 1px dotted; font-style: italic }
a:active i { border: none }

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

strong, b { font-weight: bold }
em, i { font-style: italic }
main > a { display: block; width: fit-content }

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

img { max-width: 100%; height: auto; margin: var(--lh) 0; }

code { background: #e5e5e5; padding: .1em .3em; }
pre code { display: block; padding: 1em; overflow-x: auto; margin: var(--lh) 0; }
table { border: none; margin-top: -.16666em }

td:first-child { padding: 0 }
td { padding: 0 3em }
tr:nth-child(n) { background: none }
tr td:last-child { padding: 0 }

@media (max-device-width: 600px) {
    body { padding-top: 2em; justify-content: start }
    footer { padding: 2em 0 }
    a i { border-color: #888 }
}