/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #555; background-color: #fff; }

/** Set `margin-bottom` to maintain vertycal rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 24px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 24px; }

li > ul, li > ol { margin-bottom: 0; }

/** Links */
a { color: #88297c; text-decoration: underline; }
a:hover { color: #4d1746; text-decoration: none; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 12px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #f3f4f0; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: scroll; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

.centered, .page-content { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

.page-content { padding-top: 72px; padding-bottom: 48px; }

.post, .posts { max-width: 640px; margin-left: auto; margin-right: auto; }

.muted { opacity: .6; }

/** Clearfix */
.main-nav .centered:after, .main-nav .page-content:after { content: ""; display: table; clear: both; }

.main-nav__ribbon a, .main-nav__ribbon a:hover { background: #88297c; color: #fff; font-weight: 300; text-transform: uppercase; display: inline-block; }
.main-nav__ribbon a strong, .main-nav__ribbon a:hover strong { font-weight: 700; }
.main-nav__ribbon a a, .main-nav__ribbon a:hover a { color: #fff; }

/* calculates line-height so that it fits the vertical rhythm */
h1, .alpha { font-size: 40px; line-height: 1.0125; font-weight: 300; }

h2, .beta { font-size: 32px; line-height: 1.03125; color: #88297c; font-weight: normal; }

h3, .gamma { font-size: 24px; line-height: 1; font-weight: normal; }

h4, .delta { font-size: 20px; line-height: 1.05; }

h5, .epsilon { font-size: 16px; line-height: 1.03125; }

h6, .zeta { font-size: 14px; line-height: 1.07143; }

hgroup .hN { margin-bottom: 0; }

.giga { font-size: 96px; line-height: 1; }

.mega { font-size: 72px; line-height: 1; }

.kilo { font-size: 48px; line-height: 1; }

.lead { font-size: 20px; }

/* ================================================= NAV
================================================= */
.nav--inline, .main-nav__actions { margin-left: -24px; }
.nav--inline li, .main-nav__actions li { display: inline-block; }
.nav--inline a, .main-nav__actions a { margin-left: 24px; display: inline-block; }

.nav--block { margin-left: 0; }
.nav--block li { display: block; }
.nav--block a { display: block; }

.main-nav { border-bottom: 1px solid #e8e8e8; }

.main-nav__ribbon { display: inline-block; font-size: 24px; line-height: 1; margin-bottom: -4px; }
.main-nav__ribbon a, .main-nav__ribbon a:hover { text-decoration: none; padding: 24px; margin-left: -24px; border-radius: 0 0 4px 4px; }

.main-nav__actions { float: right; line-height: 1; margin-bottom: 0; }
.main-nav__actions a { padding: 30px 0 18px; font-weight: bold; color: #7b7b7b; text-decoration: none; }
.main-nav__actions a:hover { color: #88297c; }

@media screen and (max-width: 600px) { .main-nav__actions { float: none; }
  .main-nav { text-align: center; }
  .main-nav__ribbon a, .main-nav__ribbon a:hover, .main-nav__ribbon { display: block; width: 100%; border-radius: 0; } }
/* ================================================= FOOTER
================================================= */
.main-footer { padding-top: 24px; border-top: 1px solid #e8e8e8; text-align: center; }
.main-footer a { color: #6f6f6f; text-decoration: none; }
.main-footer a:hover { color: #3c3c3c; }

/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

.post { margin-bottom: 48px; }

.post__title, .post__time, .post__figure { display: block; text-align: center; }

.post__title { color: #88297c; }
.post__title a { text-decoration: none; }

.post__figure img { max-height: 240px; }

.post__excerpt p { display: inline; }