*, ::before, ::after {
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

:is(ol, ul):where(:not(.list)) {
    list-style-type: none;
}

p,
pre,
:is(ol, ul):where(.list) {
    margin-top: var(--p-vertical-margin);
    margin-bottom: var(--p-vertical-margin);
    line-height: var(--p-line-height);
}

:is(ol, ul):where(.list) {
    margin-left: 1em;
}

:is(ol, ul):where(.list) > li {
    margin-top: calc(var(--p-vertical-margin) / 2);
    margin-bottom: calc(var(--p-vertical-margin) / 2);
}

:is(ol, ul):where(.list) > li::marker {
    font-weight: bold;
}


html {
    --nav-background-color: #FFCC99;
    --nav-background-highlight-color: #FFDD99;
    --main_padding-left: 0.8rem;
    --main_padding-right: 0.8rem;
    --p-vertical-margin: 1em;
    --p-line-height: 1.4;
    height: 100%;
    line-height: 1.2;
    overflow-wrap: break-word;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100%;
    font-family: "Liberation Serif", serif;
}

video, audio {
    max-width: 100%;
    max-height: 100%;
}

.scroll {
    margin-top: 1em;
    margin-bottom: 1em;
    overflow-x: auto;
    overflow-y: hidden;
}

.scroll > :first-child {
    margin-top: 0;
}

.scroll > :last-child {
    margin-bottom: 0;
}

.nowrap {
    white-space: nowrap;
}

.long {
    white-space: initial;
}

.fit-content {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

article, section {
    position: relative;
}

section {
    max-width: 100%;
    margin: 2.5em auto;
    padding: 0.8em 0 0;
}

header h1 {
    text-align: center;
    margin: 0 auto 1em;
}

header .description {
    margin: -1.3em 0 0;
}


main {
    position: relative;
    padding-left: var(--main_padding-left);
    padding-right: var(--main_padding-right);
    margin-top: 3em;
    margin-bottom: 2.5em;
}

#page-header {
    text-align: center;
    margin: 0 auto 1em;
    font-family: "Kaushan Script", serif;
}

#page-header h1 {
    margin: 0;
    padding: 0;
    font-weight: bolder;
    font-size: 3em;
    line-height: 1.2;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
}

@media (max-width: 16em) {
    #page-header h1 {
        font-size: 16vw;
        line-height: 1.2;
    }
}

#page-header h1 a {
    text-decoration: none;
}

#page-header p {
    padding: 0;
    margin: 0;
    line-height: 1.15;
}

#page-header p + p {
    margin-top: 0.25em;
}

#page-header .description {
    font-size: large;
    margin-top: 0.5em;
}


@media (max-width: 24em) {
    html {
        --main_padding-left: 0.5rem;
        --main_padding-right: 0.5rem;
    }

    main {
        margin-top: 1.5em;
    }

    #page-header h1 {
        font-size: 16vw;
    }

    #page-header .description {
        margin-top: 4vw;
    }

    .navtable th a, .navtable td a {
        padding-left: 0.3em;
        padding-right: 0.3em;
    }

    table:has(.direct-link) {
        padding-left: 0;
        padding-right: 0.2em;
    }

}


h1 {
    margin-top: 1em;
    position: relative;
}

h1 a:where(:not(:hover, :focus)) {
    text-decoration: none;
}

a.self-link {
    color: inherit;
}

a.self-link:where(:not(:hover, :focus)) {
    text-decoration: none;
}

:target > :is(h1, .hoisted, th, td):has(a.self-link) {
    opacity: revert;
}

:target > :is(h1, .hoisted, th, td) a.self-link {
    color: green;
    opacity: revert;
}


.modifier-key, .emacs-command {
    border: solid thin #CCCCCC;
    background-color: #EEEEEE;
    color: #444444;
    padding: 0.2em 0.3em;
}


.good-news {
    color: green;
}

.caution {
    color: orange;
}

.watch-out {
    color: red;
}

:is(.good-news, .watch-out) a {
    color: inherit;
}

a.tweet {
    color: cadetblue;
}

.state-warning {
    text-align: center;
    color: red;
    font-weight: bold;
}

.emoji {
    white-space: nowrap;
}

.heart {
    color: transparent;
    background-image: url("../non-free/images/heart.svg");
}



/* Nav */

:root {
    --breadcrumbs-link-vertical-padding: 0.2em;
    --breadcrumbs-link-horizontal-padding: 0.25em;
}

.breadcrumbs {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs > .crumb {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
}

.breadcrumbs > .crumb > * {
    padding: var(--breadcrumbs-link-vertical-padding) var(--breadcrumbs-link-horizontal-padding);
}

.breadcrumbs > .crumb > .s {
    font-weight: bold;
}


:root {
    --top-nav-margin: 0.5em;
}

#top-nav {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    margin-bottom: var(--top-nav-margin);
}

#top-nav > .main {
    flex: 1 0;
    display: flex;
    flex-flow: row wrap;
}

#top-nav .breadcrumbs {
    padding-left: var(--breadcrumbs-link-horizontal-padding);
}

#top-nav .breadcrumbs > a:first-child {
    padding-left: calc(var(--breadcrumbs-link-horizontal-padding) * 2);
    margin-left: calc(var(--breadcrumbs-link-horizontal-padding) * -1);
}

#top-nav .breadcrumbs > .crumb:last-child > a {
    padding-right: calc(var(--breadcrumbs-link-horizontal-padding) * 2);
}

#top-nav > .main > :is(nav, .breadcrumbs) {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    background-color: var(--nav-background-color);
    margin: var(--top-nav-margin);
    border: medium solid black;
}

#top-nav > .main > :is(nav, .breadcrumbs) a {
    position: relative;
    text-decoration: none;
}

#top-nav > .main > :is(nav, .breadcrumbs) > a {
    padding: var(--breadcrumbs-link-vertical-padding) var(--breadcrumbs-link-horizontal-padding);
}

#top-nav > .main > :is(nav, .breadcrumbs) > a:first-child {
    padding-left: calc(var(--breadcrumbs-link-horizontal-padding) * 2);
}

#top-nav > .main > :is(nav, .breadcrumbs) > a:last-child {
    padding-right: calc(var(--breadcrumbs-link-horizontal-padding) * 2);
}


#top-nav > .main > :is(nav, .breadcrumbs) a[href]:is(:hover, :focus) {
    background-color: var(--nav-background-highlight-color);
    outline-style: none;
}

#top-nav > .main > :is(nav, .breadcrumbs) a.here:is(:hover, :focus) {
    background-color: revert;
}

#top-nav > .main > :is(nav, .breadcrumbs) a .under,
.tabs a .under {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    font-size: smaller;
    margin-top: 0.2em;
    height: var(--top-nav-margin);
    white-space: pre;
    margin-top: 0.2em;
    text-align: center;
    color: black;
}


#top-nav > .main > #meta-nav ul > li {
    border-top: none;
    border-bottom: none;
}

#top-nav > .main > #meta-nav a {
    display: flex;
    flex-flow: row;
    align-items: stretch;
}

#top-nav > .main > #meta-nav a::before {
    content: "";
    flex: none;
    position: relative;
    left: calc(var(--breadcrumbs-link-horizontal-padding) * -1);
    width: 1em;
}

#top-nav > .main > #meta-nav .shortlink::before {
    content: revert;
}

#top-nav > .main > #meta-nav .github::before {
    background-image: url("../non-free/images/logos/github.svg");
}

#top-nav > .main > #meta-nav .linkedin::before {
    background-image: url("https://workshop.hexstream.xyz/svg/remakes/linkedin.svg");
}

#top-nav > .main > #meta-nav .canonical::before {
    background-image: url("https://abc.hexstream.xyz/images/globe.svg");
}

@media (max-width: 34em) {
    #top-nav > .main > #meta-nav a > span {
        display: none;
    }

    #top-nav > .main > #meta-nav .github::after {
        content: "GitHub";
    }

    #top-nav > .main > #meta-nav .linkedin::after {
        content: "LinkedIn";
    }

    #top-nav > .main > #meta-nav .canonical::after {
        content: "Web";
    }
}

@media (max-width: 20em) {

    #top-nav > .main > #meta-nav a::before {
        position: revert;
    }

    #top-nav > .main > #meta-nav :is(.github, .linkedin)::after,
    #meta-nav .canonical::after {
        content: "​"; /* Zero width space */
    }

}



#top-nav + main {
    margin-top: 0;
}

#last-updated, .last-updated {
    flex: none;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    white-space: nowrap;
    line-height: 1.2;
    margin: var(--top-nav-margin) var(--top-nav-margin) 0 0;
    text-decoration: none;
    overflow: revert;
}

#last-updated > span,
.last-updated > span {
    display: none;
}

#last-updated > time,
.last-updated > time {
    display: block;
    padding: 0.2em 0.5em;
    border: medium solid black;
    background-color: var(--nav-background-color);
}

#last-updated::after,
.last-updated::after {
    content: "Page last updated on";
    font-size: smaller;
    text-align: end;
    line-height: inherit;
    white-space: nowrap;
    margin-left: -0.2em;
}

.last-updated::after {
    content: "Section last updated on";
}

@media (max-width: 16em) {
    #top-nav {
        flex-flow: column;
    }
    #last-updated {
        align-items: flex-start;
        margin-left: var(--top-nav-margin);
        margin-right: 0;
    }
    #last-updated::after {
        margin-left: 0;
    }
}


.start-browsing + .start-browsing, nav.merge + nav.merge {
    margin-left: -0.5em;
    border-left: none;
}


:root {
    --footer-border: dashed medium #DDDDDD;
}

#footer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    margin-top: auto;
    border-top: var(--footer-border);
}


#footer a {
    text-decoration: none;
}

#footer .main {
    flex: 1 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

#footer .main > a {
    white-space: nowrap;
    color: green;
    margin: 0.25em 0.5em;
}

#footer .main > a[href]:is(:hover, :focus) {
    text-decoration: revert;
}

#footer .back-to-top {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0.5rem;
    line-height: normal;
}

#footer .back-to-top > a {
    font-size: x-large;
    width: 1.2em;
    background-color: var(--nav-background-color);
    border: medium solid black;
    opacity: 0.25;
}

#footer .back-to-top > a[href]:is(:hover, :focus) {
    background-color: var(--nav-background-highlight-color);
    outline-style: none;
    opacity: revert;
}

@media (max-width: 34em) {
    #footer {
        position: relative;
    }

    #footer .back-to-top.left {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        border-bottom: dashed medium transparent;
    }

    #footer .back-to-top.right {
        display: none;
    }
}

#footers {
    display: flex;
    flex-flow: column;
    position: relative;
    margin-top: auto;
}

#footers #footer {
    position: revert;
    margin-top: 0;
}


.anchor {
    text-decoration: none;
    font-weight: bold;
    font-size: large;
}

.anchor:where(:not(:hover)) {
    opacity: 0.20;
}



/* Fonts */

@font-face {
    font-family: "Kaushan Script";
    src: url("../fonts/kaushan-script/KaushanScript-Regular.woff2") format("woff2");
    font-display: block;
}


@font-face {
    font-family: "Liberation Serif";
    src: url("../fonts/liberation/LiberationSerif-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Liberation Serif";
    font-weight: bold;
    src: url("../fonts/liberation/LiberationSerif-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Liberation Serif";
    font-style: italic;
    src: url("../fonts/liberation/LiberationSerif-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Liberation Serif";
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/liberation/LiberationSerif-BoldItalic.woff2") format("woff2");
    font-display: swap;
}


@font-face {
    font-family: "Last Resort";
    src: url("../fonts/last-resort/LastResort-Regular.woff2") format("woff2");
    font-display: block;
}