body {
  margin: 0 20px 40px 20px;
  background: #fff;
}
@media screen and (max-width: 480px) {
  body {
    margin: 0 0 20px 0;
  }
}

abbr.published {
  text-decoration: none;
  border: none;
}

hr {
  border: 1px solid #ccc;
  margin: 40px auto;
  width: 60%;
}

.sticky() {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: sticky;
  background: #fff;
}


/* At the top of the blog you should see image at the center, the clickable blog
 * title on its left, and various other links (GitHub, email, etc) on its right.
 *
 * When using a mobile phone, you should see title and links to the left, image
 * to the right; title stacked above the links.
 */
.blog-header {
  width: 100%;
  min-height: 84px;
  position: relative;

  font-size: 39px;
  line-height: 64px;

  margin: 10px 0 40px 0;
  border-bottom: 1px solid #bbe;
}
@media screen and (max-width: 480px) {
  .blog-header {
    font-size: 28px;
    line-height: 32px;
  }
}
.blog-title {
  position: absolute;
  right: 50%;
  padding-right: 64px;
  text-align: right;
  font-weight: 700;
}
@media screen and (max-width: 480px) {
  .blog-title {
    right: 32px;
    padding-right: 48px;
  }
}
.blog-image {
  position: absolute;
  left: 50%;
  margin-left: -32px;
}
.blog-image img {
  width: 64px;
  height: 64px;
  border-radius: 64px;
}
@media screen and (max-width: 480px) {
  .blog-image {
    left: auto;
    right: 0;
  }
}

.blog-links {
  position: absolute;
  left: 50%;
  padding-left: 64px;
}
.blog-links i {
  margin-right: 4px;
}

@media screen and (max-width: 480px) {
  .blog-links {
    left: auto;
    right: 32px;
    top: 32px;
    padding-left: 0;
    padding-right: 48px;
  }
}


/* Search form.
 */
#search-form {
  width: 100%;
  max-width: 480px;
  height: 32px;
  margin: 80px 32px 16px auto;

  position: relative;
  padding: 0 40px 0 0;
}
#search-form input {
  width: 100%;
  float: left;
  height: 32px;
  font-size: 18px;
  line-height: 1;
}
#search-form button {
  font-weight: bold;
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 32px;
  width: 38px;
  padding: 0;
}
.st-results {
  margin: 2em 0 4em 0;
}


/* The main content on each page.  It's a blog, so we keep lines just wide enough for readability.
 */
.labnotes > .container {
  max-width: 740px;
}


/* Each post consists of a title, timestamp and the post body.
 */
.post, .post p {
  font-size: 18px;
  line-height: 27px;
}

/* On individual post page you should see the full title, one or more lines.
 */
.post h1 {
}
/* On the main page you should see each post title on a single line, longer
 * titles truncated with ellipsis.
 */
.post h2 a {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post h1, .post h2 {
  line-height: 1.2;
  margin: 0;
  font-size: 27px;
}
@media screen and (min-width: 480px) {
  .post h1, .post h2 {
    .sticky();
    top: 0px;
    padding-bottom: 10px;
  }
}

.post .meta {
  color: #AAA;
}

.post .body {
  /* Don't expand content to attempt to fit pre blocks. */
  overflow: hidden;

  /* http://www.newnet-soft.com/blog/csstypography */
  word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
          hyphenate-lines: 3;
}

/* On the main page you should see several of the most recent posts.  Posts are
 * separated by a short line.
 */
.posts .post:after {
  display: block;
  content: " ";
  max-width: 460px;
  margin: 3em auto 4em auto;
  border-bottom: 1px solid #bbe;
}

/* Limit image size so they don't take over the entire page.
 */
.post img {
  max-width: 100%;
  max-height: 500px;
}


/* One line form for subscribing to TinyLetter mailer.
 */
.weekend-reading-subscribe {
  margin: 20px 0 40px 0;
  font-size: 18px;
  text-align: right;
}
.weekend-reading-subscribe label {
  font-weight: normal;
  display: block;
  max-width: 30em;
  float: right;
}
.weekend-reading-input {
  clear: both;
  height: 32px;
  position: relative;
  padding: 0 5.5em 0 0;
}
.weekend-reading-subscribe input {
  width: 12em;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.weekend-reading-subscribe button {
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 5.5em;
  height: 32px;
}


/* On the archive page you should see one post on each line, the published date
 * followed by the post title, longer titles truncated with ellipsis.
 */
.link-to-post {
  font-size: 18px;
  line-height: 27px;

  padding-bottom: 0.6em;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-to-post .published {
  display: inline-block;
  width: 7em;
  color: #AAA;
  text-align: right;
  margin-right: 0.9em;
}


/* On the main page you should see a link to the archive page.
 */
.link-to-archive {
  font-size: 1.6em;
  font-weight: bold;
}


/* Page footer is just a set of links.
 */
footer {
  margin-top: 40px;
  text-align: center;
  font-weight: 600;
}
footer a {
  margin: 0 10px;
  white-space:nowrap;
}
footer a i {
  margin-right: 5px;
}