:root {

    --theme-page-heading-font-family: Courier, monospace;
    --theme-page-text-font-family:    Courier, monospace;

    --theme-page-bg:   #111;
    --theme-page-text: #ccc;
    --theme-page-text-size: 1.1em;
    --theme-page-h1-size: 2.0em;

    --theme-clickable-idle: #777;
    --theme-clickable-base: #ccc;
    --theme-clickable-hover: #fff;

    --theme-spacing-one-unit: 1em;
    --theme-spacing-half-unit: calc(0.5 * var(--theme-spacing-one-unit));

}
/* reset */
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: var(--theme-page-text-font-family);
    color: var(--theme-page-text);
}

h1 { font-weight: normal;}
b {
    font-weight: bold;
}
body {
    background: var(--theme-page-bg);
}

body > * {
    width: 100%;
}
body > *:not(:first-child) {
    margin-bottom: var(--theme-spacing-half-unit);
}

body > #header,
body > #footer {
    text-align: center;
}

/* Header HTML */
#header > *,
#header {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}
#header > h1 {
    /* Temp color until we work out whatever e
    lse we're doing for the theme */
    color: #fff; /* var(--theme-clickable-base); */
    size: var(--theme-page-h1-size);
}

h1, h2, h3, h3, h5 {
    font-family: var(--theme-page-heading-font-family);
}

body > #content > * { margin-top: var(--theme-spacing-one-unit); }

a         { font-weight: bold;                   }
a, a:link { color: var(--theme-clickable-base);  }
a:visited { color: var(--theme-clickable-idle);  }
a:hover   { color: var(--theme-clickable-hover); }

ul, ol  { padding-left: calc(1.2 * var(--theme-spacing-one-unit)); }
ul > li { list-style-type: disc; }
ol > li { list-style-type: decimal; }


/* Tables and table contents */
table {
    box-sizing: border-box;
    margin: var(--theme-spacing-one-unit);
}

th {
    text-align: center;
    border-bottom: 1px solid var(--theme-clickable-idle);
}

td { padding: var(--theme-spacing-half-unit); }