h1, h2, h3, h4, h5, h6, p, body, a, img, ul, ol, blockquote, pre {
  margin: 0; padding: 0; border: 0;
}

body, a {
  color: #171717;
}

/* sizing and scale thanks to Jason Pamental and typecast */
body {
  font-family: 'Catamaran', serif;
  background-color: #f8f8f8;
  text-rendering: optimizeLegibility;
  font-size: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}

.content-wrap {
  margin: 0 auto;
  width: auto;
  padding: 0 1em;
}

.content-wrap svg {
  width: auto;
}

/* Body Content */
.content {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */
}

h1 {
  font-size: 2em;
  font-weight: 700;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}

h2 {
  font-size: 1.625em;
  font-weight: 400;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
  margin-bottom: 1.35em;
}

h3 {
  font-size: 1.375em;
  font-weight: 400;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
  margin-bottom: 1em;
}

h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
  margin-bottom: 0.8em;
}

/* tablet */
@media (min-width: 43.75em) {
  .content {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */
  }

  .content-wrap {
    width: 32em;
  }

  .content-wrap svg {
    width: 42em;
    margin-left: -5em;
  }

  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }

  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }

  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }

  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }
}

/* full size */
@media (min-width: 56.25em) {
  .content-wrap {
    width: 42em;
  }

  .content-wrap svg {
    width: 52em;
    margin-left: -5em;
  }

  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height 
    and something more appropriate for display headings */
  }

  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }

  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
  }
}

a:hover {
  color: #ff8000;
  text-decoration: underline;
}

header a {
  text-decoration: none;
}

p {
  margin-bottom: 1.52em;
}

hr {
  border: 0;
  border-top: 1px dashed #d2d2d2;
  height: 0;
  margin-top: 1.6em;
}

ol, ul {
  margin: 0 1.4em 1.4em 2.8em;
}

li {
  margin-bottom: 0.5em;
}

blockquote {
  margin: 1.2em 3em;
  padding-left: 1em;
  font-style: italic;
}

header {
  margin: 1.5em 0 3.75em 0;
}

header .content-wrap {
  position: relative;
}

header .content-wrap .logo {
  display: inline-block;
  vertical-align: top;
}

header .content-wrap .nav-bar {
  display: inline-block;
}

.article {
  margin: 0 0 3.75em 0;
}

.article .title {
  margin: 1.25em 0 2em 0;
  padding-top: 1em;
  border-top: 1px dashed #d2d2d2;
}

.article .title a {
  text-decoration: none;
}

.article .title h2 {
  margin-bottom: 0;
}

.article .excerpt p {
  display: inline;
  font-size: 1.2em;
}

.article .withImage p {
  vertical-align: top;
  display: inline-block;
  width: 65%;
  margin-left: 5%;
}

.article .excerpt img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.article .withImage img {
  display: inline-block;
  width: 30%;
}

/* page footer */

footer {
  margin: 3em 0;
}

footer .about {
  border-top: 1px dashed #d2d2d2;
  padding: 1.2em 3em;
  font-size: 0.9em;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  -ms-column-gap: 2em;
  column-gap: 2em;
}

footer .about img {
  width: 1.8em;
}

footer .copy {
  text-align: center;
  font-size: 0.7em;
  font-style: italic;
  margin-top: 1em;
}

footer .copy, footer .copy a {
  color: #8e8e8e;
}

/* code styling */

pre {
  font-size: 0.9em;
  overflow: auto;
  background: #fff;
  border: 1px dashed #d2d2d2;
  border-radius: 0.25em;
  margin-bottom: 1.8em;
  padding: 1em;
}

code {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9em;
  color: #000;
}

pre code {
  display: block;
  line-height: 1.1;
}

p code {
  padding: 0.1em 0.3em 0.2em;
  border-radius: 0.3em;
  position: relative;
  background: #fffff3;

  white-space: nowrap;
}

/* syntax hl stuff */

code.lang-markdown {
  color: #424242;
}

code.lang-markdown .header,
code.lang-markdown .strong {
  font-weight: bold;
}

code.lang-markdown .emphasis {
  font-style: italic;
}

code.lang-markdown .horizontal_rule,
code.lang-markdown .link_label,
code.lang-markdown .code,
code.lang-markdown .header,
code.lang-markdown .link_url {
  color: #555;
}

code.lang-markdown .blockquote,
code.lang-markdown .bullet {
  color: #bbb;
}

/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
  color: #8e908c;
}

.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #c82829;
}

.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #f5871f;
}

.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #eab700;
}

.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #718c00;
}

.tomorrow-aqua, pre .css .hexcolor {
  color: #3e999f;
}

.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #4271ae;
}

.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #8959a8;
}