:root {
    --black:   #191919;
    --red:     #af7f32;
    --green:   #7b9664;
    --yellow:  #ffaf32;
    --blue:    #7b96ff;
    --magenta: #c864af;
    --cyan:    #64ffff;
    --white:   #afc8ff;
    --gray:    #969696;
}

#bg-black   { background: var(--black);   }
#bg-red     { background: var(--red);     }
#bg-green   { background: var(--green);   }
#bg-yellow  { background: var(--yellow);  }
#bg-blue    { background: var(--blue);    }
#bg-magenta { background: var(--magenta); }
#bg-cyan    { background: var(--cyan);    }
#bg-white   { background: var(--white);   }
#bg-gray    { background: var(--gray);    }

body {
    background:  var(--black);
    color:       var(--white);
    font-family: monospace;
    text-align:  justify;
    margin:      16px auto;
    max-width:   720px;
    padding:     0 8px;
}

figure { margin: 12px 0; }

figure img {
    display:   block;
    max-width: 100%;
    height:    auto;
}

figcaption {
    font-size:  80%;
    font-color: var(--gray);
    margin-top: 4px;
    text-align: right;
}

figcaption:before {
    content: " ↑ ";
    color:   var(--cyan);
}

h1 {
    background: var(--cyan);
    color:      var(--black);
}

h1, h2 {
    font-size:     120%;
    line-height:   1.3;
    margin-top:    24px;
    margin-bottom: 8px;
    padding-left:  4px;
}

h1 strong, h1 i { color: var(--black); }

h2 {
    background: var(--green);
    color:      var(--black);
}

p, li { margin-bottom: 8px; }

a {
    text-decoration: underline;
    color:           var(--cyan);
}

ul {
    list-style:   none;
    margin-left:  0;
    padding-left: 0;
    font-size:    85%;
    text-align:   left !important;
}

ul li {
    padding-left: 12px;
    position:     relative;
    margin:       2px 0;
}

ul li:before {
    content:  "·";
    color:    var(--magenta);
    position: absolute;
    left:     0;
}