/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "capricho";
  src: url("https://cdn.benjohnson.ca/fonts/capricho-regular/capricho-regular-webfont.woff2") format("woff2"), url("https://cdn.benjohnson.ca/fonts/capricho-regular/capricho-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "capricho";
  src: url("https://cdn.benjohnson.ca/fonts/capricho-bold/capricho-bold-webfont.woff2") format("woff2"), url("https://cdn.benjohnson.ca/fonts/capricho-bold/capricho-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "capricho";
  src: url("https://cdn.benjohnson.ca/fonts/capricho-bolditalic/capricho-bolditalic-webfont.woff2") format("woff2"), url("https://cdn.benjohnson.ca/fonts/capricho-bolditalic/capricho-bolditalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "capricho";
  src: url("https://cdn.benjohnson.ca/fonts/capricho-italic/capricho-italic-webfont.woff2") format("woff2"), url("https://cdn.benjohnson.ca/fonts/capricho-italic/capricho-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
:root {
  --base: rgb(250, 244, 237);
  --surface: rgb(255 250 243);
  --overlay: rgb(242 233 222);
  --text: rgb(87 82 121);
  --subtle: rgb(121 117 147);
  --muted: rgb(152 147 165);
  --love: rgb(180, 99, 122);
  --love-muted: rgba(180, 99, 122, 0.3);
  --gold: rgb(234, 157, 52);
  --gold-muted: rgba(234, 157, 52, 0.3);
  --rose: rgb(215 130 126);
  --pine: rgb(40 105 131);
  --foam: rgb(86 148 159);
  --foam-muted: rgba(86, 148, 159, 0.3);
  --iris: rgb(144 122 169);
  --highlight-low: rgb(244 237 232);
  --highlight-med: rgb(223 218 217);
  --highlight-high: rgb(206 202 205);
  --desktop-width: 750px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: rgb(35, 33, 54);
    --surface: rgb(31, 29, 46);
    --overlay: rgb(38, 35, 58);
    --text: rgb(224, 222, 244);
    --subtle: rgb(144, 140, 170);
    --muted: rgb(110, 106, 134);
    --love: rgb(235, 111, 146);
    --love-muted: rgba(235, 111, 146, 0.3);
    --gold: rgb(246, 193, 119);
    --gold-muted: rgba(246, 193, 119, 0.3);
    --rose: rgb(235, 188, 186);
    --pine: rgb(49, 116, 143);
    --foam: rgb(156, 207, 216);
    --foam-muted: rgba(156, 207, 216, 0.3);
    --iris: rgb(196, 167, 231);
    --highlight-low: rgb(33, 32, 46);
    --highlight-med: rgb(64, 61, 82);
    --highlight-high: rgb(82, 79, 103);
  }
}
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  color: var(--text);
  font-family: "capricho", serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 34px;
  max-width: 750px;
  background: var(--base) url("https://cdn.benjohnson.ca/img/lines2.png") repeat-x;
  background-size: 200px 60px;
  margin-bottom: 10rem;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image: url("https://cdn.benjohnson.ca/img/lines2-dark.png");
  }
}
@media only screen and (min-width: 750px) {
  body {
    margin-left: 1rem;
  }
}
@media only screen and (min-width: 850px) {
  body {
    margin-left: 5rem;
  }
}
a {
  color: var(--love);
  border-bottom: 1px solid var(--love-muted);
  text-decoration: none;
}

a:hover {
  border-bottom-color: var(--love);
}

body.loaded a {
  transition: border-bottom-color 0.3s;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 1.2rem;
}

h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: bold;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
}

h3 {
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: bold;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
}

p {
  margin-bottom: 1.2rem;
}

p:last-child {
  margin-bottom: 0;
}

blockquote {
  border-left: 4px solid var(--pine);
  padding-left: 1.2rem;
  margin-bottom: 1.2rem;
}

code {
  font-size: 1rem;
  font-family: monospace;
  background-color: var(--highlight-low);
  border-radius: 5px;
  overflow-x: auto;
}

pre > code {
  background-color: var(--highlight-low);
  padding: 15px;
  display: block;
  margin-bottom: 1.2rem;
}

i,
em {
  font-style: italic;
}

b,
strong {
  font-weight: bold;
}

ul, ol {
  margin-bottom: 1.2rem;
}

ul li {
  list-style-type: disc;
  margin-left: 2rem;
}

ol li {
  list-style-type: decimal;
  margin-left: 2rem;
}

.h-entry img {
  max-width: 100%;
  height: auto;
}

.about-photo {
  float: left;
  margin-right: 1.2rem;
  border-radius: 5px;
}

.masthead {
  font-kerning: auto;
  margin-top: 8rem;
  margin-bottom: 5rem;
  margin-left: 1.2rem;
  margin-right: 1.2rem;
}

@media only screen and (min-width: 750px) {
  .masthead {
    margin-left: 0;
    margin-right: 0;
  }
}
.masthead h1 {
  color: var(--foam);
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.masthead h1 a {
  color: var(--foam);
  border-bottom-color: var(--foam-muted);
}

.masthead h1 a:hover {
  border-bottom-color: var(--foammuted);
}

.masthead h2 {
  color: var(--foam);
  font-size: 1.5rem;
  font-weight: normal;
  font-style: italic;
  margin: 0;
}

.masthead-nav {
  margin-top: 1rem;
  color: var(--gold);
}

.masthead-nav a {
  font-weight: bold;
  color: var(--gold);
  border-bottom-color: var(--gold-muted);
}

.masthead-nav a:hover {
  border-bottom-color: var(--gold);
}

.masthead-nav-divider {
  margin: 0 5px;
}

.longpost {
  border-bottom: 2px solid var(--gold);
  padding: 2rem 1rem;
  background-color: var(--highlight-low);
}

.longpost:first-child {
  border-top: 2px solid var(--gold);
}

@media only screen and (min-width: 750px) {
  .longpost {
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 10px;
    border: 2px solid var(--gold);
  }
}
.longpost-title {
  margin-bottom: 2rem;
}

.longpost-title h1 {
  margin-bottom: 1rem;
}

.longpost-title h1 a,
a.longpost-continue-reading {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: bold;
}

a.longpost-continue-reading:hover {
  border-bottom-color: var(--gold);
}

.longpost-title time {
  font-style: italic;
}

.shortpost {
  background: var(--surface);
  padding: 2rem 1rem;
  border-bottom: 2px solid var(--highlight-med);
}

.shortpost:first-child {
  border-top: 2px solid var(--highlight-med);
}

@media only screen and (min-width: 750px) {
  .shortpost {
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 10px;
    border: 2px solid var(--highlight-med);
  }
}
.shortpost-date {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
}

.shortpost-inner p:last-child {
  margin-bottom: 0;
}

.shortpost-footer {
  margin-top: 1.2rem;
}

.single {
  margin-left: 1.2rem;
  margin-right: 1.2rem;
}

.single-title {
  margin-bottom: 2rem;
}

.single-title h1 {
  margin-bottom: 0;
}

.single-title time {
  font-style: italic;
}

.pagination {
  display: flex;
  margin-top: 3rem;
}

a.pagination-link {
  border: 2px solid var(--love);
  border-radius: 3px;
  margin-right: 1rem;
  padding: 0 10px;
  background-color: var(--highlight-low);
}

a.pagination-link:hover {
  background-color: var(--highlight-med);
}

/* Background */
.chroma {
  background-color: #ffffff;
}

/* Other */
/* Error */
.chroma .err {
  background-color: #a848a8;
}

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
}

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
  overflow: auto;
  display: block;
}

/* LineHighlight */
.chroma .hl {
  display: block;
  width: 100%;
  background-color: #ffffcc;
}

/* LineNumbersTable */
.chroma .lnt {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f;
}

/* LineNumbers */
.chroma .ln {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f;
}

/* Keyword */
.chroma .k {
  color: #2838b0;
}

/* KeywordConstant */
.chroma .kc {
  color: #444444;
  font-style: italic;
}

/* KeywordDeclaration */
.chroma .kd {
  color: #2838b0;
  font-style: italic;
}

/* KeywordNamespace */
.chroma .kn {
  color: #2838b0;
}

/* KeywordPseudo */
.chroma .kp {
  color: #2838b0;
}

/* KeywordReserved */
.chroma .kr {
  color: #2838b0;
}

/* KeywordType */
.chroma .kt {
  color: #2838b0;
  font-style: italic;
}

/* Name */
/* NameAttribute */
.chroma .na {
  color: #388038;
}

/* NameBuiltin */
.chroma .nb {
  color: #388038;
}

/* NameBuiltinPseudo */
.chroma .bp {
  font-style: italic;
}

/* NameClass */
.chroma .nc {
  color: #287088;
}

/* NameConstant */
.chroma .no {
  color: #b85820;
}

/* NameDecorator */
.chroma .nd {
  color: #287088;
}

/* NameEntity */
.chroma .ni {
  color: #709030;
}

/* NameException */
.chroma .ne {
  color: #908828;
}

/* NameFunction */
.chroma .nf {
  color: #785840;
}

/* NameFunctionMagic */
.chroma .fm {
  color: #b85820;
}

/* NameLabel */
.chroma .nl {
  color: #289870;
}

/* NameNamespace */
.chroma .nn {
  color: #289870;
}

/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .nt {
  color: #2838b0;
}

/* NameVariable */
.chroma .nv {
  color: #b04040;
}

/* NameVariableClass */
/* NameVariableGlobal */
.chroma .vg {
  color: #908828;
}

/* NameVariableInstance */
/* NameVariableMagic */
.chroma .vm {
  color: #b85820;
}

/* Literal */
/* LiteralDate */
/* LiteralString */
.chroma .s {
  color: #b83838;
}

/* LiteralStringAffix */
.chroma .sa {
  color: #444444;
}

/* LiteralStringBacktick */
.chroma .sb {
  color: #b83838;
}

/* LiteralStringChar */
.chroma .sc {
  color: #a848a8;
}

/* LiteralStringDelimiter */
.chroma .dl {
  color: #b85820;
}

/* LiteralStringDoc */
.chroma .sd {
  color: #b85820;
  font-style: italic;
}

/* LiteralStringDouble */
.chroma .s2 {
  color: #b83838;
}

/* LiteralStringEscape */
.chroma .se {
  color: #709030;
}

/* LiteralStringHeredoc */
.chroma .sh {
  color: #b83838;
}

/* LiteralStringInterpol */
.chroma .si {
  color: #b83838;
  text-decoration: underline;
}

/* LiteralStringOther */
.chroma .sx {
  color: #a848a8;
}

/* LiteralStringRegex */
.chroma .sr {
  color: #a848a8;
}

/* LiteralStringSingle */
.chroma .s1 {
  color: #b83838;
}

/* LiteralStringSymbol */
.chroma .ss {
  color: #b83838;
}

/* LiteralNumber */
.chroma .m {
  color: #444444;
}

/* LiteralNumberBin */
.chroma .mb {
  color: #444444;
}

/* LiteralNumberFloat */
.chroma .mf {
  color: #444444;
}

/* LiteralNumberHex */
.chroma .mh {
  color: #444444;
}

/* LiteralNumberInteger */
.chroma .mi {
  color: #444444;
}

/* LiteralNumberIntegerLong */
.chroma .il {
  color: #444444;
}

/* LiteralNumberOct */
.chroma .mo {
  color: #444444;
}

/* Operator */
.chroma .o {
  color: #666666;
}

/* OperatorWord */
.chroma .ow {
  color: #a848a8;
}

/* Punctuation */
.chroma .p {
  color: #888888;
}

/* Comment */
.chroma .c {
  color: #888888;
  font-style: italic;
}

/* CommentHashbang */
.chroma .ch {
  color: #287088;
  font-style: italic;
}

/* CommentMultiline */
.chroma .cm {
  color: #888888;
  font-style: italic;
}

/* CommentSingle */
.chroma .c1 {
  color: #888888;
  font-style: italic;
}

/* CommentSpecial */
.chroma .cs {
  color: #888888;
  font-style: italic;
}

/* CommentPreproc */
.chroma .cp {
  color: #289870;
}

/* CommentPreprocFile */
.chroma .cpf {
  color: #289870;
}

/* Generic */
/* GenericDeleted */
.chroma .gd {
  color: #c02828;
}

/* GenericEmph */
.chroma .ge {
  font-style: italic;
}

/* GenericError */
.chroma .gr {
  color: #c02828;
}

/* GenericHeading */
.chroma .gh {
  color: #666666;
}

/* GenericInserted */
.chroma .gi {
  color: #388038;
}

/* GenericOutput */
.chroma .go {
  color: #666666;
}

/* GenericPrompt */
.chroma .gp {
  color: #444444;
}

/* GenericStrong */
.chroma .gs {
  font-weight: bold;
}

/* GenericSubheading */
.chroma .gu {
  color: #444444;
}

/* GenericTraceback */
.chroma .gt {
  color: #2838b0;
}

/* GenericUnderline */
.chroma .gl {
  text-decoration: underline;
}

/* TextWhitespace */
.chroma .w {
  color: #a89028;
}

@media (prefers-color-scheme: dark) {
  /* Background */
  .chroma {
    color: #e7e9db;
    background-color: #2f1e2e;
  }
  /* Other */
  /* Error */
  .chroma .err {
    color: #ef6155;
  }
  /* LineTableTD */
  .chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
  }
  /* LineTable */
  .chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    overflow: auto;
    display: block;
  }
  /* LineHighlight */
  .chroma .hl {
    display: block;
    width: 100%;
    background-color: #ffffcc;
  }
  /* LineNumbersTable */
  .chroma .lnt {
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }
  /* LineNumbers */
  .chroma .ln {
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }
  /* Keyword */
  .chroma .k {
    color: #815ba4;
  }
  /* KeywordConstant */
  .chroma .kc {
    color: #815ba4;
  }
  /* KeywordDeclaration */
  .chroma .kd {
    color: #815ba4;
  }
  /* KeywordNamespace */
  .chroma .kn {
    color: #5bc4bf;
  }
  /* KeywordPseudo */
  .chroma .kp {
    color: #815ba4;
  }
  /* KeywordReserved */
  .chroma .kr {
    color: #815ba4;
  }
  /* KeywordType */
  .chroma .kt {
    color: #fec418;
  }
  /* Name */
  /* NameAttribute */
  .chroma .na {
    color: #06b6ef;
  }
  /* NameBuiltin */
  /* NameBuiltinPseudo */
  /* NameClass */
  .chroma .nc {
    color: #fec418;
  }
  /* NameConstant */
  .chroma .no {
    color: #ef6155;
  }
  /* NameDecorator */
  .chroma .nd {
    color: #5bc4bf;
  }
  /* NameEntity */
  /* NameException */
  .chroma .ne {
    color: #ef6155;
  }
  /* NameFunction */
  .chroma .nf {
    color: #06b6ef;
  }
  /* NameFunctionMagic */
  /* NameLabel */
  /* NameNamespace */
  .chroma .nn {
    color: #fec418;
  }
  /* NameOther */
  .chroma .nx {
    color: #06b6ef;
  }
  /* NameProperty */
  /* NameTag */
  .chroma .nt {
    color: #5bc4bf;
  }
  /* NameVariable */
  .chroma .nv {
    color: #ef6155;
  }
  /* NameVariableClass */
  /* NameVariableGlobal */
  /* NameVariableInstance */
  /* NameVariableMagic */
  /* Literal */
  .chroma .l {
    color: #f99b15;
  }
  /* LiteralDate */
  .chroma .ld {
    color: #48b685;
  }
  /* LiteralString */
  .chroma .s {
    color: #48b685;
  }
  /* LiteralStringAffix */
  .chroma .sa {
    color: #48b685;
  }
  /* LiteralStringBacktick */
  .chroma .sb {
    color: #48b685;
  }
  /* LiteralStringChar */
  /* LiteralStringDelimiter */
  .chroma .dl {
    color: #48b685;
  }
  /* LiteralStringDoc */
  .chroma .sd {
    color: #776e71;
  }
  /* LiteralStringDouble */
  .chroma .s2 {
    color: #48b685;
  }
  /* LiteralStringEscape */
  .chroma .se {
    color: #f99b15;
  }
  /* LiteralStringHeredoc */
  .chroma .sh {
    color: #48b685;
  }
  /* LiteralStringInterpol */
  .chroma .si {
    color: #f99b15;
  }
  /* LiteralStringOther */
  .chroma .sx {
    color: #48b685;
  }
  /* LiteralStringRegex */
  .chroma .sr {
    color: #48b685;
  }
  /* LiteralStringSingle */
  .chroma .s1 {
    color: #48b685;
  }
  /* LiteralStringSymbol */
  .chroma .ss {
    color: #48b685;
  }
  /* LiteralNumber */
  .chroma .m {
    color: #f99b15;
  }
  /* LiteralNumberBin */
  .chroma .mb {
    color: #f99b15;
  }
  /* LiteralNumberFloat */
  .chroma .mf {
    color: #f99b15;
  }
  /* LiteralNumberHex */
  .chroma .mh {
    color: #f99b15;
  }
  /* LiteralNumberInteger */
  .chroma .mi {
    color: #f99b15;
  }
  /* LiteralNumberIntegerLong */
  .chroma .il {
    color: #f99b15;
  }
  /* LiteralNumberOct */
  .chroma .mo {
    color: #f99b15;
  }
  /* Operator */
  .chroma .o {
    color: #5bc4bf;
  }
  /* OperatorWord */
  .chroma .ow {
    color: #5bc4bf;
  }
  /* Punctuation */
  /* Comment */
  .chroma .c {
    color: #776e71;
  }
  /* CommentHashbang */
  .chroma .ch {
    color: #776e71;
  }
  /* CommentMultiline */
  .chroma .cm {
    color: #776e71;
  }
  /* CommentSingle */
  .chroma .c1 {
    color: #776e71;
  }
  /* CommentSpecial */
  .chroma .cs {
    color: #776e71;
  }
  /* CommentPreproc */
  .chroma .cp {
    color: #776e71;
  }
  /* CommentPreprocFile */
  .chroma .cpf {
    color: #776e71;
  }
  /* Generic */
  /* GenericDeleted */
  .chroma .gd {
    color: #ef6155;
  }
  /* GenericEmph */
  .chroma .ge {
    font-style: italic;
  }
  /* GenericError */
  /* GenericHeading */
  .chroma .gh {
    font-weight: bold;
  }
  /* GenericInserted */
  .chroma .gi {
    color: #48b685;
  }
  /* GenericOutput */
  /* GenericPrompt */
  .chroma .gp {
    color: #776e71;
    font-weight: bold;
  }
  /* GenericStrong */
  .chroma .gs {
    font-weight: bold;
  }
  /* GenericSubheading */
  .chroma .gu {
    color: #5bc4bf;
    font-weight: bold;
  }
  /* GenericTraceback */
  /* GenericUnderline */
  /* TextWhitespace */
}
.microblog_conversation .microblog_post {
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--highlight-med);
}

.microblog_avatar {
  border-radius: 50px;
}