:root {
    --cB: #393939;
    --cMB: #2E2E2E;
    --cIB: #90d3e4;
    --cBorder: #333;
    --s1: #f3982d; --s2: #dc5800;
}

.cg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 33.3%));
}
html[dir="ltr"] .cg {
    padding-left: 40px;
}
html[dir="rtl"] .cg {
    padding-right: 40px;
}

html, body {
    margin: 0;
    padding: 0;

    /* Account for fixed header */
    scroll-padding-top: 75px;

    min-height: 100vh;
}

body {
    display: flex;
}
body > nav {
    top: 0;
    width: 300px;
    height: 100vh;
    box-sizing: border-box;
    border-right: 1px solid var(--cBorder);
    position: sticky;
    flex-shrink: 0;
    background-color: var(--cMB);
}

h1, nav li > h4 {
    color: var(--s1);
    border-bottom: 3px solid var(--s2);
    user-select: none;
}
h2, h3, h4 {
    color: var(--s1);
    user-select: none;
}
h3 {
    font-style: italic;
}

.cg h3 {
    font-style: unset;
}

html[dir="ltr"] ol {
    padding-left: 0px;
}
html[dir="rtl"] ol {
    padding-right: 0px;
}

body > nav > ol a:hover {
    background-color: #555;
}

a {
    color: var(--s1);
    text-decoration: none;
    user-select: none;
}
a:hover {
    text-decoration: underline;
}

body > nav a,
body > nav h4 {
    display:block;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0;
}

html[dir="ltr"] body > nav a,
html[dir="ltr"] body > nav h4 {
    padding-left: 40px;
    padding-right: 1em;
}
html[dir="rtl"] body > nav a,
html[dir="rtl"] body > nav h4 {
    padding-right: 40px;
    padding-left: 1em;
}

body > nav a:hover {
    text-decoration: none;
}

body > nav > ol ol > li {
    padding-left: 10px;
}
body > nav > ol ol a:hover {
    background-color: unset;
    color: var(--s1);
}

select, button {
    padding: 0.5em 1em;
}

.hide {
    display:none;
}

@media(min-width:1000px) {
    .nav-block {
        display:block;
    }

    div.main-body {
        grid-template-rows: auto 1fr;
        grid-template-columns: minmax(500px, 720px) minmax(220px, 1fr);
        gap: 0px 80px;
    }
}

body > div > header {
    display:block;
    top: 0;
    position: sticky;
    background-color: var(--cMB);
    border-bottom: 1px solid var(--cBorder);

    padding: 12px 40px;
}

nav > ol {
    list-style: none;
}

header > nav {
    display: flex;
}

header > nav > ol > li {
    display: inline;
}

header > nav > ol > li+li:before {
    content: "/\00a0";
}

html[dir='ltr'] header > nav > select {
    margin-left: auto;
}
html[dir='rtl'] header > nav > select {
    margin-right: auto;
}

body > div {
    display: block;
    box-sizing: border-box;
    flex: 1 1;

    background-color: var(--cB);
}

.cg nav li {
    padding-top: 8px;
}

.cg h3 {
    display: flex;
    align-items: center;
    color: #888;
}

h3 > img {
    width: 64px;
    height: 64px;
}

html[dir="ltr"] h3 > img {
    padding-right: 1em;
}
html[dir="rtl"] h3 > img {
    padding-left: 1em;
}

main {
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 80px;

    font-size: 16px;
    line-height: 1.5;
    background-color: var(--cB);
}
p, li, dd, dt, table {
    color: #CCC;
}
main > header > p {
    font-size: 2em;
}

div.main-body {
    display: grid;
}

.docEnd {
    position: fixed;
    bottom: 0;
    margin-bottom: 20px;
}
html[dir="ltr"] .docEnd {
    right: 0;
    margin-right: 20px;
}
html[dir="rtl"] .docEnd {
    left: 0;
    margin-left: 20px;
}

.docEnd > button {
    width: 64px;
    height: 64px;
    padding: 0px;
    border-radius: 50%;
    background-color: var(--cIB);
}