/* customized version of ../../themes/ghostwriter/static/styles/style.scss's output */

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700');
/* ============================================================ */
/* Base */
/* ============================================================ */
html, body {
    height: 100%;
}

body {
    background: #FEFEFE;
    color: #424242;
    font-family: "Libre Baskerville", "Times New Roman", serif;
    font-size: 18px;
    margin: 0;
}

/* have a top margin too, for the previous section might end with a list with no bottom margin */
h1, h2, h3, h4, h5, h6 {
    margin: 40px 0 20px 0;
    text-transform: none;
}

/* sizes from https://stackoverflow.com/a/6140504 */
h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
    margin-bottom: 20px;
}

h4 {
    font-size: 1.2em;
    margin-bottom: 18px;
}

h5 {
    font-size: .83em;
    margin-bottom: 15px;
}

h6 {
    font-size: .75em;
    margin-bottom: 12px;
}

/* needed to make the featured image float right alongside text */
.post-featured-image {
    margin: 0 0 0 20px;
    float: right;
}

/* needed, since paragraphs are justified */
.post-header > p {
    text-align: center;
}

/* used primarily for TOC */
aside {
    text-align: left;
    font-size: smaller;
    width: 40%;
    margin-left: 2.0rem;
    margin-bottom: 2.0rem;
    margin-top: 40px; /* match post-header's bottom margin */
    padding-right: 1.0rem;
    padding-top: 0.5rem; /* padding-{top,bottom} matters for small screens */
    padding-bottom: 0.5rem;
    float: right;
    background: #fffded;
}

/* heading inside TOC */
aside > h1 {
    text-align: center;
    font-size: 1.5em; /* match h2 font-size */
    margin-top: 20px;
}

figure img {
    margin: 0;
}

figcaption p {
    font-size: smaller;
    margin: 1mm 3mm;
}

figcaption h4 {
    margin: 3mm 0 0 0mm;
    font-size: large;
    font-variant: small-caps;
}

p {
    /* like it really spaced out and tidy */
    line-height: 1.8;
    text-align: justify;
}

a {
    color: #F03838;
    text-decoration: none;
}

a code:not([class]) {
    text-decoration: underline;
}

ul, ol {
    line-height: 1.8;
    /* margin: 0 0 20px; */
}

/* remove margin altogether for lists inside
   lists: ul ul, ul ol, ol ul, ol ol as they're too spacey */

ul li, ol li {
    margin: 0 0 2px;
}
ul li:last-of-type, ol li:last-of-type {
    margin-bottom: 0;
}

/* original blockquote is too dull; make it prominent */
blockquote {
    border-left: 6px solid rgba(240,56,56,0.75); /* #F03838 */
    margin: 40px 0;
    padding: 5px 30px;
    background-color: #fffacd;
    /* keep background colour from not overflow into a floating div:
       https://stackoverflow.com/q/20180081/183120 */
    overflow: hidden;
}
blockquote p {
    display: block;
    font-style: italic;
    margin: 0;
    width: 100%;
}

.footer-copyright img {
    display: initial;
    margin: 0;
}

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

pre {
    background: #F1F0EA;
    border: 1px solid #DDDBCC;
    border-radius: 3px;
    margin: 0 0 20px;
    overflow-x: auto;
    padding: 10px;
    font-size: 16px;
}

/* have rounded radius for code snippets */
div.highlight {
    border-radius: 5px;
    margin-top: 0.25em;
}

/* have black background as in code */
div.highlight pre {
    border: inherit;
    border-radius: inherit;
    background: inherit;
}

pre code {
    padding: 0;
}

/* inline code i.e. code not inside div.highlight pre */
code:not([class])  {
    background-color: #F1F9FF;
    padding: 2px 4px;
    font-size: 90%;
    color: #F03838;
    border-radius: 4px;
}

blockquote code:not([class]) {
    background-color: inherit;
}

hr {
    border: none;
    border-bottom: 1px dotted #303030;
    margin: 45px 0;
}

table {
    margin-bottom: 40px;
    width: 100%;
}
table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #f7f7f3;
}
table th {
    padding: 0 10px 10px;
    /* leave text-align alone for tables to show with proper alignment */
}
table td {
    padding: 10px;
}
table tr {
    border-bottom: 1px dotted #AEADAD;
}

::selection {
    background: #FFF200;
    color: #000;
    display: block;
}

::-moz-selection {
    background: #FFF200;
    color: #000;
    display: block;
}

/* blockquote’s background and default selection background are almost the same
   colours; set a different selection background for blockquote elements */
blockquote ::selection, aside ::selection {
    background: #AFEEEE;
    color: #000;
    display: block;
}

blockquote ::-moz-selection, aside ::-moz-selection {
    background: #AFEEEE;
    color: #000;
    display: block;
}

/* prevent footnote numbers from getting selected and, there by, copied */
/* https://stackoverflow.com/a/10777263/183120 */
/* footnote-reference is emitted by go-org */
.footnote-ref, .footnote-reference {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    font-size: 0.7em;
    margin-left: 0.3mm;
}

.fluid-width-video-wrapper {
    margin-bottom: 40px;
}

.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================ */
/* General Appearance */
/* ============================================================ */
.container {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 889px;
}

#wrapper {
    height: auto;
    min-height: 100%;
    /* This must be the same as the height of the footer */
    margin-bottom: -265px;
}
#wrapper:after {
    content: "";
    display: block;
    /* This must be the same as the height of the footer */
    height: 265px;
}

.button {
    background: #303030;
    border: none;
    border-radius: 3px;
    color: #FEFEFE;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 12px;
    text-transform: uppercase;
}
.button:hover {
    background: #F03838;
}

.button-square {
    background: #F03838;
    color: #FFF;
    float: left;
    font-size: 17px;
    margin: 0 0 0 10px;
    padding: 3px 8px 4px;
}
.button-square:hover {
    background: #303030;
}

.error {
    margin: 10px;
}

.comments {
    margin-top: 10px;
}

/* ============================================================ */
/* Site Header */
/* ============================================================ */
.site-header {
    padding: 40px 0 0;
    overflow: auto;
    text-align: center;
}

.site-title-wrapper {
    display: table;
    margin: 0 auto;
}

.site-title {
    float: left;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}
.site-title a {
    float: left;
    background: #F03838;
    color: #FEFEFE;
    padding: 5px 10px 6px;
}
.site-title a:hover {
    background: #303030;
}

.site-logo {
    display: block;
}
.site-logo img {
    margin: 0;
}

.site-nav {
    list-style: none;
    margin: 28px 0 10px;
    padding: 0;
}

.site-nav-item {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin: 0 10px;
}
.site-nav-item a:hover {
    color: #424242;
}

/* ============================================================ */
/* Post */
/* ============================================================ */
#latest-post {
    display: none;
}

.post-container {
    margin: 0 40px;
}

.post-header {
    border-bottom: 1px solid rgba(240,56,56,0.75);
    margin: 0 0 40px;
    /* remove padding; lots of empty space in header */
    /* padding: 0 0 20px; */
    text-align: center;
    /* text-transform: uppercase; */
}

.post-title,
.page-title {
    font-size: 52px;
    font-weight: 700;
    margin: 15px 0;
    text-align: center;
    /* text-transform: uppercase; */
}

.page-title {
    margin: 15px 40px;
}

.post-date,
.blog-description {
    color: #AEADAD;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin: 25px 0 0;
}
.post-date a,
.blog-description a {
    color: #AEADAD;
    font-style: italic;
}
.post-date a:hover,
.blog-description a:hover {
    color: #F03838;
}
.post-date:after,
.blog-description:after {
    /* removed the dotted line since it seems like noise */
    border-bottom: 1px /* dotted */ #303030;
    content: "";
    display: block;
    margin: 40px auto 0;
    width: 100px;
}

.post-update-date {
    display: block;
    margin: 1em;
}

.post-content a:hover {
    border-bottom: 1px dotted #F03838;
    padding: 0 0 2px;
}
.post-content:last-child {
    margin-bottom: 0;
}
.post-content .footnote {
    border-spacing: 0;
    margin-bottom: 0;
}
.post-content .footnote .label + td {
    width: 100%;
}
.post-content .gist tr {
    border-bottom: 0;
}

/* Convert go-org emitted footnote content into an ordered list */
/* See also: https://github.com/niklasfasching/go-org/issues/11 */
/* Avoid line break b/w footnote number and content */
.footnote-body, .footnote-body > p {
    display: inline;
}
/* Introduce spacing between footnotes as we've inline display */
.footnote-definition {
    margin-bottom: 1em;
}
/* Make footnote number a regular text for it to be like a list */
.footnote-definition > sup {
    vertical-align: baseline;
}
/* Make it look like a list */
.footnote-definition > sup:after {
    content: ".";
}
/* Avoid excessive space surrounding <hr> */
.footnotes-separatator {
    margin: 20px 0;
}
/* End of go-org footnote content */

.post-footer {
    /* have a post footer line to demark end of article contents */
    border-top: 1px solid rgba(240,56,56,0.75);
    /* move margin from here to .post-tags, share for space between them and line */
}

.post-tags,
.share {
    /* margin between these and post footer line */
    margin-top: 25px;
    color: #AEADAD;
    font-size: 14px;
}
.post-tags span,
.share span {
    font-weight: 600;
}

.post-tags {
    float: left;
    /* remove top margin for post-tags as it's already set above with .share */
}
.post-tags a {
    font-style: italic;
}
.post-tags a::before {
    content: "# ";
    color: #AE8484;
}
.post-tags a:hover {
    color: #303030;
}
.post-tags span {
    display: none;
}

.share {
    float: right;
}
.share a {
    background: #F03838;
    color: #FFF;
    display: inline-block;
    font-size: 16px;
    margin-left: 5px;
    padding: 5px 0 4px;
    width: 30px;
    text-align: center;
}
.share a:hover {
    background: #303030;
}

.post-navigation {
    display: table;
    margin: 70px auto 100px;
}

.newer-posts,
.older-posts {
    float: left;
    background: #F03838;
    color: #FEFEFE;
    font-size: 14px;
    font-weight: 600;
    margin: 0 5px;
    padding: 5px 10px 6px;
    text-transform: uppercase;
}
.newer-posts:hover,
.older-posts:hover {
    background: #303030;
}

.page-number {
    display: none;
}

/* ============================================================ */
/* Post Index */
/* ============================================================ */
.post-list {
    list-style: none;
    padding: 0;
}

.post-stub-date {
    display: inline-block;
    font-size: 80%;
    color: #7f7f7f;
}
.post-stub {
    border-bottom: 1px dotted #303030;
    margin: 0;
    position: relative;
}
.post-stub:first-child {
    padding-top: 0;
}
.post-stub a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color: #424242;
    padding: 20px 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.post-stub a:hover {
    background: #FCF5F5;
    color: #F03838;
}
.post-stub a:hover .post-stub-tag {
    background: #F03838;
}

.post-stub-tag {
    background: #303030;
    border-radius: 3px;
    color: #FFF;
    font-size: 10px;
    padding: 0 5px;
    text-transform: uppercase;
}

.post-stub-tag-list {
    display: block;
    align-self: flex-end;
    flex-basis: 100%;
}
.post-stub-tag-item {
    color: #cd5c5c;
    letter-spacing: 0.2mm;
    font-size: 0.8em;
    font-style: italic;
    padding: 0 7px;
}

.post-stub-title {
    display: inline-block;
    margin: 0;
    text-transform: none;
}

.post-stub-description {
    display: inline-block;
    margin: 0;
    text-transform: none;
}

.post-stub-date::before {
    content: "/ ";
}

.next-posts-link a,
.previous-posts-link a {
    display: block;
    padding: 8px 11px;
}

/* ============================================================ */
/* Author */
/* ============================================================ */
.author-profile {
    margin: 0 40px;
}
.author-profile:after {
    border-bottom: 1px dotted #303030;
    content: "";
    display: block;
    margin: 40px auto 0;
    width: 100px;
}

.author-heading {
    margin: 15px auto;
    text-align: center;
    width: 100%;
}

.author-avatar {
    border-radius: 50px;
    display: inline;
    height: 50px;
    margin: 5px 10px 0 0;
    width: 50px;
    vertical-align: middle;
}

.author-name {
    display: inline;
    font-size: 52px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
}

.author-meta {
    color: #AEADAD;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin: 25px 0 0;
    text-align: center;
    text-transform: uppercase;
}
.author-meta span {
    display: inline-block;
    margin: 0 10px 8px;
}
.author-meta i {
    margin-right: 8px;
}
.author-meta a {
    color: #AEADAD;
}
.author-meta a:hover {
    color: #F03838;
}

.author-bio {
    margin: 20px auto 0;
    text-align: center;
    max-width: 700px;
}

/* ============================================================ */
/* Footer */
/* ============================================================ */
.footer {
    background: #303030;
    color: #D3D3D3;
    height: fit-content;
    margin-top: 95px;
    overflow: auto;
}
.footer .site-title-wrapper {
    margin: 80px auto 35px;
}
.footer .site-title a:hover,
.footer .button-square:hover {
    background: #121212;
}

.footer-copyright {
    color: #656565;
    font-size: 14px;
    margin: 0;
    text-align: center;
    /* text-transform: uppercase; */
}
.footer-copyright a {
    color: #656565;
    font-weight: 700;
}
.footer-copyright a:hover {
    color: #FEFEFE;
}

/* ============================================================ */
/* NProgress */
/* ============================================================ */
#nprogress .bar {
    background: #F03838;
}

#nprogress .peg {
    box-shadow: 0 0 10px #F03838, 0 0 5px #F03838;
}

#nprogress .spinner-icon {
    border-top-color: #F03838;
    border-left-color: #F03838;
}

/* ============================================================ */
/* Media Queries */
/* ============================================================ */
@media only screen and (max-width: 800px) {
    .post-stub-tag {
        display: none;
    }
}
@media only screen and (max-width: 600px) {
    /* reduce font size for small screens */
    body {
        font-size: 16px;
    }

    h1, h2 {
        margin-bottom: 20px;
    }

    p {
        line-height: 1.8;
        text-align: initial;
        margin-bottom: 20px;
    }

    ul, ol {
        margin-bottom: 20px;
    }

    img {
        margin: 30px 0;
    }

    blockquote {
        margin: 30px 0;
    }

    pre {
        margin: 20px 0;
    }

    hr {
        margin: 35px 0;
    }

    .site-header {
        padding-top: 40px;
    }

    .site-title {
        float: none;
        margin-bottom: 15px;
    }
    .site-title a {
        float: none;
    }
    .site-title + .button-square {
        margin-left: 0;
    }

    .site-nav-item {
        display: block;
        margin: 15px 0;
    }

    .post-header {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .post-header p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .post-title,
    .page-title,
    .author-name,
    .author-heading {
        font-size: 42px;
        margin-top: 5px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .post-date,
    .blog-description,
    .author-meta {
        margin-top: 20px;
    }
    .post-date:after, .post-date:before,
    .blog-description:after,
    .blog-description:before,
    .author-meta:after,
    .author-meta:before {
        margin-top: 30px;
    }

    .author-profile:after, .author-profile:before {
        margin-top: 20px;
    }

    .post-stub-title {
        display: block;
    }

    .post-stub-date:before {
        content: "";
        display: block;
    }

    /* disable tag(s) display on hover for small devices which mostly wouldn’t
       have hover (no mouse) or the realty to show them */
    .post-stub a:hover .post-stub-date {
        display: inline-block;
    }

    .post-list {
        margin-top: 20px;
    }

    .post-container,
    .post-list,
    .author-profile {
        margin-right: 25px;
        margin-left: 25px;
    }

    .post-tags {
        width: 100%;
    }

    .post-stub a,
    .post-stub a:hover {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .share {
        float: left;
        margin-top: 20px;
    }
    .share a {
        margin: 0 5px 0 0;
    }

    .footer {
        margin-top: 50px;
    }
    .footer .site-title-wrapper {
        text-align: center;
    }
    .footer .button-jump-top {
        clear: both;
        display: inline-block;
        float: none;
    }

    /* make it non-floating; used primarily for TOC  */
    aside {
        width: unset;
        padding-left: unset;
        margin-left: unset;
        margin-top: unset;
        float: none;
    }
}
@media only screen and (max-width: 400px) {
    .site-header {
        padding-top: 40px;
    }

    .post-title,
    .page-title,
    .author-name,
    .author-heading {
        font-size: 30px;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .post-date,
    .blog-description,
    .author-meta {
        line-height: 1.6;
    }

    .post-date,
    .blog-description,
    .author-meta {
        margin-top: 10px;
    }
    .post-date:after, .post-date:before,
    .blog-description:after,
    .blog-description:before,
    .author-meta:after,
    .author-meta:before {
        margin-top: 20px;
    }

    .author-profile:after, .author-profile:before {
        margin-top: 10px;
    }

    .post-container,
    .post-list,
    .author-profile {
        margin-right: 15px;
        margin-left: 15px;
    }

    .author-avatar {
        display: block;
        margin: 0 auto 18px;
    }

    .author-meta span {
        display: block;
        margin: 18px 0;
    }

    .footer-copyright {
        padding: 0 10px;
    }
}
/* avoid header icons spilling to the next line in case of very small screens (< 360px) */
@media only screen and (max-device-width: 359px) {
    .button-square {
        margin: 0 0 0 2px;
    }
}