html,
body {
    margin: 0;

    width : 100%;
    height: 100%;

    background-color: white;
}

#page {
    overflow-x: clip;
    overflow-y: auto;

    margin: 0;

    height: 100%;

    background-color: whitesmoke;
}


header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    overflow-x: clip;

    padding: 12px;

    background-color: #4f4f4f;
}

#header-logo {
    width: clamp(35px, 6vw, 50px);

    vertical-align: bottom;
}

#header-text {
    margin-left: 12px;

    white-space: pre;

    font-size  : clamp(28px, 5vw, 40px);
    font-family: 'Courier New', Courier, monospace;
    text-align : center;

    color: white;
}


footer {
    background-color: #4f4f4f;

    padding: 24px 0 12px;

    font-family: Arial, Helvetica, sans-serif;
    text-align : center;

    color: white;
}

footer a:link,
footer a:visited {
    text-decoration: none;

    color: white;
}

#copyright {
    display: block;

    margin-top: 12px;
}


nav {
    background-color: gray;
}

/* Horizontal scroll on navbar for mobile platforms */
nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    overflow-x: auto;
}

nav>a:link,
nav>a:visited {
    display: inline-block;

    padding: 16px;

    font-family    : Arial, Helvetica, sans-serif;
    text-decoration: none;

    color: white;
}

nav>a:hover {
    background-color: darkgray;
}


@media only screen and (max-width: 900px) {
    .standard-main {
        margin: 0;
    }
}

@media only screen and (min-width: 900px) {
    .standard-main {
        margin: 0 calc(0.2 * (100% - 900px));
    }
}

@media only screen and (min-width: 1200px) {
    .standard-main {
        margin: 0 calc(0.5 * (100% - 1080px));
    }
}

.standard-main {
    overflow-x: auto;

    padding: 1rem;

    font-family: Arial, Helvetica, sans-serif;
}


.standard-main h1,
.standard-main h2,
.standard-main h3,
.standard-main h4,
.standard-main h5,
.standard-main h6 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.standard-main h1 {
    margin-block-start: 0.6em;
    margin-block-end  : 0.6em;
}

.standard-main h2,
.standard-main h3,
.standard-main h4,
.standard-main h5,
.standard-main h6 {
    margin-block-start: 1.2em;
    margin-block-end  : 0.6em;
}


.standard-main p,
.standard-main ul,
.standard-main table {
    margin-block-start: 0.8em;
    margin-block-end  : 0.4em;
}

.standard-main p+p {
    margin-block-start: 0.7em;
}

.standard-main h1+p,
.standard-main h2+p,
.standard-main h3+p,
.standard-main h4+p,
.standard-main h5+p,
.standard-main h6+p {
    margin-block-start: 0.6em;
}

.standard-main p+ul {
    margin-block-start: 0.5em;
}

.standard-main p,
.standard-main li {
    font-size  : large;
    line-height: 1.5;
}


.article-base {
    margin: 1rem 0;
}

.article-base p, .article-base li {
    margin-inline-start: 0.5em
}


.standard-table {
    overflow-x: auto;
}

.standard-main th {
    font-weight: bold;
    text-align:  left;
}

.standard-main th,
.standard-main td {
    padding:       0.2em;
    padding-right: 1.2em;
}


hr.section-divider {
    margin: 1rem 0;
}

hr.bare-divider {
    margin: 0;
}


.standard-main figure {
    display: block;

    margin: 1.8em 24px;

    padding: 16px;

    background-color: whitesmoke;

    border-radius: 12px;

    border: 2px solid lightgray;
}

.standard-main figure img {
    margin: 0;
}

.standard-main figure figcaption {
    margin: 1em 0 0;
}


.standard-main code {
    background-color: lightgray;
}