/* Define colors */
/* General font settings & stuff */
body { font-family: 'Merriweather Sans', sans-serif; color: #333; font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; padding: 0px; margin: 0px; }

main { padding: 25px; margin: 10px; }
@media (min-width: 992px) { main { padding: 20px 30px; } }

h2 { margin: 45px 0px 25px; font-size: 20px; }

h3, h4, h5 { margin: 45px 0 25px; font-size: 18px; }

img { display: block; margin: 0px auto; max-width: 100%; }

a { color: #ff8f00; text-decoration: none; }
a:hover, a:focus { border-bottom: 1px dashed #555; }
a.image { display: block; text-align: center; border: 0; border-radius: 5px; margin: 30px 0; }
a.nav-link { color: #999; font-family: 'Julius Sans One', sans-serif; text-transform: lowercase; }
a.nav-link:hover, a.nav-link:focus { color: #ff8f00; border-bottom: none; }
a.mob-link { font-family: 'Julius Sans One', sans-serif; text-transform: lowercase; color: #fff; }
a.mob-link:hover, a.mob-link:focus { border-bottom: none; }

mark { background: #fffc76; padding: 0 5px; }

blockquote { border-left: 5px solid #ff8f00; color: #999; margin: 40px 0; padding: 2px 30px; }

span[data-note] { font-size: 0.8em; background: #c1c1c1; color: #fff; font-weight: 700; display: inline-block; padding: 0 12px; vertical-align: middle; line-height: 18px; cursor: pointer; margin: 0 2px; transition: background 0.3s; -webkit-transition: background 0.3s; -webkit-user-select: none; }
span[data-note].open { background: #838383; }
@media (min-width: 768px) { span[data-note] { vertical-align: 1px; } }
@media (min-width: 992px) { span[data-note]:hover { background: #838383; } }

footer { color: #999; text-align: center; font-size: 12px; padding: 40px; }

ul, ol { margin: 20px 0px; padding-left: 50px; font-size: 12px; }
ul li, ol li { word-wrap: break-word; padding: 10px 0px; }
ul img, ol img { margin: 40px 0; border-radius: 5px; }
ul.table-of-contents, ol.table-of-contents { list-style-type: none; margin: 0px; padding-left: 00px; }
ul.table-of-contents li, ol.table-of-contents li { padding: 0px 25px; }
ul.table-of-contents li a, ol.table-of-contents li a { display: block; padding: 2px 12px; }
ul.table-of-contents li a:hover, ol.table-of-contents li a:hover { background-color: #eee; border-bottom: none; }

/* Titles for posts, on the blog main page */
.post-title { padding-top: 12px; overflow: hidden; display: table; width: 100%; font-family: 'Julius Sans One', sans-serif; text-transform: lowercase; }

.post-link { display: table-cell; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: 'Julius Sans One', sans-serif; text-transform: uppercase; }
.post-link a { font-size: 14px; font-weight: bold; border-bottom: none; }

.post-date { display: table-cell; font-size: 14px; text-transform: lowercase; text-align: right; }

.post-excerpt { padding: 10px 0px 15px; font-size: 12px; }

@media (max-width: 769px) { .post-title { display: block; width: 100%; }
  .post-date { display: block; width: 100%; text-align: left; padding: 6px 0px; }
  .post-excerpt { padding: 10px 0px; } }
/* buttons */
.button { position: relative; display: block; margin-top: 1.5rem; margin-bottom: 0.5rem; text-align: center; border: 1px solid #cc7200; border-radius: 5px; background-color: #ff8f00; color: white; cursor: pointer; padding: 0.75rem 1.5rem; border-image: none; text-decoration: none; }
.button:hover, .button:focus { border-bottom: 1px solid #cc7200; background-color: #ffa533; }

/* prettify the top navigation menu */
.mobile-nav { display: none; }

.fullscreen-nav { width: 800px; height: 132px; display: block; padding: 60px 0px 10px; margin: 0px auto -12px; }

/*.hover-catcher { width: 130px; height: 130px; position: absolute; left: calc(50% - 66px); & .header-left, & .header-right { width: 0px; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; } &:hover { width: 600px; left: calc(50% - 301px); & .header-left { width: 200px; } & .header-right { width: 208px; } & .header-left, & .header-right { transition: all 1s; -webkit-transition: all 1s; } }
}*/
.logo { position: absolute; left: calc(50% - 60px); margin-top: 5px; }
.logo a { background: #ccc; height: 120px; width: 120px; border-radius: 100%; display: block; border: 3px solid #fff; box-sizing: border-box; }
.logo a:hover, .logo a:focus { background: #ff8f00; }
.logo a .gravatar { margin-top: 7px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

.header-left, .header-right { position: absolute; padding: 0px; overflow: hidden; width: 390px; }

.header-left { right: calc(50% + 64px); }

.header-right { left: calc(50% + 64px); }

ul.nav-left, ul.nav-right { list-style-type: none; white-space: nowrap; padding: 0px; overflow: hidden; margin: 54px 0px; }
ul.nav-left li, ul.nav-right li { display: inline; text-align: center; font-size: 18px; }

ul.nav-left li { padding: 8px 24px 8px 8px; }

ul.nav-right { direction: rtl; }
ul.nav-right li { padding: 8px 8px 8px 20px; }

/* Change menu style for small devices */
@media (max-width: 769px) { .fullscreen-nav { display: none; }
  .mobile-nav { display: flex; display: -webkit-flex; flex-direction: column; background: #ff8f00; animation: bg-fade 0.3s linear 0s 1; -webkit-animation: bg-fade 0.3s linear 0s 1; width: 100%; padding: 15px 0px 0px 0px; }
  .mob-logo { margin: 45px auto; }
  .mob-logo a { background: #f0f0f0; height: 94px; width: 94px; border-radius: 100%; display: block; border: 2px solid #ff8f00; box-sizing: border-box; }
  .mob-logo a:hover, .mob-logo a:focus { background: #fff; }
  .mob-logo a .gravatar { margin-top: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
  .menu-hide ul li { border: none; max-height: 0px; }
  .menu-show ul li { max-height: 36px; border: 1px solid #666; animation: height-expand 0.5s ease; -webkit-animation: height-expand 0.5s ease; }
  .menu-container { margin: 0px; text-align: center; width: 100%; }
  .menu-container #hamburger-btn { background: #ff8f00; animation: bg-fade 0.3s linear 0s 1; -webkit-animation: bg-fade 0.3s linear 0s 1; border: none; outline: none; margin: 0px 0px 45px; }
  .menu-container #hamburger-btn span { display: block; background: #eee; width: 30px; height: 4px; margin: 5px auto; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
  .menu-container ul { text-transform: uppercase; font-size: 14px; margin: -20px 0px 0px; padding: 0px; list-style-type: none; border: none; }
  .menu-container ul li { text-align: center; font-weight: bold; background: #ffa533; margin-top: -1px; overflow: hidden; padding: 0px; }
  .menu-container ul li a { display: block; color: #fff; padding: 8px 16px; }
  .menu-container ul li a:hover { background: #ff8f00; } }
/* Misc stuff */
sup { vertical-align: top; position: relative; top: -0.5em; margin-left: 1px; }

time { color: #555; font-size: 14px; }

code, pre { font-family: Consolas, monospace, x; }

code { color: #cc7200; background: #eee; padding: 2px 6px; font-size: 13px; }

pre { display: block; margin-top: 0; margin-bottom: 1rem; font-size: 0.8rem; line-height: 1.4; white-space: pre; overflow-x: auto; background-color: #f9f9f9; border: 1px solid #ddd; padding: 1rem; }
pre code { font-size: 100%; color: inherit; background-color: transparent; padding: 0; }

table { width: 100%; table-layout: auto; margin: 45px 0; border-collapse: collapse; font-size: 14px; }
table thead { background: #eee; }
table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid #999; }
table td { padding: 4px 8px; border-top: 1px dashed #999; }

/* Container definitions */
article { max-width: 800px; margin: 0 auto; }
article.extra-wide { max-width: 900px; }
article h1 { font-size: 24px; margin: 45px 0px 25px; }
article h1.title { font-family: 'Julius Sans One', sans-serif; text-transform: lowercase; margin: 20px 0px; line-height: 1.4em; text-align: center; }
article iframe, article img { display: block; margin: 25px auto; max-width: 90%; }
@media (max-width: 580px) { article iframe, article img { max-width: 100%; } }
article .divider { background: #ddd; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(#ccc), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ccc, rgba(255, 255, 255, 0)); background: linear-gradient(to right, rgba(255, 255, 255, 0), #ccc, rgba(255, 255, 255, 0)); height: 1px; margin: 2em 0; }
article .center { text-align: center; margin: 0 auto; }
article hr { display: block; width: 75%; border: 0; border-bottom: 1px dotted #999; margin: 30px auto; }
article p { font-size: 12px; line-height: 1.9em; word-wrap: break-word; }
article .footnote { border: 0; }
article .footnotes { margin: 40px 0; display: none; }
article .footnotes .reversefootnote { border: 0; }
article .tiny { font-size: 8px; }
article .caption { display: block; text-align: center; margin: -15px auto 20px; color: #999; }

.back { text-align: center; }
.back a { text-decoration: none; margin: 40px auto 0; display: inline-block; padding: 10px; border: 0; font-family: 'Julius Sans One', sans-serif; text-transform: lowercase; }

.pagination { text-align: center; font-size: 14px; }
.pagination a { text-decoration: none; margin: 48px auto 0; display: inline-block; padding: 10px; border: 0; }

@keyframes bg-fade { from { background-color: #fff; }
  to { background-color: #ff8f00; } }
@-webkit-keyframes bg-fade { from { background-color: #fff; }
  to { background-color: #ff8f00; } }
@keyframes height-expand { from { max-height: 0px; }
  to { max-height: 36px; } }
@-webkit-keyframes height-expand { from { max-height: 0px; }
  to { max-height: 36px; } }
.highlight { margin: 40px 0; }
.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; }