.showcase-code-of-block {
    font-size: 15px;

    pre {
        display: block;
        background: #263238;
    }

    pre {
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        color: #c3cee3;
        font-family: Roboto Mono, monospace;

        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;

        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }

    pre ::-moz-selection {
        background: rgba(255, 255, 255, .25);
    }

    pre ::selection {
        background: rgba(255, 255, 255, .25);
    }

    :not(pre) > code {
        white-space: normal;
        border-radius: 0.2em;
        padding: 0.1em;
    }

    pre {
        margin: 0;
        padding: 14px;
        box-sizing: border-box;
    }

    .language-css > code,
    .language-sass > code,
    .language-scss > code {
        color: #fd9170;
    }

    .namespace {
        opacity: 0.7;
    }

    .token.atrule {
        color: #c792ea;
    }

    .token.attr-name {
        color: #ffcb6b;
    }

    .token.attr-value {
        color: #c3e88d;
    }

    .token.attribute {
        color: #c3e88d;
    }

    .token.boolean {
        color: #c792ea;
    }

    .token.builtin {
        color: #ffcb6b;
    }

    .token.cdata {
        color: #80cbc4;
    }

    .token.char {
        color: #80cbc4;
    }

    .token.class {
        color: #ffcb6b;
    }

    .token.class-name {
        color: #ffcb6b;
    }

    .token.color {
        color: #f2ff00;
    }

    .token.comment {
        color: #546e7a;
    }

    .token.constant {
        color: #c792ea;
    }

    .token.deleted {
        color: #f07178;
    }

    .token.doctype {
        color: #546e7a;
    }

    .token.entity {
        color: #f07178;
    }

    .token.function {
        color: #82aaff;
    }

    .token.hexcode {
        color: #f2ff00;
    }

    .token.id {
        color: #c792ea;
        font-weight: bold;
    }

    .token.important {
        color: #c792ea;
        font-weight: bold;
    }

    .token.inserted {
        color: #80cbc4;
    }

    .token.keyword {
        color: #c792ea;
    }

    .token.number {
        color: #fd9170;
    }

    .token.operator {
        color: #89ddff;
    }

    .token.prolog {
        color: #546e7a;
    }

    .token.property {
        color: #80cbc4;
    }

    .token.pseudo-class {
        color: #c3e88d;
    }

    .token.pseudo-element {
        color: #c3e88d;
    }

    .token.punctuation {
        color: #89ddff;
    }

    .token.regex {
        color: #f2ff00;
    }

    .token.selector {
        color: #f07178;
    }

    .token.string {
        color: #bee38b;
    }

    .token.symbol {
        color: #c792ea;
    }

    .token.tag {
        color: #f07178;
    }

    .token.unit {
        color: #f07178;
    }

    .token.url {
        color: #fd9170;
    }

    .token.variable {
        color: #f07178;
    }
}
