:root{

    --dark: #262833;
    --light: #ffffff;
    --warm: #FFFF99;

    --cont: calc(20% * var(--contrast,1));

    --bg-color: var(--theme, var(--dark));

    --st-color: rgb(from var(--bg-color) calc(255 - r) calc(255 - g) calc(255 - b));
    --fg-color: color-mix(in srgb, var(--st-color), var(--bg-color) var(--cont));
    --it-color: color-mix(in srgb, var(--fg-color), var(--bg-color) var(--cont));

    --hl-color: #ff7597;
    --rf-color: #5da5ff;
    --rf-hover: #40d8ff;

    --dimmer: color-mix(in srgb, var(--fg-color), var(--bg-color) 70%);
    --dim: color-mix(in srgb, var(--fg-color), var(--bg-color) 80%);

    font-variant-ligatures: none!important;
    --font-family: var(--font, 'JetBrains Mono');

    --x-font-size: 18px;
    @media (min-width: 2000px) {
        --x-font-size: 22px;
    }
    @media (max-width: 2000px) and (min-width: 1500px) {
        --x-font-size: 18px;
    }
    @media (max-width: 1500px) and (min-width: 1200px) {
        --x-font-size: 16px;
    }
    @media (max-width: 1200px) and (min-width: 800px) {
        --x-font-size: 14px;
    }
    @media (max-width: 800px) and (min-width: 600px) {
        --x-font-size: 13px;
    }
    @media (max-width: 600px) and (min-width: 400px) {
        --x-font-size: 11px;
    }
    @media (max-width: 400px) {
        --x-font-size: 10px;
    }
    font-size: calc( var(--scale,1) * var(--x-font-size) );

}
*{
    color: var(--fg-color);
    font-family: var(--font-family), monospace;
    line-height: 1em;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
}
table.head, table.foot {
    width: inherit;
}
td.head-rtitle, td.foot-os {
    text-align: right;
}
td.head-vol {
    text-align: center;
}
.Nd, .Bf, .Op {
    display: inline;
}
.Pa, .Ad {
    font-style: italic;
}
.Ms {
    font-weight: bold;
}
.Bl-diag > dt {
    font-weight: bold;
}
code.Nm, .Fl, .Cm, .Ic, code.In, .Fd, .Fn, .Cd {
    font-weight: bold;
}
i, em {
    color: var(--it-color);
}
dt, b, strong {
    color: var(--st-color);
}
hr {
    margin: 5px 0;
    color: var(--fg-color);
}
form{
    padding:0;
    margin:0;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--hl-color);
    padding: 0;
    margin: 0;
}
section, .head, .foot {
    margin: 10px 5px;
    padding: 4px 6px;
}
p, dt, table {
    margin: 2px 10px;
    padding: 5px 0;
}
a {
    color: var(--rf-color);
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: var(--rf-hover);
    text-decoration: underline;
}
body{
    display: flex;
    flex-direction: column;
    align-content: space-between;
    align-items: center;
}
header {
    width: calc(100% - 1em);
    padding: 0.5lh 0;
    margin: 0;
    background-color: var(--bg-color);
    border-bottom: var(--fg-color) 1px solid;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
header > form {
    display: contents;
}
header > div {
    display: inherit;
}
header h3 {
    margin: auto 0 auto 0;
    font-size: 1.15rem;
}
header.settings :not(:first-child) h3 {
    font-size: 0.9rem;
    margin-right: 1ch;
    color: var(--st-color);
}
.rounded > * {
    background-color: inherit;
    border: 1px var(--fg-color);
    font-size: 1rem;
    margin: 0 !important;
    padding: 0.1em 1ch;
    border-style: solid none solid solid;
}
.rounded > :first-child {
    border-radius: 1ch 0 0 1ch;
    border-style: solid none solid solid;
    margin-left: auto !important;
}

.rounded > :last-child {
    border-radius: 0 1ch 1ch 0;
    border-style: solid;
    margin-right: auto !important;
}

header > * > * {
    min-width: fit-content;
}

.txt {
    font-size: 0.9em;
    width: 100%;
    max-width: 50ch;
}

.submit, button {
    font-weight: bold;
    cursor: pointer;
}

button:hover, .submit:hover {
    background: var(--dim);
}
buttton:focus, .submit:focus, .txt:focus {
    background: var(--dimmer);
}

header * {
    height: inherit;
}
main{
    width: calc( 100% - 1em );
    height: 100%;
    margin: 0 auto 0 auto;
    overflow: auto;
    padding: 0;
}
.hidden {
    display: none!important;
    height: 0!important;
}
.settings {
    flex-wrap: wrap;
}
.settings div.rounded {
    display: contents;
}
.butt-set {
    background-color: var(--it-color);
    color: var(--bg-color);
}