html {
    font-family: "Avenir Next", Avenir, "Century Gothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    background-image: url('grass.jpg');
    background-repeat: none;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    height: 100%;
}

body {
    margin: 32px 128px 0px 128px;
    width: 100%;
    min-width: 600px;
    max-width: 900px;
}

header, section, footer {
    background-color: white;
    border: 1px solid #aaa5;
    padding: 16px 40px 16px 40px;
    margin-bottom: 32px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

p { text-indent: 16px; }

main img, main video {
    width: 100%;
    padding: 0;
    display: block;
}

figure { margin: 0; }

ul { margin: 0 16px 0 16px; }

section { margin-bottom: 32px; }

footer {
    text-align: center;
    font-size: 12px;
    padding: 8px;
}

h1 { font-size: 18px; }

h2 { font-size: 16px; }

a {
    color: #27d;
    text-decoration: none;
    font-size: inherit;
}

a:hover {
    text-decoration: underline;
}

figcaption {
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

img {
    background: url('placeholder.jpg') center / cover no-repeat;
}

.irc-quote {
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
    background-color: #002b36;
    margin: 0 16px 0 16px;
}

.irc-quote table {
    padding: 4px;
    font-family: Monaco, monospace;
    color: #839496;
    border-spacing: 4px 0;
}

.irc-quote hr {
    width: 60%;
    border: 1px solid #073642;
}

.irc-title {
    background-color: #073642;
    font-size: 13px;
    color: #93a1a1;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    padding: 4px;
    padding-left: 8px;
}

.irc-quote .nick:before {
    content: '<';
    color: #839496;
}

.irc-quote .nick:after {
    content: '>';
    color: #839496;
}

.irc-quote td:first-child {
    text-align: right;
    vertical-align: top;
}

.jotun      { color: #eee8d5; }
.empus      { color: #87d700; }
.shesle     { color: #d787ff; }
.k          { color: #268bd2; }
.ragnar     { color: #b58900; }
.ratler     { color: #afff5f; }
.telac      { color: #8dbbf5; }
.mowerbot   { color: #bf6c59; }
.highlight  { color: yellow; }

.credits p { text-indent: 0; }
.credits .footer {
    margin-top: 64px;
    text-align: center;
    font-size: 12px;
}