/** 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: 400 18px/1.5 "Crimson Text", "Baskerville", serif; color: #333; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; background-color: #fdfdfd; -webkit-font-smoothing: antialiased; }

@media screen and (max-width: 600px) { body { font: 400 16px/1.5 "Crimson Text", "Baskerville", serif; } }
/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 20px; }

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

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

figcaption { font-size: 15.75px; }

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

ul li, ol li { line-height: 1.4; margin-bottom: 5px; }

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

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

h1 { font-size: 175%; }

h2 { font-size: 150%; }

h3 { font-size: 125%; }

h4 { font-size: 100%; }

/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #333; text-decoration: underline; }

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

/** Code formatting */
pre, code { font-family: "Ubuntu Mono", monospace; font-size: 16px; line-height: 1.3; }

p > code { white-space: nowrap; }

pre { padding: 10px 20px; overflow-x: auto; line-height: 1.4; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

@media screen and (max-width: 600px) { pre { padding: 10px 0; }
  pre, code { font-size: 14px; } }
/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (40px * 2)); max-width: calc(800px - (40px * 2)); margin-right: auto; margin-left: auto; padding-right: 40px; padding-left: 40px; }
@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (40px)); max-width: calc(800px - (40px)); padding-right: 20px; padding-left: 20px; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.icon > svg path { fill: #828282; }

/** Site header */
.site-header { border-bottom: 1px solid #e8e8e8; height: 56px; position: relative; }
.site-header .wrapper { height: 56px; }

.logo { /*flex: 0 0 auto;*/ display: inline-block; float: left; width: 48px; height: 56px; margin-right: 10px; background-image: url("/img/oden-logo.png"); background-size: 48px 40px; background-repeat: no-repeat; background-position: center center; }

.site-title { display: inline-block; float: left; font-size: 22px; line-height: 36px; font-weight: normal; letter-spacing: -1px; margin: 0; padding: 10px; }
.site-title, .site-title:visited, .site-title a, .site-title a:visited { color: #424242; }
@media screen and (-webkit-min-device-pixel-ratio: 2) { .site-title .site-title { background-image: url("/img/oden-logo@2x.png"); } }
@media screen and (-webkit-min-device-pixel-ratio: 3) { .site-title .site-title { background-image: url("/img/oden-logo@3x.png"); } }

@media screen and (max-width: 800px) { .site-header .wrapper { padding: 0 10px; }
  .site-title { font-size: 20px; } }
@media screen and (max-width: 600px) { .site-title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 10px 66px; font-size: 18px; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } }
.site-nav { display: inline-block; height: 56px; float: right; }
.site-nav .menu-icon { display: none; }
.site-nav .page-link { color: #333; line-height: 56px; }
.site-nav .page-link:not(:last-child) { margin-right: 20px; }
@media screen and (max-width: 600px) { .site-nav { position: relative; height: 36px; margin: 10px 0; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
  .site-nav .menu-icon > svg { position: relative; width: 18px; height: 15px; z-index: 2; }
  .site-nav .menu-icon > svg path { fill: #424242; }
  .site-nav .trigger { position: absolute; top: -1px; right: -1px; clear: both; display: none; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; padding-top: 36px; }
  .site-nav:hover .trigger { display: block; padding-bottom: 5px; }
  .site-nav .page-link { display: block; padding: 5px 10px; white-space: nowrap; margin-left: 20px; }
  .site-nav .page-link:not(:last-child) { margin-right: 0; } }

/** Site footer */
.site-footer { border-top: 1px solid #e8e8e8; padding: 40px 0; font-size: 14px; }
.site-footer .username { font-family: "Ubuntu Mono", monospace; }

.social-media-list { display: inline-block; width: 50%; float: right; padding: 0; list-style: none; margin: 0; text-align: right; }

.copyright { display: inline-block; width: 50%; float: left; color: #828282; line-height: 30px; }

@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (40px / 2)); width: calc(50% - (40px / 2)); }
  .footer-col-3 { width: -webkit-calc(100% - (40px / 2)); width: calc(100% - (40px / 2)); } }
@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (40px / 2)); width: calc(100% - (40px / 2)); } }
/** Page content */
.page-content { padding: 40px 0; }

.page-heading { font-size: 20px; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 40px; }
.post-list > li h2 { margin-bottom: 10px; }
.post-list .post-excerpt { color: #828282; margin-bottom: 10px; }

.post-meta { font-size: 15.75px; color: #828282; font-weight: 500; }

.post-link { display: block; font-size: 24px; }

.post-actions { float: right; font-size: 15.75px; }
.post-actions a { margin-left: 40px; }

/** Posts */
.post-header { margin-bottom: 40px; }
.post-header .post-excerpt { font-size: 22.5px; font-style: italic; color: #828282; }

.post-title { font-size: 175%; line-height: 1; }
@media screen and (max-width: 800px) { .post-title { font-size: 28px; } }

.post-content { margin-bottom: 40px; }

.playground-runnable { position: relative; }

.playground-runnable nav { position: absolute; top: 0; right: 0; display: block; }

.playground-runnable nav form { display: inline-block; }

.playground-runnable nav button, .playground-runnable nav input { display: inline-block; background: #ddd; padding: 5px 15px; margin-left: 5px; border: none; border-radius: 0; cursor: pointer; font-family: "Ubuntu Mono", monospace; font-size: 16px; }

.playground-runnable .run:hover, .playground-runnable .run:focus, .playground-runnable .run:active { background: #ccc; }

.playground-runnable .output { background-color: #eee; margin-bottom: 40px; }

.playground-runnable .output.hidden { display: none; }

.playground-runnable .output.error { font-size: 13px; color: #dd1144; background-color: #FBE2E8; }

@keyframes blink { 50% { color: transparent; } }
.loader .dot { animation: 1s blink infinite; }

.loader .dot:nth-child(2) { animation-delay: 250ms; }

.loader .dot:nth-child(3) { animation-delay: 500ms; }

/** Start Page */
.start.wrapper .description { font-size: 200%; margin: 80px 0 40px; text-align: center; font-weight: 300; }
.start.wrapper .disclaimer { display: block; margin-top: 40px; color: red; }

.quick-links { text-align: center; margin: 0 0 80px; }

.quick-links a { display: inline-block; background: #ddd; padding: 5px 15px; min-width: 4em; cursor: pointer; font-family: "Ubuntu Mono", monospace; font-size: 22px; color: #fff; background: #2a7ae2; text-decoration: none; }
.quick-links a:focus, .quick-links a:hover { background: #1756a9; }

@media screen and (max-width: 600px) { .start.wrapper .features { -webkit-flex: 0 0 100%; flex: 0 0 100%; }
  .start.wrapper > .playground-runnable, .start.wrapper > figure { -webkit-flex: 0 0 100%; flex: 0 0 100%; margin-top: 40px; } }
/* GitHub style for Pygments syntax highlighter, for use with Jekyll Courtesy of GitHub.com */
.highlight .c { color: #999988; font-style: italic; }

.highlight .k { color: #075088; }

.highlight .o { color: #8400a3; }

.highlight .cm { color: #999988; font-style: italic; }

.highlight .cp { color: #999999; font-weight: bold; }

.highlight .c1 { color: #999988; font-style: italic; }

.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000000; background-color: #ffdddd; }

.highlight .gd .x { color: #000000; background-color: #ffaaaa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #aa0000; }

.highlight .gh { color: #999999; }

.highlight .gi { color: #000000; background-color: #ddffdd; }

.highlight .gi .x { color: #000000; background-color: #aaffaa; }

.highlight .go { color: #888888; }

.highlight .gp { color: #555555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #800080; font-weight: bold; }

.highlight .gt { color: #aa0000; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kn { color: #075088; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #075088; }

.highlight .m { color: #009999; }

.highlight .s { color: #dd1144; }

.highlight .n { color: #333333; }

.highlight .na { color: teal; }

.highlight .nb { color: #0086b3; }

.highlight .nc { color: #445588; font-weight: bold; }

.highlight .no { color: teal; }

.highlight .ni { color: purple; }

.highlight .ne { color: #990000; font-weight: bold; }

.highlight .nf { color: #990000; font-weight: bold; }

.highlight .nn { color: #555555; }

.highlight .nt { color: navy; }

.highlight .nv { color: teal; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbbbbb; }

.highlight .mf { color: #009999; }

.highlight .mh { color: #009999; }

.highlight .mi { color: #009999; }

.highlight .mo { color: #009999; }

.highlight .sb { color: #dd1144; }

.highlight .sc { color: #dd1144; }

.highlight .sd { color: #dd1144; }

.highlight .s2 { color: #dd1144; }

.highlight .se { color: #dd1144; }

.highlight .sh { color: #dd1144; }

.highlight .si { color: #dd1144; }

.highlight .sx { color: #dd1144; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #dd1144; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999999; }

.highlight .vc { color: teal; }

.highlight .vg { color: teal; }

.highlight .vi { color: teal; }

.highlight .il { color: #009999; }

.highlight .gc { color: #999; background-color: #EAF2F5; }