html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}
body {
    line-height: 1
}
ol, ul {
    list-style: none
}
blockquote, q {
    quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
:root {
    --root-font-size: 16px;
    --root-background-color: black;
    --root-color: white;
    --root-primary-background-color: green;
    --root-primary-color: white;
    --root-reset-background-color: #333;
    --root-reset-color: white;
    --root-primary-background-color-transparent: rgba(0, 128, 0, 0.2);
    --root-error-color: red;
    --font-family: monospace;
    --font-size-xl: 1.5em;
    --font-size-lg: 1.25em;
    --font-size-md: 1em;
    --font-size-sm: 0.875em;
    --font-size-xs: 0.75em;
    --font-weight-normal: 300;
    --font-weight-bold: 600;
    --border-color: #444;
    --focus-element-box-shadow: 0 -8px 0 -4px var(--button-background-color);
    --focus-element-active-box-shadow: 0 -8px 0 -4px var(--button-primary-background-color);
    --focus-element-error-box-shadow: 0 -8px 0 -4px var(--root-error-color);
    --selection-background-color: var(--root-primary-background-color);
    --selection-color: var(--root-primary-color);
    --h1-font-size: 4em;
    --h1-font-weight: var(--font-weight-bold);
    --h2-font-size: 3em;
    --h2-font-weight: var(--font-weight-bold);
    --h3-font-size: 2.5em;
    --h3-font-weight: var(--font-weight-bold);
    --h4-font-size: 2em;
    --h4-font-weight: var(--font-weight-bold);
    --h5-font-size: 1.75em;
    --h5-font-weight: var(--font-weight-bold);
    --h6-font-size: 1.5em;
    --h6-font-weight: var(--font-weight-bold);
    --p-padding: 0.5em 0;
    --strong-background-color: inherit;
    --strong-color: inherit;
    --strong-font-weight: var(--font-weight-bold);
    --strong-font-style: normal;
    --strong-padding: 0;
    --em-background-color: inherit;
    --em-color: inherit;
    --em-font-weight: var(--font-weight-normal);
    --em-font-style: italic;
    --em-padding: 0;
    --code-background-color: #444;
    --code-color: white;
    --code-font-weight: var(--font-weight-normal);
    --code-font-style: normal;
    --code-padding: 0 0.25em;
    --mark-background-color: var(--root-primary-background-color);
    --mark-color: var(--root-primary-color);
    --mark-font-weight: var(--font-weight-normal);
    --mark-font-style: normal;
    --mark-padding: 0 0.25em;
    --q-background-color: inherit;
    --q-color: inherit;
    --q-font-weight: var(--font-weight-normal);
    --q-font-style: normal;
    --q-padding: 0;
    --q-before: "“";
    --q-after: "„";
    --cite-background-color: inherit;
    --cite-color: inherit;
    --cite-font-weight: var(--font-weight-normal);
    --cite-font-style: normal;
    --cite-padding: 0 0.25em;
    --link-background-color: inherit;
    --link-color: var(--root-primary-background-color);
    --link-font-weight: var(--font-weight-normal);
    --link-font-style: normal;
    --link-padding: 0;
    --code-block-font-size: var(--font-size-md);
    --blockquote-background-color: var(--root-background-color);
    --blockquote-color: #ccc;
    --image-filter: none;
    --figure-border-radius: 0;
    --figure-caption-background-color: rgba(0, 0, 0, 0.7);
    --figure-caption-color: white;
    --header-background-color: var(--root-background-color);
    --header-color: var(--root-color);
    --hader-border: 0;
    --footer-background-color: var(--root-reset-background-color);
    --footer-color: var(--root-reset-color);
    --footer-border: 0.25em solid var(--root-primary-background-color);
    --aside-background-color: var(--root-background-color);
    --aside-color: var(--root-color);
    --aside-border: 0.5em solid var(--root-primary-background-color);
    --button-background-color: #ddd;
    --button-color: black;
    --button-border: none;
    --button-font-size: var(--font-size-md);
    --button-padding: 0.5em 1em;
    --button-margin: 0 0.25em 0.25em 0;
    --button-focus-shadow: var(--focus-element-active-box-shadow);
    --button-primary-background-color: var(--root-primary-background-color);
    --button-primary-color: var(--root-primary-color);
    --button-primary-focus-shadow: var(--focus-element-box-shadow);
    --button-reset-background-color: var(--root-reset-background-color);
    --button-reset-color: var(--root-reset-color);
    --button-reset-focus-shadow: var(--focus-element-active-box-shadow);
    --form-input-border: 0;
    --form-input-font-size: var(--font-size-md);
    --form-input-font-weight: var(--font-weight-normal);
    --form-input-focus-shadow: var(--focus-element-active-box-shadow);
    --form-input-invalid-focus-shadow: var(--focus-element-error-box-shadow);
    --form-input-invalid-error-color: var(--root-error-color);
    --form-textarea-height: 6em;
    --form-select-background-color: var(--root-primary-background-color);
    --form-select-color: var(--root-primary-color);
    --form-select-font-size: var(--font-size-md);
    --form-select-font-weight: var(--font-weight-bold);
    --form-select-focus-shadow: var(--focus-element-box-shadow);
    --form-checkbox-background-color: var(--root-color);
    --form-checkbox-unchecked-color: #aaa;
    --form-checkbox-checked-color: var(--root-primary-background-color);
    --form-checkbox-focus-shadow: var(--focus-element-active-box-shadow);
    --form-radio-background-color: var(--root-color);
    --form-radio-checked-color: var(--root-primary-background-color);
    --form-radio-focus-shadow: var(--focus-element-active-box-shadow);
    --form-input-border: 0;
    --form-range-slider-color: var(--root-color);
    --form-range-thumb-color: var(--root-primary-background-color);
    --form-range-focus-shadow: var(--focus-element-box-shadow);
    --list-li-background-color: var(--root-primary-background-color);
    --list-li-color: var(--root-primary-color);
    --table-header-background-color: var(--root-primary-background-color);
    --table-header-color: var(--root-primary-color);
    --table-header-font-size: var(--font-size-md);
    --table-header-font-weight: var(--font-weight-normal);
    --table-header-text-align: left;
    --table-cell-background-color-odd: #000;
    --table-cell-color-odd: #fff;
    --table-cell-background-color-even: #222;
    --table-cell-color-even: #fff;
    --table-cell-text-align: left;
    --dialog-background-color: white;
    --dialog-color: black
}
@keyframes blinky-background {
    0% {
        background-position: 4em 8em, 24em 20em, 48em 4em, 64em 16em, 80em 0em
    }
    20% {
        background-position: 4em 16em, 24em 4em, 48em 32em, 64em 48em, 80em 8em
    }
    40% {
        background-position: 4em 4em, 24em 12em, 48em 12em, 64em 8em, 80em 16em
    }
    60% {
        background-position: 4em 24em, 24em 8em, 48em 8em, 64em 28em, 80em 4em
    }
    80% {
        background-position: 4em 12em, 24em 16em, 48em 16em, 64em 12em, 80em 24em
    }
    100% {
        background-position: 4em 8em, 24em 2em, 48em 12em, 64em 4em, 80em 16em
    }
}
@keyframes cathodic-blinking {
    0% {
        filter: brightness(1)
    }
    100% {
        filter: brightness(2)
    }
}
@keyframes horizontal-signal {
    0% {
        background-position: 0 0
    }
    30% {
        background-position: 0 40%
    }
    40% {
        background-position: 0 60%
    }
    50% {
        background-position: 0 50%
    }
    80% {
        background-position: 0 calc(100% + .25em)
    }
    100% {
        background-position: 0 calc(100% + .25em)
    }
}
@keyframes aside-iamhere {
    0% {
        transform: translateY(calc(-100% + 1em))
    }
    40% {
        transform: translateY(calc(-100% + 2em))
    }
    60% {
        transform: translateY(calc(-100% + 0.5em))
    }
    80% {
        transform: translateY(calc(-100% + 1.5em))
    }
}
html, body {
    background-color: var(--root-background-color);
    color: var(--root-color);
    font-family: var(--font-family);
    font-size: var(--root-font-size);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    padding: 0
}
body {
    background-image: linear-gradient(var(--root-primary-background-color-transparent) 0, var(--root-primary-background-color-transparent) 4em, transparent 4em), linear-gradient(var(--root-primary-background-color-transparent) 0, var(--root-primary-background-color-transparent) 4em, transparent 4em), linear-gradient(var(--root-primary-background-color-transparent) 0, var(--root-primary-background-color-transparent) 4em, transparent 4em), linear-gradient(var(--root-primary-background-color-transparent) 0, var(--root-primary-background-color-transparent) 4em, transparent 4em), linear-gradient(var(--root-primary-background-color-transparent) 0, var(--root-primary-background-color-transparent) 4em, transparent 4em);
    background-size: 4em 32em;
    background-repeat: repeat-y;
    background-position: 4em 8em, 24em 20em, 48em 4em, 64em 16em, 80em 0em;
}
body>header {
    background-color: var(--header-background-color);
    color: var(--header-color);
    border-bottom: var(--header-border);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10
}
body>footer {
    background-color: var(--footer-background-color);
    color: var(--footer-color);
    border-top: var(--footer-border);
    text-align: center
}
body>aside {
    position: fixed;
    top: 0;
    left: .5em;
    border-bottom: var(--aside-border);
    background-color: var(--aside-background-color);
    color: var(--aside-color);
    box-shadow: .25em 0 .5em 0 rgba(150, 150, 150, .3), -0.25em 0 .5em 0 rgba(150, 150, 150, .3), 0 .25em .5em 0 rgba(150, 150, 150, .3);
    overflow: auto;
    width: 20em;
    min-height: 8em;
    padding: 1em .5em;
    z-index: 10;
    box-sizing: border-box;
    transform: translateY(calc(-100% + 1em));
    transition-property: transform;
    transition-duration: .5s, 0s;
    transition-delay: 0s, .5s;
    transition-timing-function: steps(2)
}
body>aside:hover {
    transform: translateY(0);
    transition-delay: 0s, 0s
}
body>main {
    padding-bottom: 2em;
    overflow: auto;
    margin: 0 auto;
    width: 90vw
}
header, footer {
    padding: 1em
}
ul, ol {
    padding-left: 1em;
    list-style-position: inside;
    list-style-type: none
}
ul li {
    position: relative;
    padding-left: 1em
}
ul li:before {
    content: "";
    display: inline-block;
    background-color: var(--list-li-background-color);
    width: .5em;
    height: .5em;
    position: absolute;
    top: .625em;
    left: 0
}
ol {
    counter-reset: li
}
ol li {
    counter-increment: li;
    margin: .5em 0
}
ol li::before {
    content: counter(li, upper-roman);
    background-color: var(--list-li-background-color);
    color: var(--list-li-color);
    margin-right: .25em;
    padding: .125em
}
li {
    margin-bottom: .5em
}
*::selection {
    background-color: var(--selection-background-color);
    color: var(--selection-color)
}
h1, h2, h3, h4, h5, h6 {
    margin: .5rem 0
}
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
    content: "";
    display: inline-block;
    width: .25em;
    height: .25em;
    font-size: 4rem;
    background-image: linear-gradient(90deg, var(--root-primary-background-color) 0, var(--root-primary-background-color) 0.25em, transparent 0.25em, transparent 0.5em);
    background-size: .5em .25em;
    background-repeat: repeat-x;
    margin-right: .25em;
}
h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight)
}
h1:before {
    width: .25em
}
h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight)
}
h2:before {
    width: .75em
}
h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight)
}
h3:before {
    width: 1.25em
}
h4 {
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight)
}
h4:before {
    width: 1.75em
}
h5 {
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight)
}
h5:before {
    width: 2.25em
}
h6 {
    font-size: var(--h6-font-size);
    font-weight: var(--h6-font-weight)
}
h6:before {
    width: 2.75em
}
p {
    padding: var(--p-padding)
}
strong {
    background-color: var(--strong-background-color);
    color: var(--strong-color);
    font-weight: var(--strong-font-weight);
    font-style: var(--strong-font-style);
    padding: var(--strong-padding)
}
em {
    background-color: var(--em-background-color);
    color: var(--em-color);
    font-weight: var(--em-font-weight);
    font-style: var(--em-font-style);
    padding: var(--em-padding)
}
code {
    font-family: var(--font-family);
    background-color: var(--code-background-color);
    color: var(--code-color);
    font-weight: var(--code-font-weight);
    font-style: var(--code-font-style);
    padding: var(--code-padding)
}
mark {
    background-color: var(--mark-background-color);
    color: var(--mark-color);
    font-weight: var(--mark-font-weight);
    font-style: var(--mark-font-style);
    padding: var(--mark-padding)
}
q {
    background-color: var(--q-background-color);
    color: var(--q-color);
    font-weight: var(--q-font-weight);
    font-style: var(--q-font-style);
    padding: var(--q-padding)
}
q:before {
    content: "“"
}
q:after {
    content: "„"
}
cite {
    background-color: var(--cite-background-color);
    color: var(--cite-color);
    font-weight: var(--cite-font-weight);
    font-style: var(--cite-font-style);
    padding: var(--cite-padding)
}
cite:before, cite:after {
    content: "";
    font-size: 1rem;
    background-color: var(--root-primary-background-color);
    width: .5em;
    height: .5em;
    margin: 0 .25em;
    display: inline-block;
}
a {
    background-color: var(--link-background-color);
    color: var(--link-color);
    font-weight: var(--link-font-weight);
    font-style: var(--link-font-style);
    padding: var(--link-padding);
    display: inline-block;
    text-decoration: none;
    position: relative
}
a:focus {
    outline: none;
    filter: brightness(2)
}
a:before {
    content: "";
    background-color: var(--root-primary-background-color);
    display: inline-block;
    width: .25em;
    height: .25em;
}
a:before {
    position: absolute;
    bottom: -0.125em
}
a:focus:before, a:hover:before {
    width: 100%;
    height: 1px;
    transition-property: width, height, bottom;
    transition-duration: .5s;
    transition-timing-function: steps(2);
    bottom: 0
}
a[href*="://"]:after {
    content: "";
    background-color: rgba(0, 0, 0, 0);
    display: inline-block;
    width: 0;
    height: 0;
    border-left: .375em solid rgba(0, 0, 0, 0);
    border-top: .375em solid var(--root-primary-background-color);
    border-bottom: .25em solid rgba(0, 0, 0, 0);
    vertical-align: top;
}
pre {
    background-color: var(--code-background-color);
    color: var(--code-color);
    padding: 1em;
    margin: 1em;
    position: relative;
    font-size: var(--code-block-font-size);
    white-space: pre-wrap
}
pre:before {
    content: "";
    position: absolute;
    left: .25em;
    top: 0;
    bottom: 0;
    border-left: .25em solid var(--root-primary-background-color);
}
pre code {
    padding: 0;
    margin: 0
}
blockquote {
    margin: .5em 1em;
    padding: .5em 1em;
    background-color: var(--blockquote-background-color);
    color: var(--blockquote-color);
    position: relative
}
blockquote:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: .25em solid var(--root-primary-background-color);
}
hr {
    background-image: linear-gradient(90deg, var(--root-primary-background-color) 0, var(--root-primary-background-color) 100%), linear-gradient(90deg, var(--root-primary-background-color) 0, var(--root-primary-background-color) 0.25em, transparent 0.25em, transparent 0.5em);
    background-size: calc(100% - 2.25em) .25em, .5em .25em;
    background-repeat: no-repeat, repeat;
    background-position: 1em 0, 0 0;
    border: 0;
    height: .25em;
    margin: 1em 0;
}
img {
    max-width: 100%;
    filter: var(--image-filter)
}
figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--figure-border-radius)
}
figure:after {
    content: "";
    background: linear-gradient(transparent 0, rgba(0, 0, 0, 0.25) 1px) repeat top left/2px 2px, linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) 1px) repeat top left/2px 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
figcaption {
    position: absolute;
    bottom: 0;
    background-color: var(--figure-caption-background-color);
    color: var(--figure-caption-color);
    display: block;
    padding: 1em .5em;
    z-index: 1;
    text-align: justify;
    transform: translateY(100%);
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: steps(2)
}
figure:hover figcaption {
    transform: translateY(0)
}
dialog {
    display: block;
    position: fixed;
    top: .25em;
    left: 50%;
    padding: .5em;
    margin: 0;
    border: 0;
    box-shadow: 0 .125em .5em 0em rgba(48, 48, 48, .5), -0.125em 0 .5em 0em rgba(48, 48, 48, .5), .125em 0 .5em 0em rgba(48, 48, 48, .5);
    z-index: 100;
    transform: translate3d(-50%, calc(-100% - 0.5em), 0);
    background-color: var(--dialog-background-color);
    color: var(--dialog-color);
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: steps(2)
}
dialog[open] {
    transform: translate3d(-50%, 0, 0)
}
dialog:before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    top: -0.25em;
    height: .5em;
    background-color: var(--root-primary-background-color);
}
dialog:after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: -0.25em;
    height: .25em;
    background-color: var(--root-primary-background-color);
    box-shadow: inset 0 .125em .25em -0.125em rgba(0, 0, 0, .5)
}
button {
    background-color: var(--button-background-color);
    border: var(--button-border);
    color: var(--button-color);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--button-font-size);
    padding: var(--button-padding);
    margin: var(--button-margin);
    transition-property: filter;
    transition-duration: .5s;
    transition-timing-function: steps(2);
    background-size: 100% .25em;
    background-repeat: repeat-x;
    background-image: linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 0.125em, transparent 0.25em)
}
button:last-child {
    margin-right: 0
}
button:hover, button:active, button:focus {
    filter: brightness(1.5)
}
button:disabled {
    cursor: not-allowed;
    filter: brightness(0.5)
}
button:focus {
    box-shadow: var(--button-focus-shadow);
    outline: none
}
button[type=submit] {
    background-color: var(--button-primary-background-color);
    color: var(--button-primary-color)
}
button[type=submit]:focus {
    box-shadow: var(--button-primary-focus-shadow)
}
button[type=reset] {
    background-color: var(--button-reset-background-color);
    color: var(--button-reset-color)
}
button[type=reset]:focus {
    box-shadow: var(--button-reset-focus-shadow)
}
table {
    border-collapse: separate;
    border-spacing: .25em 0
}
th, td {
    padding: .5em 1em
}
th {
    background-color: var(--table-header-background-color);
    color: var(--table-header-color);
    font-size: var(--table-header-font-size);
    font-weight: var(--table-header-font-weight);
    text-align: var(--table-header-text-align)
}
td {
    text-align: var(--table-cell-text-align)
}
tr:nth-child(odd) {
    background-color: var(--table-cell-background-color-odd)
}
tr:nth-child(odd) td {
    color: var(--table-cell-color-odd)
}
tr:nth-child(even) {
    background-color: var(--table-cell-background-color-even)
}
tr:nth-child(even) td {
    color: var(--table-cell-color-even)
}
form fieldset {
    border: .125em solid var(--root-primary-background-color);
    padding: .5em 1em
}
form legend {
    padding: 0 .5em;
    font-weight: var(--font-weight-bold)
}
form label {
    display: block;
    font-weight: var(--font-weight-normal);
    margin-bottom: .5em;
    line-height: normal
}
form input, form textarea {
    border: var(--form-input-border);
    padding: .5em;
    font-family: var(--font-family);
    font-weight: var(--form-input-font-weight);
    font-size: var(--form-input-font-size)
}
form input:focus, form textarea:focus {
    outline: none;
    box-shadow: var(--form-input-focus-shadow)
}
form input:invalid, form textarea:invalid {
    background-image: linear-gradient(var(--form-input-invalid-error-color) 0, var(--form-input-invalid-error-color) 100%), linear-gradient(var(--form-input-invalid-error-color) 0, var(--form-input-invalid-error-color) 100%);
    background-repeat: no-repeat;
    background-size: .25em calc(100% - .75em), .25em .25em;
    background-position: calc(100% - .125em) .125em, calc(100% - .125em) calc(100% - .125em)
}
form input:invalid:focus, form textarea:invalid:focus {
    box-shadow: var(--form-input-invalid-focus-shadow)
}
form textarea {
    min-height: var(--form-textarea-height);
    width: 50%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available
}
form select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--form-select-background-color);
    color: var(--form-select-color);
    border-radius: 0;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--form-select-font-size);
    font-weight: var(--form-select-font-weight);
    padding: .5em;
    padding-right: 1.75em;
    background-image: linear-gradient(var(--root-primary-color) 0.375em, transparent 0.375em), linear-gradient(var(--root-primary-color) 0.375em, transparent 0.375em), linear-gradient(var(--root-primary-color) 0.375em, transparent 0.375em);
    background-position: calc(100% - 1.25em) calc(50% - .25em), calc(100% - .5em) calc(50% - .25em), calc(100% - .875em) calc(50% + .375em);
    background-repeat: no-repeat;
    background-size: .375em .375em
}
form select:focus {
    outline: none;
    box-shadow: var(--form-select-focus-shadow)
}
form input[type=checkbox] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--form-checkbox-background-color);
    padding: 0;
    border: 0;
    width: 3em;
    height: 1.5em;
    position: relative;
    vertical-align: middle
}
form input[type=checkbox]:focus {
    box-shadow: var(--form-checkbox-focus-shadow)
}
form input[type=checkbox]:checked {
    filter: none
}
form input[type=checkbox]:after {
    content: "";
    width: 1.25em;
    height: 1.25em;
    left: .25em;
    top: .125em;
    position: absolute;
    background-color: var(--form-checkbox-unchecked-color);
    transition-property: background-color, left;
    transition-duration: .25s;
    transition-timing-function: steps(2)
}
form input[type=checkbox]:checked:after {
    background-color: var(--form-checkbox-checked-color);
    left: 1.5em
}
form input[type=radio] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    background-color: var(--form-radio-background-color);
    border: 0;
    width: 1.25em;
    height: 1.25em;
    position: relative;
    vertical-align: middle
}
form input[type=radio]:focus {
    box-shadow: var(--form-radio-focus-shadow)
}
form input[type=radio]:after {
    content: "";
    width: .75em;
    height: .75em;
    left: .25em;
    top: .25em;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    transition-property: background-color;
    transition-duration: .25s;
    transition-timing-function: steps(2)
}
form input[type=radio]:checked:after {
    background-color: var(--form-radio-checked-color)
}
form input[type=range] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: var(--form-range-border);
    background-color: rgba(0, 0, 0, 0)
}
form input[type=range]:hover:active::-webkit-slider-thumb {
    cursor: grabbing
}
form input[type=range]:hover:active::-moz-range-thumb {
    cursor: grabbing
}
form input[type=range]::-webkit-slider-runnable-track {
    border-bottom: .125em solid var(--form-range-slider-color);
    position: relative;
    top: -0.5em
}
form input[type=range]::-moz-range-track {
    border-bottom: .125em solid var(--form-range-slider-color);
    height: 0
}
form input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
    width: 1em;
    height: 1em;
    background-color: var(--form-range-thumb-color);
    border: 0;
    border-radius: 0;
    position: relative;
    top: .5625em
}
form input[type=range]::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    cursor: grab;
    width: 1em;
    height: 1em;
    background-color: var(--form-range-thumb-color);
    border: 0;
    border-radius: 0;
    position: relative;
    top: .5625em
}
form input[type=range]:focus {
    box-shadow: none
}
form input[type=range]:focus::-moz-range-thumb {
    box-shadow: var(--form-range-focus-shadow)
}
form input[type=range]:focus::-webkit-slider-thumb {
    box-shadow: var(--form-range-focus-shadow)
}
@media screen and (min-width: 480px) {
    main {
        max-width: 90vw
    }
}
@media screen and (min-width: 576px) {
    main {
        max-width: 540px
    }
}
@media screen and (min-width: 768px) {
    main {
        max-width: 720px
    }
}
@media screen and (min-width: 992px) {
    main {
        max-width: 960px
    }
}
@media screen and (min-width: 1600px) {
    main {
        max-width: 1280px
    }
}
@media screen and (max-width: 576px) {
    :root {
        --h1-font-size: 2.25em;
        --h2-font-size: 2em;
        --h3-font-size: 1.75em;
        --h4-font-size: 1.5em;
        --h5-font-size: 1.25em;
        --h6-font-size: 1.125em
    }
}
@media screen and (max-width: 768px) {
    button {
        display: block;
        width: 100%;
        margin: 0 0 .5em 0
    }
    body>aside, body>header {
        position: static
    }
    body>aside {
        width: auto;
        border: 0;
        height: auto;
        padding: .5em;
        border-top: .125em solid var(--root-primary-background-color);
        border-bottom: .125em solid var(--root-primary-background-color);
        transform: none;
        min-height: 0;
        box-shadow: none;
        transition-property: none
    }
    body>aside:hover {
        height: auto;
        transform: none
    }
    figcaption {
        position: relative;
        padding: 0 .5em;
        transform: translateY(0);
        font-size: .875em
    }
}
@media screen and (max-height: 479px) {
    body>header {
        position: static
    }
}
:root {
    --theme-8bit-blue: deepskyblue;
    --theme-8bit-grayscale: white;
    --theme-8bit-green: green;
    --theme-8bit-pink: deeppink;
    --theme-8bit-red: #c00;
    --theme-8bit-yellow: gold
}
html.theme-8bit-blue {
    --root-primary-background-color: deepskyblue;
    --root-primary-background-color-transparent: rgba(0, 191, 255, 0.1);
    --root-primary-color: #000
}
html.theme-8bit-grayscale {
    --root-background-color: white;
    --root-color: black;
    --root-error-color: #777;
    --root-primary-background-color: black;
    --root-primary-color: white;
    --root-primary-background-color-transparent: rgba(0, 0, 0, 0.2);
    --button-background-color: #666;
    --button-color: #fff;
    --form-input-border: 1px solid #aaa;
    --form-checkbox-checked-color: white;
    --form-radio-checked-color: white;
    --blockquote-color: #444;
    --table-cell-background-color-odd: #fff;
    --table-cell-color-odd: #000;
    --table-cell-background-color-even: #ddd;
    --table-cell-color-even: #000;
    --image-filter: grayscale(1);
    --footer-background-color: #ddd;
    --footer-color: black
}
html.theme-8bit-green {
    --link-color: lime
}
html.theme-8bit-pink {
    --root-primary-background-color: deeppink;
    --root-primary-background-color-transparent: rgba(255, 20, 147, 0.1);
    --root-primary-color: #fff;
    --link-color: rgb(255, 71, 170.4382978723)
}
html.theme-8bit-red {
    --root-primary-background-color: #c00;
    --root-primary-background-color-transparent: rgba(204, 0, 0, 0.2);
    --root-primary-color: white;
    --link-color: #f00
}
html.theme-8bit-yellow {
    --root-primary-background-color: gold;
    --root-primary-background-color-transparent: rgba(255, 215, 0, 0.1);
    --root-primary-color: #000
}