* {
    margin: 0;
    padding: 0;
    font: 1em/var(--lh) monospace;
    color: #000;
    box-sizing: border-box;
}

:root {
    --lh: 1.7em
}

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

main {
    padding: 16vh 2em 0;
    height: 100%;
}

article {
    display: grid;
    grid-template-columns: minmax(auto, 110ch);
    grid-template-rows: auto;
    justify-content: center;
    gap: 1rem;
    padding: 5vh 2em 0;
}

article img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

article h1::before {
    content: "# ";
    color: #FF3030;
}

article h2::before {
    content: "## ";
    color: #FF3030;
}

article h3::before {
    content: "### ";
    color: #FF3030;
}

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

a:hover {
    border-bottom: 1px solid
}

a:active {
    border: none
}

span {
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-color: #FF3030
}

h2 {
    margin: var(--lh) 0 0 0
}

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

hr {
    margin: 0 0 var(--lh) 0;
    border: 1px dotted #ddd;
    width: 1.5%
}

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

footer p {
    margin: 0
}

@media (max-device-width: 600px) {
    a {
        border-bottom: 1px dotted #ddd
    }

    footer {
        padding-bottom: 2em
    }
}

@media (prefers-color-scheme: dark) {
    * {
        color: #ddd;
        background: #121212;
    }

    ::selection {
        background: #fff;
        color: #121212;
    }
}