@font-face {
    font-family: "Web437 IBM VGA";
    src: url("Web437_IBM_VGA_8x16.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --a0:  #000000;
    --a1:  #aa0000;
    --a2:  #00aa00;
    --a3:  #aa5500;
    --a4:  #0000aa;
    --a5:  #aa00aa;
    --a6:  #00aaaa;
    --a7:  #aaaaaa;
    --a8:  #555555;
    --a9:  #ff5555;
    --a10: #55ff55;
    --a11: #ffff55;
    --a12: #5555ff;
    --a13: #ff55ff;
    --a14: #55ffff;
    --a15: #ffffff;

    --bg:      #0d0d0d;
    --fg:      var(--a7);
    --bright:  var(--a15);
    --dim:     var(--a8);
    --edge:    var(--a8);
    --accent:  var(--a6);
    --mono:    "Web437 IBM VGA", "DejaVu Sans Mono", "Liberation Mono", "Menlo", "Consolas", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-synthesis: none;
    letter-spacing: 0;
}

html {
    background: var(--bg);
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--fg);
    line-height: 24px;
    margin: 0;
    padding: 16px;
    height: 100%;
    display: table;
    width: 100%;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

a {
    color: var(--bright);
    text-decoration: none;
    border-bottom: 1px solid var(--edge);
}

a:hover,
a:focus {
    background: var(--accent);
    color: var(--bg);
    border-bottom-color: var(--accent);
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

.block {
    display: inline-block;
    max-width: 100%;
    text-align: left;
}

.banner {
    margin: 0 0 8px 0;
}

.banner-art {
    line-height: 16px;
    margin: 0;
    overflow-x: auto;
    color: var(--bright);
}

.subtitle {
    color: var(--dim);
    text-align: right;
    margin: 0;
    padding: 0;
}

.a-f0  { color: var(--a0); }
.a-f1  { color: var(--a1); }
.a-f2  { color: var(--a2); }
.a-f3  { color: var(--a3); }
.a-f4  { color: var(--a4); }
.a-f5  { color: var(--a5); }
.a-f6  { color: var(--a6); }
.a-f7  { color: var(--a7); }
.a-f8  { color: var(--a8); }
.a-f9  { color: var(--a9); }
.a-f10 { color: var(--a10); }
.a-f11 { color: var(--a11); }
.a-f12 { color: var(--a12); }
.a-f13 { color: var(--a13); }
.a-f14 { color: var(--a14); }
.a-f15 { color: var(--a15); }

.a-b0  { background: transparent; }
.a-b1  { background: var(--a1); }
.a-b2  { background: var(--a2); }
.a-b3  { background: var(--a3); }
.a-b4  { background: var(--a4); }
.a-b5  { background: var(--a5); }
.a-b6  { background: var(--a6); }
.a-b7  { background: var(--a7); }
.a-b8  { background: var(--a8); }
.a-b9  { background: var(--a9); }
.a-b10 { background: var(--a10); }
.a-b11 { background: var(--a11); }
.a-b12 { background: var(--a12); }
.a-b13 { background: var(--a13); }
.a-b14 { background: var(--a14); }
.a-b15 { background: var(--a15); }
