/** Post **/

.post-warp {
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding-top: 2rem;

    .post-header h1 {
        margin: 0 !important;
    }

    .post-title {
        font-size: 2em;
        line-height: 1.5em;
    }

    .post-meta {
        color: rgba(85, 85, 85, 0.52941) !important;
        .dark-theme & {
            color: $dark-font-secondary-color !important;
        }

        a {
            color: $light-post-link-color;
            .dark-theme & {
                color: $dark-post-link-color;
            }

            &:hover {
                color: $light-post-link-hover-color;
                .dark-theme & {
                    color: $dark-post-link-hover-color;
                }
            }
        }
    }

    .post-content {
        padding-top: 1rem;

        h2,
        h3,
        h4,
        h5,
        h6 {
            padding-top: .8em;
            padding-bottom: .3em;
        }
        h2::before {
            content: "#";
            margin-right: 5px;
            color: $light-post-link-color;
            .dark-theme & {
                color: $dark-post-link-color;
            }
        }

        h3::before {
            content: "|";
            margin-right: 5px;
            color: $light-post-link-color;

            .dark-theme & {
                color: $dark-post-link-color;
            }
        }

        a {
            color: $light-post-link-color;
            .dark-theme & {
                color: $dark-post-link-color;
            }
        }

        a:hover {
            color: $light-post-link-hover-color;
            .dark-theme &:hover {
                color: $dark-post-link-hover-color;
                font-weight: bold;
                text-decoration: underline;
            }
        }

        code,
        pre {
            padding: 7px;
            font-size: 13px;
            font-family: Consolas, Monaco, Menlo, Consolas, monospace;
            word-break: break-all;
            word-wrap: break-word;
        }

        code:not([class]) {
            padding: 5px 5px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
            margin-left: 3px;
            margin-right: 3px;

            .dark-theme &:not([class]) {
                background: transparent;
                box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
            }
        }

        ul {
            padding-left: 2em;
        }

        table {
            max-width: 100%;
            margin: 10px 0;
            border-spacing: 0;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);

            th,
            td {
                padding: 5px 15px;
                border: 1px double #ebe9f5;
            }
        }

        figure {
            text-align: center;
            img:hover{
                cursor: zoom-in;
            }
        }

        .image-caption:not(:empty) {
            min-width: 20%;
            max-width: 80%;
            display: inline-block;
            padding: 10px;
            margin: 0 auto;
            border-bottom: 1px solid #d9d9d9;
            font-size: 14px;
            color: #969696;
            line-height: 1.7;
        }

        img {
            display: block;
            max-width: 80%;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
        }

        img[data-action="zoom"] {
            cursor: zoom-in;
        }

        .featured_image {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            margin: 0 !important;
        }

        div.typeit-code {
          padding: 6px;
          font-size: 14px;
          font-family: Consolas, Monaco, Menlo, Consolas, monospace;
          font-weight:bold;
          word-break: break-all;

          .k {
            color: #D371E3;
          }

          .kt {
            color: #D371E3;
          }

          .kc {
            color: #D371E3;
          }

          .o {
            color: #D371E3;
          }

          .n {
            color: #ECBF6F;
          }

          .nf {
            color: #F16473;
          }

          .na {
            color: #41B1F5;
          }

          .s {
            color: #8BC56F;
          }

          .n {
            color: #DB975C;
          }

          .c1 {
            color: #7E848F;
            white-space: pre-wrap;
          }

          .space {
            white-space: pre-wrap;
          }
        }

        .align-center {
          text-align: center;
        }

        .align-right {
          text-align: right;
        }

        .align-left {
          text-align: left;
        }

        .float-right {
          float: right;
        }
    }

    p {
        font-size: 1em;
        margin: .5em 0 .5em 0;
    }

    .post-copyright {
        margin-top: 5rem;
        border-top: 1px solid $light-border-color;
        border-bottom: 1px solid $light-border-color;

        .copyright-item {
            margin: 5px 0;
        }

        .dark-theme & {
            border-top: 1px solid $dark-border-color;
            border-bottom: 1px solid $dark-border-color;
        }
    }

    .post-tags {
        padding: 1rem 0 1rem;
        display: flex;
        justify-content: space-between;

    }

    .post-nav {

        &:before,
        &:after {
            content: " ";
            display: table;
        }

        & a.prev,
        & a.next {
            font-weight: 600;
            font-size: 16px;

            transition-property: transform;
            transition-timing-function: ease-out;
            transition-duration: 0.3s;
        }

        & a.prev {
            float: left;
        }

        & a.prev:hover {
            transform: translateX(-4px);
        }

        & a.next {
            float: right;
        }
        & a.next:hover {
            transform: translateX(4px);
        }
    }

    .tag:not(:last-child) a::after {
        content: " / ";
    }

    .post-comment {
        padding: 3em 0;
    }
}

/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Keyword */ .chroma .k { color: #ff79c6 }
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
/* KeywordType */ .chroma .kt { color: #8be9fd }
/* NameAttribute */ .chroma .na { color: #50fa7b }
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
/* NameClass */ .chroma .nc { color: #50fa7b }
/* NameFunction */ .chroma .nf { color: #50fa7b }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
/* NameTag */ .chroma .nt { color: #ff79c6 }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
/* LiteralString */ .chroma .s { color: #f1fa8c }
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
/* Operator */ .chroma .o { color: #ff79c6 }
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
/* Comment */ .chroma .c { color: #6272a4 }
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
/* GenericDeleted */ .chroma .gd { color: #8b080b }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { font-weight: bold }
/* GenericOutput */ .chroma .go { color: #44475a }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }