html {
    --background: rgb(250,250,250);
    --text: #000;
    --input-back: #FFF;
    --grey: #CCC;
    --validation: #F00;
    --hover: #444;
    --disabled: #888;
    --paper: #f2d7ac;
    --border: #AAA;
    --page-select: #122138;
    --page-select-hover: #9acae6;
    --table-alt: #DDD;
    --link: #00F;
    --link-hover: #005;
    --abbr: #EEE;
    --check: #f2d7ac;
    --checked: #2196F3;
    --always-white: #FFF;
}

bd.theme-dark {
    --background: rgb(5,5,5);
    --text: #FFF;
    --input-back: #000;
    --grey: #222;
    --validation: #F00;
    --hover: #BBB;
    --disabled: #888;
    --paper: #333;
    --border: #AAA;
    --page-select: #6BAED6;
    --page-select-hover: #898AC4;
    --table-alt: #333;
    --link: #6BAED6;
    --link-hover: #898AC4;
    --abbr: #111;
    --check: #f2d7ac;
    --checked: #2196F3;
}

html, body, input, select, textarea {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
}

html, body {
    background-color: var(--background);
    color: var(--text);
}

input, select, textarea {
    color: var(--text);
    background-color: var(--input-back);
}

h1, h2, h3, h4, h5, h6, table caption {
    font-family: "Tagesschrift", 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 30px;
}

h1 {
    font-size: 2em;
}

    h1 span.private-flag {
        font-size: 0.8em;
        color: var(--grey);
        text-shadow: -1px -1px 0 var(--text), 1px -1px 0 var(--text), -1px 1px 0 var(--text), 1px 1px 0 var(--text);
    }

h2 {
    font-size: 1.8em;
}

    h3, h2.item-type, h2.inner-title, .h3-size {
        font-size: 1.6em;
    }

h4, table caption {
    font-size: 1.4em;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1em;
}

.validator {
    color: var(--validation);
    display: inline-block;
}

    .validator::before {
        content: '* ';
    }

.text-center, .text-centre {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

input, select, textarea {
    width: 100%;
    margin: 0px;
    box-sizing: border-box;
}

textarea {
    max-width: 100%;
    min-width: 100%;
}

button, input[type="submit"] {
    width: 100%;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1em;
    border: 1px solid var(--text);
    color: var(--text);
    background-color: var(--input-back);
    cursor: pointer;
    padding-top: 2px;
    padding-bottom: 2px;
    transition-property: color, background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

    button.inline, input[type="submit"].inline {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    button:hover, input[type="submit"]:hover, button:focus, input[type="submit"]:focus {
        background-color: var(--hover);
        color: var(--input-back);
    }

    button.delete, input[type="submit"].delete {
        color: var(--validation);
        border-color: var(--validation);
    }

        button.delete:hover, input[type="submit"].delete:hover, button.delete:focus, input[type="submit"].delete:focus {
            color: var(--text);
            border-color: var(--text);
            background-color: var(--validation);
        }

    button[disabled], input[type="submit"][disabled], button[disabled]:hover, input[type="submit"][disabled]:hover, button[disabled]:focus, input[type="submit"][disabled]:focus {
        cursor: not-allowed;
        color: var(--disabled);
    }

.page-selector {
    display: block;
    list-style-type: none;
    padding: 0px;
}

    .page-selector .page-selector__link {
        display: inline-block;
        margin: 2px;
    }

.page-selector__link a {
    display: block;
    padding: 0px;
    padding-left: 7px;
    padding-right: 7px;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: border-color 0.5s ease-out;
    cursor: pointer;
}

    .page-selector__link a, .page-selector__link a:link, .page-selector__link a:visited, .page-selector__link a:hover, .page-selector__link a:active {
        text-decoration: none;
        color: var(--page-select);
    }

        .page-selector__link a:hover {
            border: 1px solid var(--page-select-hover);
            text-decoration: none;
        }

.page-selector__link--active a, .page-selector__link--active a:hover {
    border: 1px solid var(--page-select);
    border-radius: 20px;
}

table.grid thead, table.grid tbody, table.grid tr {
    display: contents;
}

table.grid th, table.grid td {
    grid-column: span 1;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 10px;
    word-break: break-word;
}

    table td, table th {
        text-align: left;
    }

    table thead, table thead th, table caption {
        background-color: var(--text);
        color: var(--input-back);
    }

    table td, table th {
        padding: 10px;
    }

    table:not(.grid) td, table:not(.grid) th {
        border: 1px solid var(--text);
    }

    table.grid td:first-child, table.grid th:first-child {
        border-top: 1px solid var(--text);
    }

    table.grid td:last-child, table.grid th:last-child {
        border-bottom: 1px solid var(--text);
    }

@media screen and (min-width:641px) {
    table td, table th {
        border: 1px solid var(--text);
    }
}

table th, table caption {
    font-weight: bold;
}

table:not(.grid) th.date, table:not(.grid) td.date {
    width: 135px;
}

table th.date, table td.date {
    text-align: right;
}

table tbody tr:nth-child(2n), table tbody tr:nth-child(2n) td, table tbody tr:nth-child(2n) th {
    background-color: var(--table-alt);
}

a, a:link, a:visited, a:hover, a:active {
    cursor: pointer;
    color: var(--link);
    text-decoration: underline;
}

    a:hover, a:focus {
        color: var(--link-hover);
    }

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

.bold, .strong, b, strong {
    font-weight: bold;
}

.em, .i, i, em, q, blockquote {
    font-style: italic;
}

div.aside a.name {
    font-weight: bold;
    display: inline-block;
}

    div.aside a.name::after {
        content: ': ';
    }

div.aside a.aside-edit {
    text-decoration: none;
}

ul.no-bullets, ol.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div.paper {
    background-color: var(--paper);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    word-break: break-word;
    position: relative;
    height: auto;
    overflow: hidden;
    padding: 35px;
    color: var(--text);
    margin-bottom: 30px;
}

div.aside {
    background-color: var(--grey);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    word-break: break-word;
    position: relative;
    display: block;
    height: auto;
    overflow: hidden;
    padding: 10px;
    color: var(--text);
    margin-bottom: 30px;
}

    div.aside h3 {
        margin-top: 0px;
        margin-bottom: 10px;
    }

nav {
    padding: 0px;
    margin: 0px;
    text-align: right;
}

    nav li {
        display: inline-block;
        padding: 0px;
        margin: 0px;
    }

    nav a, nav a:link, nav a:visited, nav a:hover, nav a:target, a.nav, a.nav:link, a.nav:visited, a.nav:hover, a.nav:target {
        display: block;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0px;
        margin-left: 10px;
        margin-bottom: 5px;
        background-color: var(--hover);
        color: var(--input-back);
        text-decoration: none;
        transition-property: color, background-color;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
        border: 1px solid var(--text);
        vertical-align: middle;
        line-height: 1em;
        border-radius: 1em;
        text-align: center;
    }

        nav a:hover, a.nav:hover {
            background-color: var(--input-back);
            color: var(--text);
        }

        a.nav.delete {
            color: var(--validation);
            border-color: var(--validation);
            background-color: var(--input-back);
        }

            a.nav.delete:hover, a.nav.delete:focus {
                color: var(--text);
                border-color: var(--text);
                background-color: var(--validation);
            }

div.clear {
    display: block;
    position: relative;
    float: none;
    height: 1px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    clear: both;
}

.aside li {
    margin-bottom: 10px;
}

hr {
    display: block;
    width: 100%;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    clear: both;
    float: none;
    position: relative;
}


blockquote, discord {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 1px;
    padding-bottom: 1px;
    margin: 15px;
    display: block;
}

    blockquote p {
        margin: 0px;
        padding: 0px;
    }

        blockquote p::before {
            content: '"';
        }

        blockquote p::after {
            content: '"';
        }

discord {
    font-family: "Tagesschrift", system-ui;
    margin-left: 0px;
    margin-right: 0px;
}

    discord blockquote {
        border-top: none;
        border-bottom: none;
    }

dl {
    clear: both;
    float: none;
    display: block;
}

    dl dt::after {
        content: ':';
    }

    dl dt {
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        display: block;
    }

    dl dd {
        padding: 0px;
        margin: 0px;
        padding-bottom: 20px;
        display: block;
    }

@media screen and (min-width:700px) {
    dl dt {
        float: left;
        display: inline-block;
        width: 210px;
        padding-bottom: 20px;
    }


    dl dd {
        float: left;
        display: inline-block;
        width: calc(100% - 210px);
    }
}

dl.title-entry dt, dl.title-entry dd {
    display: block;
    float: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

dl.title-entry dd {
    margin-bottom: 20px;
}

dl.title-entry dt::after {
    content: '';
}

.grid-map div, .grid-map a, .grid-map img {
    margin: 0px;
    padding: 0px;
}

.grid-map a, .grid-map img {
    display: block;
}

    .grid-map a[data-tile] {
        cursor: zoom-in;
    }

        .grid-map a[data-tile]:hover {
            border: 3px solid red;
        }

    .grid-map a.tile-back {
        display: inline-block;
        margin-bottom: 10px;
    }

        .grid-map a.tile-back::before {
            content: '< ';
        }

div.control-holder {
    margin-bottom: 10px;
}

span.item-type-description {
    font-style: italic;
}

div.table-holder {
    display: block;
    overflow-x: auto;
    max-width: calc(100vw - 30px);
}

    div.table-holder table {
        width: 100%;
        word-break: normal;
    }

p.gallery-title {
    margin-top: 5px;
    margin-bottom: 10px;
    min-height: 100px;
    vertical-align: text-top;
}

abbr[data-title] {
    position: relative;
    text-decoration: underline dotted;
}

    abbr[data-title]:hover::after,
    abbr[data-title]:focus::after {
        content: attr(data-title);
        position: absolute;
        left: 0px;
        bottom: -30px;
        width: auto;
        white-space: nowrap;
        background-color: var(--abbr);
        color: var(--text);
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
        font-size: 14px;
        padding: 3px 5px;
        z-index: 999;
    }

div.image-display {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 2000;
    background-color: rgba(0,0,0,0.9);
    color: var(--always-white);
    font-size: 1.8em;
    text-align: center;
    padding-top: 1vh;
}

    div.image-display div.prev {
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100vh;
        width: 10vw;
        z-index: 2001;
    }

    div.image-display div.next {
        position: fixed;
        top: 0px;
        right: 0px;
        height: 100vh;
        width: 10vw;
        z-index: 2001;
    }

    div.image-display img {
        max-width: 80vw;
        max-height: 80vh;
        width: auto;
        height: auto;
        z-index: 2002;
    }

    div.image-display p {
        width: 80vw;
        text-align: center;
        margin-left: 10vw;
        margin-right: 10vw;
        padding: 0px;
        z-index: 2003;
    }

.hidden {
    display: none;
}

black, silver, grey, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua {
    display: inline;
    font: inherit;
}

black {
    color: #000;
}

silver {
    color: #c0c0c0;
}

grey {
    color: #808080;
}

white {
    color: #FFF;
}

maroon {
    color: #800000;
}

red {
    color: #F00;
}

purple {
    color: #800080;
}

fuchsia {
    color: #ff00ff;
}

green {
    color: #008000;
}

lime {
    color: #0F0;
}

olive {
    color: #808000;
}

yellow {
    color: #ffff00;
}

navy {
    color: #000080;
}

blue {
    color: #00F;
}

teal {
    color: #008080;
}

aqua {
    color: #0FF;
}