/* Tango colour scheme: http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Color_Palette */
* {
    --aluminium-light: #eeeeec;
    --aluminium-medium: #d3d7cf;
    --aluminium-dark: #babdb6;

    --slate-light: #888a85;
    --slate-medium: #555753;
    --slate-dark: #2e3436;

    --butter-light: #fce94f;
    --butter-medium: #edd400;
    --butter-dark: #c4a000;

    --chameleon-light: #8ae234;
    --chameleon-medium: #73d216;
    --chameleon-dark: #4e9a06;

    --orange-light: #fcaf3e;
    --orange-medium: #f57900;
    --orange-dark: #ce5c00;

    --chocolate-light: #e9b96e;
    --chocolate-medium: #c17d11;
    --chocolate-dark: #8f5902;

    --sky-blue-light: #729fcf;
    --sky-blue-medium: #3465a4;
    --sky-blue-dark: #204a87;

    --plum-light: #ad7fa8;
    --plum-medium: #75507b;
    --plum-dark: #5c3566;

    --scarlet-red-light: #ef2929;
    --scarlet-red-medium: #cc0000;
    --scarlet-red-dark: #a40000;
}

body {
    margin: 0;
    background: black;
    font-family: monospace;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    color: var(--slate-medium);
    background: black;
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
}

main {
    margin-left: 120px;
    margin-top: 42px;
}

/* Average article stuff */
article, section {
    margin-bottom: 20px;
    margin-right: 10px;
    padding: 6px;
    background: var(--slate-dark);
    border: 1px solid var(--slate-medium);
    color: var(--aluminium-light);
}

article a, section a {
    color: var(--sky-blue-light);
    text-decoration: none;
}

article a:hover, section a:hover {
    color: var(--sky-blue-medium);
    text-decoration: none;
}

h1 {
    margin-top: 0;
}

h1, h2, h3, h4, h5 {
    color: var(--chameleon-light);
}

p {
    font-size: 14px;
}

article li, section li {
    font-size: 14px;
    line-height: 1.3em;
}

img {
    display: block;
    margin: 0 auto 0;
    max-width: 100%;
}

/* Inline code and program outputs */
code, samp {
    background: var(--slate-medium);
    white-space: pre;
}

/* If wrapped in <pre>, we get block code and program outputs */
pre > code, pre > samp {
    display: block;
    overflow: auto;
    border: 1px dashed var(--slate-light);
    padding: 10px;

    background: var(--slate-medium);
    line-height: 1.4em;
    margin: 0 8px 0;
}

/* Navigation */
nav {
    width: 120px;
    position: fixed;
    left: 0;
    top: 41px;
    height: 100%;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav a {
    display: block;
    padding: 2px;
    color: var(--slate-medium);
    text-decoration: none;
    font-size: 16px;
}

nav a:hover {
    display: block;
    padding: 2px;
    color: var(--slate-light);
    text-decoration: none;
}

nav ul, nav ul ul {
    margin: 0;
}

nav ul {
    padding-left: 5px;
}

nav ul ul {
    padding-left: 10px;
    padding-bottom: 10px;
}

/* Mouse highlight style */
::selection {
    background: var(--slate-light);
}

/* Scrollbar style for <main> */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: black;
}

::-webkit-scrollbar-thumb {
    background: var(--slate-medium);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-light);
}

/* Scrollbar style for <code> */
code::-webkit-scrollbar {
    height: 8px;
}

code::-webkit-scrollbar-track {
    background: var(--slate-medium);
}

code::-webkit-scrollbar-thumb {
    background: var(--slate-light);
}

code::-webkit-scrollbar-thumb:hover {
    background: var(--slate-light);
}