/* Emerald is a simple blog theme built for Jekyll. */
/*- Base reset -*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

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

/*- Base settings -*/
/* $main-color: #008A3C; */
html { background-color: #FDFDFD; font-size: 16px; line-height: 1.5; color: #222222; }
@media (min-width: 940px) { html { font-size: 18px; } }

/*- Link -*/
a { color: #008ACC; text-decoration: none; font-weight: 700; }
a:hover, a:focus { color: #0079b3; }

/*- Typography -*/
body { font-family: 'Source Sans Pro', sans-serif; letter-spacing: 0.01em; }

/*- Typography for medium and small screen, based on 16px font-size -*/
p { font-size: 1em; /* 16px */ line-height: 1.5em; /* 24px/16px */ margin-bottom: 1.5em; /* 24px/16px */ }

h1 { font-size: 2.25em; /* 36px/16px */ line-height: 1.3333em; /* 48px/36px */ padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }

h2 { font-size: 1.5em; /* 24px/16px */ line-height: 1em; /* 24px/24px */ padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */ }

h3, h4, h5, h6 { font-size: 1.125em; /* 18px/16px */ line-height: 1.3334em; /* 24px/18px */ padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }

blockquote { font-style: italic; margin: 1.5em; /* 24px/18px */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f0f0f0; padding: 0 1.5em; /* 24px/18px */ }
blockquote p { padding: 1.5em 0; /* 24px/18px */ }

/*- Typography for big screen, based on 18px font-size -*/
@media (min-width: 940px) { p { font-size: 1em; /* 18px */ line-height: 1.3334em; /* 24px/18px */ margin-bottom: 1.3334em; /* 24px/18px */ }
  h1 { font-size: 2.6667em; /* 48px/18px */ line-height: 1em; /* 48px/48px */ padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }
  h2 { font-size: 2em; /* 36px/18px */ line-height: 1.3334em; /* 48px/36px */ padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */ }
  h3, h4, h5, h6 { font-size: 1.3334em; /* 24px/18px */ line-height: 1em; /* 24px/24px */ padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }
  blockquote { font-style: italic; margin: 1.3334em; /* 24px/18px */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f0f0f0; padding: 0 1.33334em; /* 24px/18px */ }
  blockquote p { padding: 1.33334em 0; /* 24px/18px */ } }
/*- General Layout -*/
/* Navigation */
nav { width: 14rem; position: fixed; background-color: #008ACC; top: 0; bottom: 0; right: -14rem; color: #FDFDFD; opacity: 0.95; transition: all 0.3s ease-in; z-index: 1; padding: 72px 0; text-align: center; }
nav a { display: block; color: #FDFDFD; padding: 0.33334em 0; font-size: 1.5em; font-weight: 400; }
@media (min-width: 940px) { nav a { font-size: 1em; } }
nav a:hover { background-color: #009be6; }
nav span { font-weight: 200; }

nav.menu-open { transform: translateX(-14rem); width: 100%; }
@media (min-width: 940px) { nav.menu-open { width: 30%; } }

#nav-list:after { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: #FDFDFD; }

#nav-menu { display: block; position: absolute; top: 35px; right: 25px; z-index: 10; height: 24px; }

/* Icon menu */
#menu { height: 4px; width: 1.5em; background-color: #7b7b7b; margin-top: 8px; }
#menu:after, #menu:before { content: ""; display: block; position: relative; height: 4px; width: 1.5em; background-color: #7b7b7b; transition: all 0.3s ease-in; }
#menu:before { top: -8px; }
#menu:after { top: 4px; }
#menu.btn-close { background: none; }
#menu.btn-close:before { top: 0; transform: rotate(-45deg); background-color: #FDFDFD; }
#menu.btn-close:after { top: -4px; transform: rotate(45deg); background-color: #FDFDFD; }

/* Main content */
.fixed { position: fixed; }
@media (min-width: 940px) { .fixed { position: static; } }

#container { margin: 0 auto; max-width: 730px; padding: 0 1.5rem; }

#header { text-align: center; padding: 24px 0; position: relative; }
#header a { text-decoration: none; color: #222222; display: inline-block; }
#header img { max-height: 72px; margin: 0 auto; display: block; }
#header h1 { font-family: 'Signika', sans-serif; font-weight: 600; }
#header:after { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: #d5d5d5; }

/* Posts */
#posts li { list-style-type: none; }

#post-page { margin-bottom: 1.5em; }
@media (min-width: 940px) { #post-page { margin-bottom: 1.3334em; } }

.post + .post:before { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: #d5d5d5; }

.by-line { display: block; color: #626262; line-height: 1.5em; /* 24px/16px */ margin-bottom: 1.5em; /* 24px/16px */ font-weight: 200; }
@media (min-width: 940px) { .by-line { display: block; color: #626262; line-height: 1.3334em; /* 24px/18px */ margin-bottom: 1.3334em; /* 24px/18px */ font-weight: 200; } }

img { max-width: 100%; display: block; margin: 0 auto; margin-bottom: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

img[title="Emerald"] { box-shadow: 0 2px 6px #ddd; }

code { color: #7b7b7b; background-color: white; }

/* Set the vertical rhythm (and padding-left) for lists inside post content */
.content ul, .content ol { line-height: 1.5em; /* 24px/16px */ padding-left: 1.5em; }
@media (min-width: 940px) { .content ul, .content ol { line-height: 1.33334em; /* 24px/18px */ } }

/* Paginator */
.pagination { text-align: center; margin: 2.666668em; }
.pagination span { background-color: #f0f0f0; color: #222222; }
.pagination a:hover { background-color: #009be6; }

.page-item { background-color: #008ACC; color: #FDFDFD; padding: 4px 8px; font-weight: 400; padding: 0.5em 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/* Footer */
footer { background-color: #008ACC; color: #FDFDFD; text-align: center; padding: 0.6667em 0; }

@media print { body, article { width: 100%; margin: 0; padding: 0; }
  @page { margin: 2cm; }
  highlight, ul, img { page-break-inside: avoid; } }
/* A Github stylesheet to highlight code snippet https://github.com/mojombo/tpw/blob/master/css/syntax.css */
.lineno { color: #bdbdbd; margin-right: 1em; }

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

/* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2; }

/* Error */
.highlight .k { font-weight: bold; }

/* Keyword */
.highlight .o { font-weight: bold; }

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

/* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold; }

/* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic; }

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

/* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd; }

/* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa; }

/* Generic.Deleted.Specific */
.highlight .ge { font-style: italic; }

/* Generic.Emph */
.highlight .gr { color: #aa0000; }

/* Generic.Error */
.highlight .gh { color: #999999; }

/* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd; }

/* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa; }

/* Generic.Inserted.Specific */
.highlight .go { color: #888888; }

/* Generic.Output */
.highlight .gp { color: #555555; }

/* Generic.Prompt */
.highlight .gs { font-weight: bold; }

/* Generic.Strong */
.highlight .gu { color: #aaaaaa; }

/* Generic.Subheading */
.highlight .gt { color: #aa0000; }

/* Generic.Traceback */
.highlight .kc { font-weight: bold; }

/* Keyword.Constant */
.highlight .kd { font-weight: bold; }

/* Keyword.Declaration */
.highlight .kp { font-weight: bold; }

/* Keyword.Pseudo */
.highlight .kr { font-weight: bold; }

/* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold; }

/* Keyword.Type */
.highlight .m { color: #009999; }

/* Literal.Number */
.highlight .s { color: #d14; }

/* Literal.String */
.highlight .na { color: #008080; }

/* Name.Attribute */
.highlight .nb { color: #0086B3; }

/* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold; }

/* Name.Class */
.highlight .no { color: #008080; }

/* Name.Constant */
.highlight .ni { color: #800080; }

/* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold; }

/* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold; }

/* Name.Function */
.highlight .nn { color: #555555; }

/* Name.Namespace */
.highlight .nt { color: #000080; }

/* Name.Tag */
.highlight .nv { color: #008080; }

/* Name.Variable */
.highlight .ow { font-weight: bold; }

/* Operator.Word */
.highlight .w { color: #bbbbbb; }

/* Text.Whitespace */
.highlight .mf { color: #009999; }

/* Literal.Number.Float */
.highlight .mh { color: #009999; }

/* Literal.Number.Hex */
.highlight .mi { color: #009999; }

/* Literal.Number.Integer */
.highlight .mo { color: #009999; }

/* Literal.Number.Oct */
.highlight .sb { color: #d14; }

/* Literal.String.Backtick */
.highlight .sc { color: #d14; }

/* Literal.String.Char */
.highlight .sd { color: #d14; }

/* Literal.String.Doc */
.highlight .s2 { color: #d14; }

/* Literal.String.Double */
.highlight .se { color: #d14; }

/* Literal.String.Escape */
.highlight .sh { color: #d14; }

/* Literal.String.Heredoc */
.highlight .si { color: #d14; }

/* Literal.String.Interpol */
.highlight .sx { color: #d14; }

/* Literal.String.Other */
.highlight .sr { color: #009926; }

/* Literal.String.Regex */
.highlight .s1 { color: #d14; }

/* Literal.String.Single */
.highlight .ss { color: #990073; }

/* Literal.String.Symbol */
.highlight .bp { color: #999999; }

/* Name.Builtin.Pseudo */
.highlight .vc { color: #008080; }

/* Name.Variable.Class */
.highlight .vg { color: #008080; }

/* Name.Variable.Global */
.highlight .vi { color: #008080; }

/* Name.Variable.Instance */
.highlight .il { color: #009999; }

/* Literal.Number.Integer.Long */