/* One plain column, after paulgraham.com: Verdana, black text, blue underlined
   links, no bars and no boxes. The footer is a line under the text, so a short
   page has no coloured band that can stop above the bottom of the window. */

body {
    margin: 0 auto;
    max-width: 36em;
    padding: 40px 16px 0;
    background: #fff;
    color: #000;
    font: 15px/1.6 Verdana, Geneva, sans-serif;
}

a { color: #000099; }
a:visited { color: #464646; }

header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
    margin-bottom: 32px;
}
header .name {
    color: #000;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}
header nav {
    color: #888;
    font-size: 13px;
    margin-top: 4px;
}

h1 { font-size: 22px; line-height: 1.3; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 32px 0 8px; }
h3 { font-size: 15px; margin: 24px 0 8px; }
p, ul, ol, pre, blockquote { margin: 0 0 16px; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 6px; }
img { max-width: 100%; height: auto; }

.intro { overflow: hidden; }
.intro .photo {
    float: left;
    margin: 4px 20px 8px 0;
    border-radius: 50%;
}

ul.posts { list-style: none; padding: 0; }
.date { color: #888; font-size: 13px; }
/* The date is a fixed column, so a long title wraps under the title, not under the date. */
ul.posts li { display: flex; gap: 12px; }
ul.posts .date { flex: 0 0 7.5em; padding-top: 2px; }
h1 + .date { margin-top: -10px; }

blockquote {
    border-left: 3px solid #ddd;
    color: #444;
    padding-left: 14px;
}
code { font: 13px/1.5 Menlo, Monaco, Consolas, monospace; }
pre {
    background: #f6f6f6;
    overflow-x: auto;
    padding: 12px;
}

.follow {
    border-top: 1px solid #ddd;
    color: #444;
    font-size: 13px;
    margin-top: 40px;
    padding-top: 12px;
}

footer {
    border-top: 1px solid #ddd;
    color: #888;
    font-size: 13px;
    margin-top: 48px;
    padding: 12px 0 40px;
}