/* readable.css v1.1.1-rc1 (0BSD License) */
html,
html[data-font-family="serif"] {
    --font-family: serif
}

html[data-font-family="sans-serif"] {
    --font-family: sans-serif
}

html[data-font-family="monospace"] {
    --font-family: monospace
}

html,
html[data-theme="light"] {
    --background-color: snow;
    --color: #000
}

html[data-high-contrast="on"],
html[data-theme="light"][data-high-contrast="on"] {
    --background-color: #fff
}

html[data-theme="dark"] {
    --background-color: #1f272d;
    --color: #fff
}

html[data-theme="dark"][data-high-contrast="on"] {
    --background-color: #000
}

@media(prefers-color-scheme:dark) {
    html {
        --background-color: #222830;
        --color: #fff
    }

    html[data-high-contrast="on"] {
        --background-color: #000
    }
}

@media(prefers-contrast:more) {
    :is(html:not([data-theme]), html[data-theme="light"]):not([data-high-contrast="off"]) {
        --background-color: #fff
    }

    html[data-theme="dark"]:not([data-high-contrast="off"]) {
        --background-color: #000
    }
}

:root {
    --column-width: 67ch;
    --form-width: 50ch;
    --line-width: .125rem;
    --line-height: 1.5;
    --one-line: calc(var(--line-height) * 1rem);
    --half-line: calc(var(--one-line) * .5);
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--color)
}

a {
    color: inherit
}

a:active {
    color: red
}

header,
footer,
h1,
h2 {
    text-align: center
}

footer:not(.exclude) {
    border-top: var(--line-width) solid;
    contain: layout;
    margin-bottom: 0
}

summary {
    cursor: pointer
}

blockquote:not(.exclude) {
    padding-inline-start: var(--one-line);
    border-inline-start: var(--line-width) solid
}

ul,
ol {
    padding-inline-start: calc(var(--line-height) * 2rem)
}

:is(body, article, main, figure)>:is(img, video):not(.exclude) {
    max-width: 100%
}

figure:not(.exclude) {
    text-align: center
}

figure:not(.exclude)>*+figcaption {
    margin-top: 0;
    font-style: italic
}

article aside:not(.exclude) {
    border: var(--line-width) solid;
    padding: 0 var(--one-line);
    border-radius: var(--half-line)
}

pre {
    max-width: 100%;
    overflow: auto;
    line-height: var(--one-line)
}

hr {
    color: inherit;
    border: 0;
    border-top: var(--line-width) solid
}

p,
ul,
ol,
figcaption,
nav,
td,
th,
label {
    line-height: var(--line-height)
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
hr,
pre,
footer,
nav,
figure,
figcaption,
:is(ul, ol):not(li>*),
:is(body, article, main)>:is(img, video, details):not(.exclude),
table,
article>aside,
article>aside {
    margin: var(--one-line) 0
}

header {
    margin: 0
}

header :first-child {
    margin-top: calc(0.5 * var(--one-line))
}

header>h1 {
    font-weight: normal;
    margin-bottom: 0
}

header>h1+* {
    margin-top: 0
}

header>:last-child {
    margin-bottom: calc(0.5 * var(--one-line))
}

header>h2:last-child {
    line-height: var(--one-line);
    font-size: 1rem;
    font-weight: normal
}

header+* {
    margin-top: calc(0.5 * var(--one-line))
}

h1,
h2 {
    line-height: calc(var(--line-height) * 2rem)
}

h1 {
    font-size: 2.5rem
}

h2 {
    font-size: 1.75rem
}

h3,
h4,
h5,
h6 {
    line-height: var(--one-line);
    padding-top: calc(var(--line-height) * .75rem);
    margin-bottom: calc(var(--line-height) * .25rem)
}

:is(h3, h4, h5, h6)+* {
    margin-top: 0
}

nav:not(.exclude:not([data-style]), [data-style="none"]) {
    text-align: center;
    border-width: var(--line-width) 0;
    border-style: solid;
    line-height: var(--line-height);
    display: flex;
    flex-flow: row wrap;
    contain: layout
}

nav:not(.exclude:not([data-style]), [data-style="none"])>* {
    flex-grow: 1;
    margin: calc((var(--line-height) * .5rem) - var(--line-width)) var(--half-line);
    text-transform: uppercase
}

nav[data-style="blockout"],
nav:is([data-style="boxes"], [data-style="roundesque"]) a:is(:hover, :focus) {
    background-color: var(--color);
    color: var(--background-color)
}

nav[data-style="blockout"] a {
    text-decoration: none
}

nav[data-style="blockout"] a:is(:hover, :focus) {
    background-color: var(--background-color);
    color: var(--color)
}

nav[data-style]:is([data-style="boxes"], [data-style="roundesque"]) {
    border: 0
}

nav:is([data-style="boxes"], [data-style="roundesque"]) a {
    text-decoration: none;
    border: var(--line-width) solid
}

nav[data-style="roundesque"] a {
    border-radius: calc(0.25 * var(--one-line))
}

@media(prefers-reduced-motion:no-preference) {
    nav[data-style="classy"] span>a {
        text-decoration: none;
        display: inline-block
    }

    nav[data-style="classy"] span>a::after {
        content: '';
        width: 0;
        height: var(--line-width);
        display: block;
        background: var(--color);
        transition: 150ms
    }

    nav[data-style="classy"] span>a:is(:hover, :focus)::after {
        width: 100%
    }
}

body {
    margin: 0 auto;
    width: min(95%, var(--column-width))
}

@media(min-width:70.5ch) {
    [data-justify="on"] body {
        text-align: justify;
        text-justify: inter-character
    }
}

table:not(.exclude) {
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
    margin: calc(-0.5 * var(--line-width)) 0
}

table:not(.exclude) :is(td, th) {
    padding: 0 calc(var(--one-line) * .25);
    line-height: calc(var(--one-line) - .5*var(--line-width));
    border: var(--line-width) solid
}

table:not(.exclude) td {
    word-wrap: break-word
}

form {
    max-width: var(--form-width)
}

form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"])+label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
    display: block;
    margin: var(--half-line) 0
}

form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select),
button {
    box-sizing: border-box;
    padding: var(--half-line);
    background: transparent;
    border: var(--line-width) solid;
    color: inherit;
    font: inherit;
    width: 100%
}

button {
    width: initial
}

form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"])+label) {
    font-weight: bold
}