/*
 * Dunny0 theme
 *
 * The HTML is the product; this stylesheet is optional enhancement. Source
 * order is never rearranged, content is never injected with CSS, and nothing
 * essential depends on color, hover, animation, a web font, or JavaScript.
 */

:root {
    color-scheme: dark;
    --background: #0b100c;
    --text: #96c88a;
    --strong: #b9eca9;
    --muted: #739d6c;
    --border: #35563a;
    --link: #73a9e6;
    --visited: #b58bd0;
    --active: #e0c066;
    --measure: 46rem;
}

html {
    background: #0b100c;
    background: var(--background);
}

/*
 * Browsers that predate HTML5 may not give its structural elements their
 * expected block layout. This declaration changes presentation only; the
 * document's source order and meaning remain intact without it.
 */
header,
nav,
main,
article,
footer {
    display: block;
}

body {
    max-width: 46em;
    max-width: 46rem;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2em 1.25em;
    padding: 2rem 1.25rem;
    background: #0b100c;
    background: var(--background);
    color: #96c88a;
    color: var(--text);
    /*
     * Use the browser/operating system's own default monospace face. This
     * avoids web fonts, platform-specific preferences, and network requests.
     * Browsers too old to understand CSS retain their own readable default.
     */
    font-family: monospace;
    /* Netscape-era browsers do not understand rem units. */
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.65;
}

a {
    color: #73a9e6;
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    /* Permit unusually long URLs to wrap instead of widening the document. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

a:visited {
    color: #b58bd0;
    color: var(--visited);
}

a:hover { text-decoration-thickness: 2px; }

a:active {
    color: #e0c066;
    color: var(--active);
}

a:focus {
    outline: 2px solid #e0c066;
    outline: 2px solid var(--active);
    outline-offset: 3px;
}

h1, h2, h3, strong {
    color: #b9eca9;
    color: var(--strong);
}

h1, h2, h3 {
    line-height: 1.25;
    margin-top: 2em;
    margin-top: 2rem;
    margin-bottom: 0.75em;
    margin-bottom: 0.75rem;
}

h1 { margin-top: 0; font-size: 1.7em; font-size: 1.7rem; }
h2 { font-size: 1.3em; font-size: 1.3rem; }
h3 { font-size: 1.1em; font-size: 1.1rem; }

p, ul, ol, pre { margin-top: 0; margin-bottom: 1em; margin-bottom: 1rem; }

ul, ol {
    padding-left: 2em;
}

li > ul,
li > ol {
    margin-top: 0.35em;
    margin-bottom: 0;
}

code, pre {
    color: #b9eca9;
    color: var(--strong);
}

code {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

body > header {
    padding-bottom: 1em;
    padding-bottom: 1rem;
    border-bottom: 1px solid #35563a;
    border-bottom-color: var(--border);
}

.site-title {
    margin: 0;
    font-size: 1.25em;
    font-size: 1.25rem;
    font-weight: bold;
}

.site-title a {
    color: #b9eca9;
    color: var(--strong);
}

nav .primary-links { margin: 0.4em 0 0; margin: 0.4rem 0 0; }

nav [aria-current="page"] { font-weight: bold; }

main {
    margin-top: 2.5em;
    margin-top: 2.5rem;
    margin-bottom: 2.5em;
    margin-bottom: 2.5rem;
}

.introduction {
    margin-bottom: 2em;
    margin-bottom: 2rem;
    color: #739d6c;
    color: var(--muted);
}

.post-summary h2 { margin-bottom: 0.35em; margin-bottom: 0.35rem; }

.post-summary + .post-summary {
    margin-top: 2.5em;
    margin-top: 2.5rem;
    padding-top: 1.5em;
    padding-top: 1.5rem;
    border-top: 1px solid #35563a;
    border-top-color: var(--border);
}

.metadata {
    color: #739d6c;
    color: var(--muted);
}

.metadata { font-size: 0.9em; font-size: 0.9rem; }

pre {
    overflow-x: auto;
    /* Preserve code formatting; horizontal scrolling is preferable here. */
    word-wrap: normal;
    overflow-wrap: normal;
    padding: 0.75em;
    padding: 0.75rem;
    border: 1px solid #35563a;
    border-color: var(--border);
}

hr {
    border: 0;
    border-top: 1px solid #35563a;
    border-top-color: var(--border);
    margin: 2em 0;
    margin: 2rem 0;
}

footer {
    color: #739d6c;
    color: var(--muted);
    font-size: 0.9em;
    font-size: 0.9rem;
}

footer p { margin-bottom: 0; }

/* Visible to assistive technology, hidden only from the visual canvas. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 35rem) {
    body { padding: 1rem 0.85rem; }
    h1 { font-size: 1.5rem; }
}