body {
  font-family: 'Work Sans', sans-serif;
  font-size: 1em;
  line-height: 1.25;
  margin: 0 1em;
  background-color: #eee;
}
#coleslaw-logo { float: right; }
hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
a { color: steelblue; font-weight: 500; text-decoration: none;}
a:hover { color: lightsteelblue; }
pre { overflow: auto; }
p.fineprint { font-size: smaller; }
.title { font-size: 1.5em; }
nav { height: 2em; line-height: 2em; }
.page-header { border-bottom: 1px solid #aaa;}
figure { text-align: center; }
.figure img { max-width: calc(100% - 1em); border-radius: 5px;}
figure img { max-width: calc(100% - 1em); border-radius: 5px;}
figure figcaption { font-size: smaller; }
.figure > p { text-indent: 0; }
/* Layout */
body, main {
  display: flex;
  flex-direction: column;
}

/* Typography */
p { margin: 0; text-align: justify;}
.entry { padding-bottom: 2.5em; }
.entry p + p { text-indent: 2.5em; }
.entry p.date-posted + p { text-indent: 0; }
.entry p.date-posted + p:first-letter {
  font-size: 3em;
  line-height: 1em;
  float: left;
  margin: 0 0.107em 0 0;
}
.entry p.date-posted + p:first-line {
  font-weight: 500;
}
p.date-posted { font-size: smaller; margin: 1.25em 0; }

.row { display: flex; flex-direction: row; }

/* nav */

.brand { font-size: 2em; }

header {
  background-color: #111;
  color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
  border-radius: 0 0 3px 3px;
}

#mobile-menu {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: baseline;
  width: 100%;
}

#mobile-menu > * { padding: 0.5em 0;}
#mobile-menu > .brand { padding-left: 1em; }
#mobile-menu > #menu { padding-right: 1em; }

header #menu svg {
 width: 1.5em;
}

header ul {
  list-style: none;
  display: none;
  flex-direction: column;
  margin: 0;
  padding-left: 0;
}

header ul.visible { display: flex; width: 100%; }
header li { display: inline-block; padding: .2em; text-align: center; width: 100%; }
header li a { width: 100%; display: block;}

/* Source */
pre.src {
  border: 1px solid #aaa;
  padding: 1em;
  border-radius: 5px;
  background-color: #222;
  color: #eee;
}

/* Make entries easier to tell apart */
.entry {
  border-bottom: 1px solid #aaa;
  margin-top: 2em;
}

ul.pager { list-style: none; display: flex; flex-flow: row nowrap; justify-content: space-between; padding-left: 0;}
ul.pager li { border-radius: 5px; border: 1px solid steelblue; padding: 0.1em 0.5em;}

/* Stolen from lisppaste for the colorize output of 3bmd */
.paste { background-color: #F4F4F4; color: black; }
.paste:hover { background-color: #F4F4F4; color: black; }
.symbol { color : #770055; background-color : transparent; border: 0px; margin: 0px;}
.special { color : #FF5000; background-color : inherit; }
.keyword { color : #770000; background-color : inherit; }
.comment { color : #007777; background-color : inherit; }
.string { color : #777777; background-color : inherit; }
.atom { color : #314F4F; background-color : inherit; }
.macro { color : #FF5000; background-color : inherit; }
.variable { color : #36648B; background-color : inherit; }
.function { color : #8B4789; background-color : inherit; }
.attribute { color : #FF5000; background-color : inherit; }
.character { color : #0055AA; background-color : inherit; }
.syntaxerror { color : #FF0000; background-color : inherit; }
.diff-deleted { color : #5F2121; background-color : inherit; }
.diff-added { color : #215F21; background-color : inherit; }
span.paren1 { background-color : inherit; -webkit-transition: background-color 0.2s linear; }
span.paren1:hover { color : inherit; background-color : #BAFFFF; }
span.paren2 { background-color : inherit; -webkit-transition: background-color 0.2s linear; }
span.paren2:hover { color : inherit; background-color : #FFCACA; }
span.paren3 { background-color : inherit; -webkit-transition: background-color 0.2s linear; }
span.paren3:hover { color : inherit; background-color : #FFFFBA; }
span.paren4 { background-color : inherit; -webkit-transition: background-color 0.2s linear; }
span.paren4:hover { color : inherit; background-color : #CACAFF; }
span.paren5 { background-color : inherit; -webkit-transition: background-color 0.2s linear; }
span.paren5:hover { color : inherit; background-color : #CAFFCA; }
span.paren6 { background-color : inherit; -webkit-transition: background-color 0.2s linear; }
span.paren6:hover { color : inherit; background-color : #FFBAFF; }


@media (min-width: 768px) {
  body {
    margin: 0 auto;
    max-width: 700px;
  }

  header { flex-flow: row nowrap; }
  header #menu { display: none; }
  header ul { display: flex; flex-direction: row; width: auto; padding-right: 1em; }
  header li { text-align: left; }
}