:root {
    /*
    CSS variables go here!
    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
    */

    /* The main colors of the stylesheet */
    --background: #0d193b;
    --foreground: #a0ccff;
    --accent: #ffffff;

    /* Panel background */
    --panel: rgba(160, 204, 255, 0.02);  /* It's --foreground, but with 2% alpha */
    --border: rgba(160, 204, 255, 0.10);  /* It's --foreground, but with 10% alpha */

    /* Link colors */
    --link: #00caca;
    --link-hover: #00ffff;
    --link-active: #a0ffff;

    /* Fonts */
    --font-text: sans-serif;
    --font-title: serif;
    --font-code: monospace;
}

* {
    /* Use border boxes instead of the insane content boxes */
    box-sizing: border-box;

    /* Set the default border color and style on all elements */
    border-color: var(--border);
    border-style: solid;
    border-width: 0;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-text);
}

h1, h2, h3, h4, h5, h6, thead,
.title {
    color: var(--accent);

    font-family: var(--font-title);
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6,
.centered {
    text-align: center;
}

h1,
.xxl {
    font-size: xx-large;
}

h2,
.xl {
    font-size: x-large;
}

h3,
.l {
    font-size: large;
}

h4,
.m {
    font-size: medium;
}

h5,
.s {
    font-size: small;
}

h6,
.xs {
    font-size: x-small;
}

.xxs {
    font-size: xx-small;
}

a,
.link {
    color: var(--link);
    text-decoration: none;
}

a:hover,
.link:hover {
    color: var(--link-hover);
}

a:active,
.link:active {
    color: var(--link-active);
}

pre, code,
.monospace {
    font-family: var(--font-code);
}

blockquote, aside,
.panel {
    padding: 8px;
    border-radius: 4px;
    border-width: 2px;
    background-color: var(--panel);
}

blockquote,
.blockquote {
    padding: 4px 4px 4px 8px;
    margin: 8px 0;
    border-left-width: 2px;
    border-top-width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
}

hr,
.separator {
    border-width: 1px;
    margin-top: 24px;
    margin-bottom: 24px;
}

table,
.table {
    border-spacing: 0;
    border-width: 2px;
    border-collapse: collapse;
}

thead,
.table-head {
    background-color: var(--border);
}

th, td,
.table-cell {
    padding: 4px;
    border-width: 1px;
}

li,
.list-element {
    margin: 10px 0;
}

b,
.bold {
    font-weight: bold;
    color: var(--accent);
}

i,
.italic {
    font-style: italic;
    color: var(--accent);
}

abbr[title],
.with-title-text {
    cursor: help;
}

aside,
.aside {
    font-size: smaller;
}