@media screen {
    .erikTewiPic {
        background: url("tewibg.png");
        background-size: 45%;
        padding: 20px 20px 250px 20px;
        min-height: 300px;
        overflow: hidden;
        font: 11.5pt 'Nunito';
        color: black;
        text-shadow: none;
    }

    .erikTewiPic a:link, .erikTewiPic a:visited {
        background: none !important;
        font-weight: 650;
        color: #480555;
    }

    .erikTewiPic a.js-link, .erikTewiPic a.collapsed-toggle {
        color: #480555;
    }

    .erikTewiPic a:hover, .erikTewiPic a:active {
        text-decoration: underline dashed;
    }

    .erikTewiPic img {
        max-width: 100%;
    }

    .erikTewiPic ol>li {
        list-style: decimal outside;
    }

    .erikTewiPic ul>li {
        list-style: outside;
    }

    .erikTewiText, .erikTewiSig {
        padding: 5px;
    }

    .erikTewiText {
        background: #ffdca7;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 5px #d47d0b;
        border: 1px solid #d47d0b;
    }

    .erikTewiSig {
        background: #99f0a4;
        box-shadow: 0 5px #137734;
        border: 1px solid #137734;
        border-radius: 0 0 8px 8px;
    }

    .erikTewiPic .quote, .erikTewiPic .code {
        background: none;
        box-shadow: none;
        border: none;
        margin: 0 15px;
    }

    .erikTewiPic .code.inline {
        margin: 0;
        background-color: #3e114d;
        color: #ccc;
    }

    .erikTewiPic .quote .quoteHead, .erikTewiPic .code .codeHead {
        padding-left: 10px;
        font-size: 9.5pt;
        font-weight: 700;
        border: none;
        color: black;
    }

    .erikTewiPic .code .codeHead * {
        color: black;
    }
    
    .erikTewiPic .quote .quoteInner, .erikTewiPic .code .codeInner {
        box-shadow: none;
        border-radius: 5px;
    }

    .erikTewiPic .quote .quoteHead:before {
        content: "🐇 ";
    }

    .erikTewiPic .quote .quoteHead:after {
        content: " 🩷";
    }

    .erikTewiPic .quote .quoteInner {
        background: #f1a4b8;
        text-shadow: initial;
    }

    .erikTewiPic .quote .quoteInner .quoteInner {
        border: 1px dashed #480555;
        border-bottom: 0;
        box-shadow: 0px 5px #480555;
    }

    .erikTewiPic .code .codeHead:before {
        content: "🥕 ";
    }

    .erikTewiPic .code .codeHead a:before {
        content: " [";
    }

    .erikTewiPic .code .codeHead a:after {
        content: "]";
    }

    .erikTewiPic .code .codeInner {
        background-color: #3e114d;
        font: 12.5pt 'Inconsolata';
        text-shadow: initial;
    }

    .erikTewiPic .code *::selection {
        color: black;
    }

    .erikTewiPic .collapse, .erikTewiPic .collapse.open .collapse-header {
        border-color: #430a1a;
    }

    .erikTewiPic .collapse-header::before {
        content: "🐰";
        padding-right: 8px;
    }

    .erikTewiPic .collapse-header {
        color: black;
        background-color: #6db26e;
    }

    .erikTewiPic .collapse-content {
        background-color: #f3a087;
    }

    .erikTewiPic .spoiler {
        background-color: #c03535;
        border: 1px dashed black;
        border-radius: 2px;
        text-shadow: initial;
    }

    .erikTewiPic .un-outer {
        text-shadow: 1pt 0 0 black, 0 -1pt 0 black, -1pt 0 0 black, 0 1pt 0 black;
    }

    .erikTewiPic hr {
        border: 1px dashed #480555;
    }

}

@media screen and (min-width: 900px) {
    .erikTewiPic {
        background: url("tewipic.png") bottom right no-repeat, url("tewibg.png");
        background-size: 30%, 20%;
        padding: 25px 350px 25px 50px;
        min-height: 450px;
        overflow: hidden;
    }

    .erikTewiText {
        padding: 10px;
        border-radius: 8px;
    }

    .erikTewiSig {
        margin-left: 20px;
        border-top: 0;
        padding: 10px;
        max-width: 370px;
    }

}