body {
    background: #ff;
    color: #333;
    font-family: ss4, serif;
    font-size: 12pt;
    padding-bottom: 30pt;
}

a {
    color: #349;
}

a:visited {
    color: #938;
}

a:hover {
    text-decoration: none;
}

#content, #preamble, #postamble {
    margin: 0 auto;
    max-width: 560pt;
}

#preamble {
    font-family: mo, monospaced;
    font-size: 30pt;
}

#postamble {
    font-family: mo, monospaced;
    font-size: 10pt;
}

h1, h2, h3, h4 {
    font-family: mo, monospaced;
}

div.content img {
    width: 100%;
}

div.content pre.src, code {
    font-family: mo, monospaced;
    font-size: 10pt;
}

code {
    background: #eee;
    padding: 2pt;
}

.align-right {
    text-align: right;
}

li::marker {
  content: "┈ ";
  color: #333;
}

@font-face {
    font-family: 'ss4';
    src: url('ss4r.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ss4';
    src: url('ss4i.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'ss4';
    src: url('ss4b.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ss4';
    src: url('ss4bi.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


@font-face {
    font-family: 'mo';
    src: url('agaver.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mo';
    src: url('agaveb.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}