@media screen {
    .erikOrangeSGPic {
        background: url("https://dl.dropbox.com/scl/fi/mavn7fxgr6jlgpnzh8x1k/6520153be8122b137619387a22847f16.jpg?rlkey=eryguwzyemlhro7ab8g97u2xt") no-repeat bottom center #f1f0ee;
        background-size: 45%;
        padding: 20px 20px 250px 20px;
        min-height: 400px;
        overflow: hidden;
    }

    .erikOrangeSGPic a:link {
        background: none !important;
        color: #ffd078;
        transition: color .75s;
        text-decoration: underline;
    }

    .erikOrangeSGPic a:visited {
        color: #825e65;
    }

    .erikOrangeSGPic a:hover, .erikOrangeSGPic a:active {
        color: #b890b2;
    }

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

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

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

    .erikOrangeSGText {
        background: #888;
        color: white;
        text-shadow: 1px 0 1px black, 0 1px 1px black, -1px 0 1px black, 0 -1px 1px black;
        border: 2px solid black;
        padding: 5px;
    }

    .erikOrangeSGSig {
        display: none;
    }

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

    .erikOrangeSGPic .quote .boxhead, .erikOrangeSGPic .code .boxhead {
        padding-left: 10px;
    }

    .erikOrangeSGPic .quote .boxhead:before {
        content: "> ";
    }

    .erikOrangeSGPic .quote .box {
        background: #a6784380;
        border: 2px solid #ffd37a;
        text-shadow: inherit;
    }

    .erikOrangeSGPic .code .boxhead:before {
        content: "- ";
    }

    .erikOrangeSGPic .code .boxhead a:before {
        content: "[";
    }

    .erikOrangeSGPic .code .boxhead a {
        background: none !important;
        padding-left: 2px;
        color: #fbb6c4;
    }

    .erikOrangeSGPic .code .boxhead a:after {
        content: "]";
    }

    .erikOrangeSGPic .code .box {
        background: #222;
        border: 2px solid #ac89aa;
        font-family: "Consolas", monospace;
        text-shadow: inherit;
    }

    .erikOrangeSGPic .code *::selection {
        background-color: #ac89aa;
        color: black;
        text-shadow: initial;
    }

    .erikOrangeSGPic .spoiler {
        background-color: #4e386c !important;
        color: transparent;
        border-color: black;
        text-shadow: initial;
    }

    .erikOrangeSGPic .spoiler:hover {
        background-color: transparent !important;
        color: white;
        transition: background-color 1s, color 1s, text-shadow 1s;
    }

    .erikOrangeSGPic hr {
        border: 1px solid black;
    }

}

@media screen and (min-width: 900px) {
    .erikOrangeSGPic {
        background: url("https://dl.dropbox.com/scl/fi/mavn7fxgr6jlgpnzh8x1k/6520153be8122b137619387a22847f16.jpg?rlkey=eryguwzyemlhro7ab8g97u2xt") 102% 100% no-repeat #f1f0ee;
        background-size: 25%;
        padding: 25px 350px 25px 25px;
        min-height: 470px;
        overflow: hidden;
    }

    .erikOrangeSGPic a:link {
        background: none !important;
        color: #ffd078;
        transition: color .75s;
        text-decoration: underline;
    }

    .erikOrangeSGPic a:visited {
        color: #825e65;
    }

    .erikOrangeSGPic a:hover, .erikOrangeSGPic a:active {
        color: #b890b2;
    }

    .erikOrangeSGText {
        background: #888;
        color: white;
        text-shadow: 1px 0 1px black, 0 1px 1px black, -1px 0 1px black, 0 -1px 1px black;
        border: 2px solid black;
        padding: 10px;
        box-shadow: 5px 5px #403a3e;
    }

    .erikOrangeSGSig {
        display: block !important;
        background: #b68eb1;
        margin-left: 20px;
        color: white;
        text-shadow: 1px 0 1px black, 0 1px 1px black, -1px 0 1px black, 0 -1px 1px black;
        border: 2px solid black;
        border-top: 0;
        padding: 10px;
        box-shadow: 3px 5px #403a3e;
        max-width: 370px;
    }

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

    .erikOrangeSGPic .quote .boxhead, .erikOrangeSGPic .code .boxhead {
        padding-left: 10px;
    }

    .erikOrangeSGPic .quote .boxhead:before {
        content: "> ";
    }

    .erikOrangeSGPic .quote .box {
        background: #a6784380;
        border: 2px solid #ffd37a;
        box-shadow: 3px 3px black;
        text-shadow: inherit;
    }

    .erikOrangeSGPic .code .boxhead:before {
        content: "- ";
    }

    .erikOrangeSGPic .code .boxhead a:before {
        content: "[";
    }

    .erikOrangeSGPic .code .boxhead a {
        background: none !important;
        padding-left: 2px;
        color: #fbb6c4;
    }

    .erikOrangeSGPic .code .boxhead a:after {
        content: "]";
    }

    .erikOrangeSGPic .code .box {
        background: #222;
        border: 2px solid #ac89aa;
        box-shadow: 3px 3px black;
        font-family: "Consolas", monospace;
        text-shadow: inherit;
    }

    .erikOrangeSGPic .code *::selection {
        background-color: #ac89aa;
        color: black;
        text-shadow: initial;
    }

    .erikOrangeSGPic .spoiler {
        background-color: #4e386c !important;
        color: transparent;
        border-color: black;
        text-shadow: initial;
    }

    .erikOrangeSGPic .spoiler:hover {
        background-color: transparent !important;
        color: white;
        text-shadow: 1px 0 1px black, 0 1px 1px black, -1px 0 1px black, 0 -1px 1px black;
        transition: background-color 1s, color 1s, text-shadow 1s;
    }

    .erikOrangeSGPic hr {
        border: 1px solid black;
    }

}