@font-face {
    font-family: 'FWX';
    src: url('/static/fonts/fwx.woff') format('woff');
}
@font-face {
    font-family: 'SiteFont';
    src: url('/static/fonts/Electrolize-Regular.woff') format('woff');
    /*src: url('/static/fonts/unispace-regular.woff') format('woff');*/
}
@font-face {
    font-family: 'CodeFont';
    src: url('/static/fonts/unispace-regular.woff') format('woff');
}
html {
    /*font-family: 'FWX';*/
    font-family: 'SiteFont', monospace;
    background: linear-gradient(#002043, #221042) fixed;
    color: white;
}
body {
    max-width: 900px;
    border: 8px solid black;
    margin: 16px auto auto;
    background-color: #111;
}
main {
    font-family: "SiteFont", "monospace";
}
header {
    flex-grow: 1;
    margin: 0;
    padding-top: 4px;
    background-color: rebeccapurple;
    color: white;
    border: 2px solid lightgrey;
}
header h1, header h2, header h3, header h4, header h5, header h6 {
    margin: 0 0 0 8px;
}
header p {
    margin: 4px 4px 0 4px;
}

footer {
    text-align: center;
}

.header-section-subtitle {
    border-top: 2px groove black;
    margin: 4px 0 0 0;
    background-color: cyan;
    color: black;
}

#footer-buttons {
    display: flex;
    flex: 1 1 200px;
    margin: 16px auto auto;
    flex-shrink: 1;
    flex-wrap: wrap;
    flex-basis: 200px;
}
#footer-webring {
    display: flex;
    flex: 1 1 200px;
    margin: 2px auto auto;
    flex-shrink: 1;
    flex-wrap: wrap;
    flex-basis: 200px;
    justify-content: center;
}

.progress-container {
    display: inline-block;
    width: 80%;
    height: 16px;
    background-color: black;
    border: 2px solid grey;
    padding: 2px;
    margin: auto;
}
.progress-indicator {
    display: block;
    height: 100%;
    background-color: greenyellow;
}

/* footer buttons */

[class*="button-link-"] {
    display: flex;
    width: 100px;
    max-width: 100px;
    height: 35px;
    max-height: 35px;

    text-align: center;
    color: black !important;
    font-size: 23px;
    text-decoration: none;

    justify-content: center;
    align-items: center;

    margin-right: 4px;
    border: 3px outset grey;
}
[class*="button-link-"]:active {
    border-style: inset;
}
.button-link-red {
    background-color: #ff99cc;
}
.button-link-red:active {
    background-color: #cc6699;
}
.button-link-yellow {
    background-color: #ffff99;
}
.button-link-yellow:active {
    background-color: #cccc66;
}
.button-link-green {
    background-color: #66ffcc;
}
.button-link-green:active {
    background-color: #33cc99;
}
.button-link-blue {
    background-color: #66ccff;
}
.button-link-blue:active {
    background-color: #3399cc;
}
.button-link-disabled {
    background-color: #aaa;
}
.button-link-disabled:active {
    border-style: outset;
}
.button-gap {
    width: 106px;
    height: 35px;
    border: 2px solid #0000;
    flex-shrink: 1;
}

main {
    margin: auto;
}

code {
    font-family: CodeFont, monospace;
}

article {
    background-color: #294B4D;
    border: 2px solid white;
    padding-bottom: 8px;
}
article h1, article h2, article h3, article h4, article h5, article h6 {
    margin: 4px 8px 4px 8px;
}
article h1:before {
    content: "◀ ";
}
article h1:after {
    content: "";
    display: block;
    border-top: 1.5px solid cyan;
}
article h2:after {
    content: "";
    display: block;
    border-top: 1.5px solid mediumpurple;
}
article h3:after {
    content: "";
    display: block;
    border-top: 1.5px solid #33cc99;
}
article p {
    margin: 4px 4px 0 4px;
}

ol, ul {
    margin: 8px 0 8px 0;
}
a {
    color: #66ccff;
}
a:visited {
    color: #ff66ff;
}