@font-face {
    font-family: "GraublauWeb";
    src: url("/css/fonts/GraublauWeb.otf") format("opentype");
}
@font-face {
    font-family: "GraublauWeb";
    font-weight: bold;
    src: url("/css/fonts/GraublauWebBold.otf") format("opentype");
}
@font-face {
    font-family: "Merriweather";
    src: url("/css/fonts/Merriweather-Regular.otf") format("opentype");
}
@font-face {
    font-family: "Merriweather";
    font-weight: bold;
    src: url("/css/fonts/Merriweather-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Merriweather";
    font-weight: bold;
    font-style: italic;
    src: url("/css/fonts/Merriweather-BoldItalic.otf") format("opentype");
}
@font-face {
    font-family: "Merriweather";
    font-style: italic;
    src: url("/css/fonts/Merriweather-Italic.otf") format("opentype");
}
@font-face {
    font-family: "Merriweather";
    font-weight: lighter;
    font-style: italic;
    src: url("/css/fonts/Merriweather-LightItalic.otf") format("opentype");
}
@font-face {
    font-family: "Merriweather";
    font-weight: lighter;
    src: url("/css/fonts/Merriweather-Light.otf") format("opentype");
}


html{
    margin: 1rem 2rem;
    font-size: 106.25%;
    --body-vertical-margin: 1rem;
    --body-horizontal-margin: 1rem;
    --content-box-padding: 0.5rem;
    --font-main: Georgia, sans-serif;
    --font-mono: 'Fira Code','Deja Vu Sans Mono','Bitstream Vera Sans Mono','Source Code Pro','Courier New',monospace;
    --font-quote: "Fresco", Georgia, serif;
    --font-sans: Avenir Next, Avenir, system-ui, sans-serif;
    --font-header: 'Merriweather','Linux Libertine','Georgia','Times',serif;
    --figure-offset: 0;
    --figcaption-padding: 0;
}
body {
    max-width: 70rem;
    margin: 0 auto;
    padding: 1rem;
    padding: var(--body-vertical-margin) var(--body-horizontal-margin);
    font-family: serif;
    font-family: var(--font-main);
    line-height: 1.5;
    color: black;
    background: #FBFBFB;
}

@media (min-width: 600px) {
    html {
	font-size: 112.5%;
	--body-vertical-margin: 1rem;
	--body-horizontal-margin: 1rem;
	--content-box-padding: 1rem;
    }
    body { padding: 1rem 2rem; }
}
@media (min-width: 900px) and (min-height: 500px) {
    html { font-size: 120%; }
}
@media (min-width: 900px) and (min-height: 500px) and (-webkit-device-pixel-ratio : 3) {
    html { font-size: 125%; }
    article, div.home div#page { font-size: 200%; }
}

h1, h2, h3, h4 {
    font-family: var(--font-header);
}

p {
    word-wrap: break-word;
}

:focus {
    outline: solid 2px #ccc;
    outline-offset: 2px;
    background-color: #eee;
}


a { text-decoration: none; color: #339; }
a:hover { color: #33f; }
a:visited { color: #669; }

blockquote {
    font-family: var(--font-quote);
    text-rendering: optimizeLegibility;
    line-height: 1.4;
    font-style: italic;
}

h1, h2 {
    line-height: 1.3;
}

body > header {
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
}

div#main-container {
    margin: 0 auto;
    padding: 1rem;
}

body > header div.home {
    margin: 0 auto;
    padding: 0 1rem;
    word-wrap: break-word;
}

pre, code {
    font-family: monospace, monospace;
    font-family: var(--font-mono);
    line-height: 1.3;
}

code {
    background: #F4F4F4;
}

pre {
    overflow-x: auto;
    margin: 1.25rem calc(-1 * var(--content-box-padding));
    padding: var(--content-box-padding);
    box-shadow: 0 0 0 1px #ccc;
    font-size: 90%;
}


pre code {
    background: transparent;
}
pre { white-space: pre-wrap; }
:not(pre) > code { font-size: 95%; word-spacing: -0.3ch; padding: 0 0.25rem; }

article header {
    padding-bottom: 0.1rem;
}

article header h1 {
    font-size: 300%;
    margin-bottom: 0.2rem;
}

article header address {
    color: #666;
}

article div.toc {
    background: #fcfcfc;
    border-left: 1px solid #ccc;
    margin: 1.25rem calc(-1 * var(--content-box-padding));
    padding: var(--content-box-padding);
    font-size: 90%;
}

article div.toc .heading {
    font-family: var(--font-header);
    font-weight: bold;
    font-style: italic;
    font-size: 110%;
}

article .footnotes {
    color: #666;
    font-size: 90%;
    margin: 0 1rem;
}

article .footnotes hr {
    border-top: 1px solid #eee;
}

hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
}

#page ul.tag_box {
    padding: 0;
}

ul.inline li {
    display: inline;
    text-align: center;
    padding: 0.2rem;
    margin: 0;
}

ul.inline.tag_box li {
    padding: 0;
}

ul.tag_box li a {
    color:#444;
    padding: 0.2rem 0.4rem;
    margin: 0px 0.1rem;
    text-decoration: none;
}
li.category a{
    background:#ccc;
}
li.category a:hover {
    background: #666;
    color: #ccc;
}
li.tag a {
    background:#eee;
}
li.tag a:hover {
    background: #444;
    color: #eee;
}

ul.tag_box li a span {
    font-weight: bold;
    font-size: 0.5rem;
}
/* Custom :D */
li.tag-featured a {
    background: #444;
    color: #eee !important;
}
li.tag-featured a:hover {
    color: #444 !important;
    background: #eee;
}
li.tag-emacs a:hover {
    background: #8156A7;
    color: #eee;
}
li.tag-orgmode a:hover {
    background: #4D85D1;
    color: #eee;
}
li.tag-docker a:hover {
    background: #51B7FF;
}
li.tag-java a:hover, li.tag-javascript a:hover {
    background: #DF2D4F;
}
li.tag-go:hover a, li.tag-golang:hover a {
    background: #51B7FF;
}
li.tag-ruby a:hover {
    background: #7F267B;
}
li.tag-hugo a:hover {
    background: #FF4088;
}
li.tag-testing a:hover {
    background: #339900;
}

body > footer, div#footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    background-color: #fafafa;
}

body > footer nav, body > footer address {
    text-align: center;
    margin: 0 auto;
}

body > footer address {
    color: #666;
}

.text-muted {
    color: #999;
}

.amp {
    font-family: Baskerville, Palatino, "Book Antiqua", serif;
    font-style: italic;
}

#page h2 span.count {
    color: #999;
    font-size: 75%;
}

.home h2 {
    font-size: 130%;
}

.home section#featured div {
    font-size: 120%;
}

.home section h2 {
    font-size: 170%;
    font-style: italic;
}

.home p {
    font-family: var(--font-header);
}

#posts span.date {
    color: #999;
}