:root {
    --heading-height: 60px;
    
    --large-font-size: calc(var(--heading-height) / 2);
    --medium-font-size: calc(var(--large-font-size) * 2 / 3);
    --small-font-size: calc(var(--large-font-size) / 2);
    --xsmall-font-size: 12px;

    --large-icon-size: 100px;
    --index-category-icon-size: 20px;

    --full-panel-width: 200px;
    --panel-width: var(--full-panel-width); /* this one can shrink */
    --user-menu-width: 300px;
    --panel-hr-width: 4px;

    --xsmall-gap: 2px;
    --small-gap: 5px;
    --medium-gap: 10px;
    --large-gap: 20px;

    --xthin-border: 0.5px;
    --thin-border: 1px;
    --thick-border: 3px;

    --xsmall-border-radius: 3px;
    --small-border-radius: 5px;
    --large-border-radius: 10px;

    --input-bit-width: var(--large-font-size);
    --keyboard-key-height: 50px;
    --keyboard-key-count: 14.5;
}


body {
    margin: 0;
}

    body.main {
        background-attachment: fixed;
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: 25%;
    }

h1 {
    margin: 0;
    padding: 0 var(--medium-gap) 0 var(--medium-gap);
    height: var(--heading-height);
    line-height: var(--heading-height);
    font-size: var(--large-font-size);
}

    h1#title {
        padding: 0 var(--medium-gap) 0 var(--medium-gap);
        width: 100%;
        box-sizing: border-box;
    }

/*    h1#title a {
        text-decoration: none;
        font-size: var(--medium-font-size);
    }*/

        h1#title span {
            float: right;
        }


span.https {
    font-size: xx-small;
    text-align: right;
    opacity: 0.2;
    padding: var(--small-gap);
}

h2, h3 {
    margin: 0;
    padding: var(--medium-gap);
}

table[border='1'] {
    border-style: solid;
    border-collapse: collapse;
}
    table[border='1'] th, 
    table[border='1'] td {
        padding: 0 var(--small-gap) 0 var(--small-gap);
    }

nav.left {
    /* Home page category list */
    margin: 0;
    padding: 0;
    width: var(--panel-width);
    min-height: calc(100% - var(--heading-height));
    display: none;
    position: fixed;
    overflow: auto;
}

nav.right {
    /* Home page main listings */
    position: fixed;
    border-color: rgba(var(--heading-back-color), 0.25);
    border-left-style: solid;
    border-left-width: var(--medium-gap);
    margin: 0;
    padding: 0;
    left: var(--panel-width);
    width: calc(100% - var(--panel-width));
    height: calc(100% - 1.75 * var(--heading-height));
    display: none;
    overflow: auto;
    box-sizing: border-box;
}

.left-panel, .right-panel, .left-inline-panel, .right-inline-panel {
    margin: 0;
    padding: 0;
    width: var(--panel-width);
    top: var(--heading-height);
    bottom: 0;
    position: fixed;
    text-align: center;
}
    .left-panel {
        left: 0;
    }

    .right-panel {
        right: 0;
    }

.main-panel {
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    top: var(--heading-height);
    bottom: 0;
    position: fixed;
}

.left-panel ~ .main-panel {
    left: var(--panel-width);
}

.right-panel ~ .main-panel {
    right: var(--panel-width);
}

:is(.left-panel, .right-panel) hr {
    display: none; /* Will only be visible in smaller version, to replace the <h2>s */
    border-style: solid;
    border-color: rgba(0, 24, 128, 0.5);
    border-width: var(--panel-hr-width);
}

a {
    text-decoration: none;
}

nav p a span.icon {
    display: inline-block;
    width: calc(1.5 * var(--index-category-icon-size));
    text-align: center;
    font-size: var(--index-category-icon-size);
}

div#user-menu {
    /* Do nothing on mobile */
    border-color: rgb(var(--heading-back-color));
    border-style: solid;
    border-width: var(--thin-border);
    display: none;
}

@media (min-width: 322px) {
    div#user-menu {
        position: fixed;
        z-index: 1;
        width: var(--user-menu-width);
        top: var(--heading-height);
        right: 0;
        padding: var(--medium-gap);
    }
}

div.main p, nav p {
    padding: 0 var(--large-gap) 0 var(--large-gap);
}

form {
    margin: 0 var(--large-gap) 0 var(--large-gap);
}

div.main > table {
    margin: 0 var(--large-gap) 0 var(--large-gap);
}

div.main > div {
    margin: 0 var(--large-gap) 0 var(--large-gap);
    width: calc(100% - 2 * var(--large-gap));
}

body > p {
    margin-left: var(--large-gap);
    margin-right: var(--large-gap);
}

input, select, textarea, .like-input {
    border-width: var(--thin-border);
    border-style: solid;
    border-bottom-width: var(--thick-border);
    border-radius: var(--small-border-radius);
    padding: var(--xsmall-gap);
    box-sizing: border-box;
}

:is(input, select, textarea).whole-width { width: 100%; }

:is(input, select, textarea).half-width { width: 50%; }

:is(input, select, textarea).whole-or-half-width { width: 50%; }

:is(input, select, textarea).third-width { width: calc(100% / 3); }

:is(input, select, textarea).quarter-width { width: 25%; }

    input.like-button, select.like-button, textarea.like-button {
        border-radius: var(--large-border-radius);
        padding: var(--small-gap);
        padding-bottom: var(--thick-border);
        font-size: var(--large-font-size);
    }

button, input[type=button], input[type=submit], input[type=reset], .button, a.primary {
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-width: var(--thin-border);
    border-style: solid;
    border-radius: var(--medium-gap);
    padding: var(--small-gap);
    font-size: var(--large-font-size);
    line-height: initial;
}

    button.small, input[type=button].small, input[type=submit].small, input[type=reset].small, .small-button, a.small-primary {
        font-size: var(--small-font-size);
        border-radius: var(--small-gap);
        line-height: initial;
    }

:is(button, input[type=button], input[type=submit], input[type=reset], .button, a.primary) small {
    font-size: var(--small-font-size);
    display: block;
}

:is(button, input[type=button], input[type=submit], input[type=reset], .button, a.primary) hr {
    margin: var(--xsmall-gap);
    border-width: var(--xthin-border);
    border-style: solid;
    display: block;
}

:is(button, input[type=button], input[type=submit], input[type=reset], a.button, a.primary, input.like-button, select.like-button, textarea.like-button).whole-width {
    margin: var(--small-gap) var(--medium-gap) var(--small-gap) var(--medium-gap);
    width: calc(100% - 2 * var(--medium-gap));
    box-sizing: border-box;
}

:is(button, input[type=button], input[type=submit], input[type=reset], a.button, a.primary, input.like-button, select.like-button, textarea.like-button).whole-or-half-width {
    margin: var(--small-gap);
    width: calc(50% - 2 * var(--small-gap));
    box-sizing: border-box;
}

:is(button, input[type=button], input[type=submit], input[type=reset], a.button, a.primary, input.like-button, select.like-button, textarea.like-button).half-width {
    margin: var(--small-gap);
    width: calc(50% - 2 * var(--small-gap));
    box-sizing: border-box;
}

:is(button, input[type=button], input[type=submit], input[type=reset], a.button, a.primary, input.like-button, select.like-button, textarea.like-button).third-width {
    margin: var(--small-gap);
    width: calc(100% / 3 - 2 * var(--small-gap));
    box-sizing: border-box;
}

:is(button, input[type=button], input[type=submit], input[type=reset], a.button, a.primary, input.like-button, select.like-button, textarea.like-button).quarter-width {
    margin: var(--small-gap);
    width: calc(25% - 2 * var(--small-gap));
    box-sizing: border-box;
}

p.large-icon {
    margin: 0;
    font-size: var(--large-icon-size);
}

p.medium-icon {
    margin: 0;
    font-size: calc(var(--large-icon-size) / 2);
}

p.small-icon {
    margin: 0;
    font-size: calc(var(--large-icon-size) / 4);
}

form.binary {
    display: table;
}

    form.binary p {
        display: table-row;
    }

        form.binary p * {
            display: table-cell;
        }

        form.binary p input.digit {
            font-family: Consolas, 'Courier New', Courier, monospace;
            font-size: var(--large-font-size);
            margin: var(--xsmall-gap);
        }

        form.binary p input.check {
            font-size: var(--large-font-size);
            margin: var(--xsmall-gap);
        }

table.binary {
    font-family: Consolas, 'Courier New', Courier, monospace;
    font-size: var(--large-font-size);
    text-align: center;
}

    table#ascii {
        margin: var(--medium-gap);
        font-size: var(--medium-font-size);
        border-collapse: collapse;
    }

        table#ascii th {
            border-style: solid none solid solid;
            width: 20px;
            padding-left: 4px;
            padding-right: 4px;
        }

        table#ascii td {
            border-style: solid solid solid none;
            width: 30px;
            padding-left: 4px;
            padding-right: 4px;
        }

table.binary th {
    width: 20px;
}

table.binary th input {
    width: 30px;
    font-family: Consolas, 'Courier New', Courier, monospace;
    font-size: var(--medium-font-size);
    text-align: center;
}

table.binary th input[type=button] {
    width: 70px;
}

table.binary td {
    width: 50px;
}

table.binary td input {
    width: 45px;
    font-family: Consolas, 'Courier New', Courier, monospace;
    font-size: var(--large-font-size);
    text-align: center;
}

.keyboard {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.key {
    min-height: calc(var(--keyboard-key-height) + 2 * var(--thin-border));
    font-size: var(--medium-font-size);
    text-align: center;
    vertical-align: middle;
    margin: var(--thin-border);
    padding: 0;
    border: var(--thin-border) solid black;
    float: left;
    border-radius: var(--small-border-radius);
    box-sizing: border-box;
    overflow: clip;
}

.one-line-key {
    line-height: var(--keyboard-key-height);
}

.two-line-key {
    line-height: calc(var(--keyboard-key-height) / 2);
}

.half-key {
    width: calc((100% / var(--keyboard-key-count) * 0.5) - 2 * var(--thin-border));
}

.single-key {
    width: calc((100% / var(--keyboard-key-count)) - 2 * var(--thin-border));
}

.one-and-half-key {
    width: calc((100% / var(--keyboard-key-count) * 1.5) - 2 * var(--thin-border));
}

.double-key {
    width: calc((100% / var(--keyboard-key-count) * 2) - 2 * var(--thin-border));
}

.two-and-half-key {
    width: calc((100% / var(--keyboard-key-count) * 2.5) - 2 * var(--thin-border));
}

.finger {
    width: calc(100% / 9 - 2 * var(--thin-border));
    text-align: center;
    margin: var(--thin-border);
    min-height: 50px;
    font-size: var(--small-font-size);
    float: left;
    display: none;
    overflow: clip;
    box-sizing: border-box;
}

/* For smaller windows */
@media only screen and (max-width: 1000px), screen and (max-height: 500px) {
    :root {
        --keyboard-key-height: 30px;
    }

    .key {
        font-size: var(--xsmall-font-size);
        border-radius: var(--xsmall-border-radius);
    }
}

/* For larger windows */
@media only screen and (min-width: 1100px) and (min-height: 500px) {
    .finger {
        display: inline-block;
    }

    #kCaps::after {
        content: " Lock";
    }
}

.nibble {
    margin: var(--small-gap);
    font-size: var(--large-font-size);
}

    .nibble .bit {
        margin: 0;
        width: var(--input-bit-width);
        border-radius: 0;
        border: none;
    }

.bit {
    width: calc(1.5 * var(--input-bit-width));
    font-size: var(--large-font-size);
    text-align: center;
    margin: 3px;
}

.carry-bit {
    width: var(--input-bit-width);
    font-size: var(--medium-font-size);
    text-align: center;
    margin: 3px 18px 3px 18px;
}

.cell-pair {
    display: block;
    float: left;
    break-inside: avoid;
    border-style: solid;
    border-width: var(--thin-border);
}

.cell-left {
    display: inline-block;
    font-weight: bold;
}

.cell-right {
    display: inline-block;
}

@media only screen and (max-width: 800px) {
    :root {
        --large-icon-size: 40px;
        --panel-width: 50px;
    }

    :is(.left-panel, .right-panel) hr {
        display: block;
    }

    :is(.left-panel, .right-panel) h2 {
        display: none;
    }

    nav.left .caption {
        display: none;
    }

    nav.left p {
        padding: 0 var(--small-gap) 0 var(--small-gap);
        text-align: center;
    }

    :is(input, select, textarea).whole-or-half-width {
        width: 100%;
    }

    :is(button, input[type=button], input[type=submit], input[type=reset], a.button, a.primary, input.like-button, select.like-button, textarea.like-button).whole-or-half-width {
        width: calc(100% - 2 * var(--small-gap));
    }

    .left-panel.left-inline-panel, .right-panel.right-inline-panel {
        position: static;
        width: 100%;
    }

    .left-inline-panel ~ .main-panel, .right-inline-panel ~ .main-panel {
        position: static;
        width: 100%;
    }
}

/* Really short screens */
@media only screen and (max-height: 450px) {
    :root {
        --large-icon-size: 60px;
    }

    :is(.left-panel, .right-panel) hr {
        display: block;
    }

    :is(.left-panel, .right-panel) h2 {
        display: none;
    }
}

/* Source: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}