/**
 * Master styling
 */
body {
    font-family: "Inconsolata", monospace, sans-serif;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.5em;
    color: #666;
    font-weight: 300;
}

strong {
    font-weight: bold;
}

.post {
    margin-top: 1em;
}

.center {
    width: 100%;
    text-align: center;
    font-style: normal;
}

/**
 * Images
 */
.post > p > img,
.post > p > a > img,
.post > blockquote > p > img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.post > p > img.stretch,
.post > p > a > img.stretch
{
    width: 100%;
}

img + em {
    display: block;
    width: 100%;
    text-align: center;
    font-style: normal;
}

img + em::first-letter {
    font-weight: bold;
}

hr {
    margin-top: 20px;
    margin-bottom: 5px;
    border: 0;
    border-top: 1px solid #F7F1F1;
    border-bottom: 1px solid #fff;
}

sup {
    border-left: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    margin-right: 0.3em;
}

/*
* Highlighter
*/
.highlighter-rouge {
    padding: 2px 4px;
    white-space: nowrap;
    color: inherit;
}

/*
* Inlide Code: `code`
*/
code.highlighter-rouge {
    background-color: #f9f2f4;
}

/*
 * Multiline Code:
 * ```bash
 * $ ls
 * ```
*/
div.highlighter-rouge {
    border: 1px #b3b3b3 solid;
    border-radius: 4px;
    word-break: break-all;
    margin-bottom: 1rem;
}

div.highlighter-rouge > div > pre {
    margin: 0px;
}

div.highlighter-rouge > div > pre > code {
    white-space: pre-wrap;
}

/*
 * Quotes
 */
blockquote {
    font-size: 0.9em;
    padding: 10px 20px;
    margin: 0 0 20px;
    border-left: 5px solid #b3b3b3;
}

blockquote > p {
    margin-bottom: 0;
}


/**
 * Font and link declarations
 */
span.time, span.categories {
    color: #adadad;
    margin-bottom: 5px;
    font-size: 11px;
}

h1, h2, h3, h4, h5, h6 {
    color: #696969;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.75rem;
}

p.author-name, header > h1 {
    font-size: 2.25rem;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
}

a, a:link, a:active {
    text-decoration: none;
    color: #8C8C8C;
}

a:hover {
    color: #B3B3B3;
    text-decoration: underline;
}

@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    src: local('Inconsolata'), url(/static/fonts/inconsolata.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/**
 * Reverse roman numbering
 */

@media only screen and (min-width: 992px) {
    ol.reverse-roman {
        padding: 0px;
        display: table;
    }

    ol.reverse-roman > li {
        display: table-row;
    }

    ol.reverse-roman > li::before {
        content: counter(post_ctr, upper-roman) ".";
        display: table-cell;
        text-align: right;
    }

    ol.reverse-roman > li > span {
        position: relative;
        left: 20px;
    }
}

ol.reverse-roman {
    list-style-type: upper-roman;
    list-style-position: inside;
    padding: 0px;
}

ol.reverse-roman > li {
    padding-bottom: 1em;
    counter-increment: post_ctr -1;
}

ol.reverse-roman > li::marker {
    content: counter(post_ctr, upper-roman) ".";
}

/*
 * Links
 */

.disabled a, .disabled a:hover,
.active a, .active a:hover {
    color: #999;
    cursor: default;
}

.disabled a:hover {
    background-color: transparent;
}

div#container {
    width: 700px;
    margin: auto;
}


/**
 * Post navigation
 */

.post-navigation {
    font-size: 14px;
}

/**
 * Logo
 */

.logo svg {
    width: 106px;
    height: 90px;
}

/**
 * Social media buttons
 */

div.social-media {
    height: 1.5em;
}

div.social-media svg {
    width: 1.5em;
    height: 1.5em;
}

footer {
    border-top: 1px solid #F7F1F1;
    width: 100%;
    height: 10px;
    margin-top: 10px;
    margin-bottom: 3em;
    padding-top: 10px;
    color: #C2C2C2;
    font-size: 11px;
    bottom: 0;
    padding-bottom: 10px;
}

footer div#github {
    text-align: right;
}

div.right h1 {
    margin-bottom: -2px;
}

div.right ul {
    list-style: none;
    margin-left: 0;
    padding: 0;
}

div.right ul li {
    margin-top: 5px;
    margin-left: 0;
    padding: 0;
}

div.right .post ul {
    list-style: square;
    margin-left: 15px;
}

/**
 * Nav
 */
nav {
    margin-top: 30px;
}

@media only screen and (min-width: 992px) {
    /* not mobilde: */
    nav {
        margin-top: 100px;
    }
}

nav .nav-item,
nav .nav-link {
    font-size: 11px;
    color: #666;
    padding: 0px;
}

nav .nav-link {
    display: inline;
}

/**
 * Footnotes
 */

.footnotes {
    border-top: 1px solid #F7F1F1;
    padding-top: 0.7em;
}

.footnotes li {
    font-size: 0.7em;
    line-height: 1em;
}

.footnotes li p {
    margin: 0.1em;
}