:root {
    --xulPrim1: #f8d6d9;
    --xulPrim2: #f9dabd;
    --xulSec: #fff0fc;
    --xulBG1: #ff9ebe;
    --xulBG2: #fdc8e6;
}

@media screen {
    .xulPinkPic {
        position: relative;
        background: url("bggrad.png") 50% 50%;
        background-size: 45%;
        padding: 20px 20px 100px 20px;
        min-height: 300px;
        overflow: hidden;
        font: 11.5pt 'Libre Franklin';
        color: black;
    }

    .xulPinkPic a:link, .xulPinkPic a:visited {
        background: none !important;
        font-weight: 650;
    }

    .xulPinkPic a:link {
        color: #388148;
    }

    .xulPinkPic a:visited {
        color: #234230;
    }

    .xulPinkPic a.js-link, .xulPinkPic a.collapsed-toggle {
        color: #388148;
    }

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

    .xulPinkText, .xulPinkSig1, .xulPinkSig2 {
        border: 2px solid var(--xulSec);
        padding: 5px;
    }

    .xulPinkText {
        background-color: var(--xulPrim1);
        border-radius: 12px 12px 0 0;
    }

    .xulPinkSig {
        position: relative;
    }

    .xulPinkSig1, .xulPinkSig2 {
        border-top: 0;
        padding: 10px;
        background: var(--xulPrim2);
        border-radius: 0 0 12px 12px;
    }

    .xulPinkSig1 {
        display: none;
    }

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

    .xulPinkPic .quote .boxhead, .xulPinkPic .code .boxhead {
        font-size: 9.5pt;
        font-weight: 600;
        color: black;
    }

    .xulPinkPic .quote .box, .xulPinkPic .code .box {
        box-shadow: none;
        border-radius: 5px;
    }

    .xulPinkPic .quote .boxhead:before {
        content: "🧸 ";
    }

    .xulPinkPic .quote .boxhead:after {
        content: " 🧡";
    }

    .xulPinkPic .quote .box {
        border: 1px solid var(--xulSec);
        background: var(--xulBG2);
        text-shadow: initial;
        padding: 10px;
    }

    .xulPinkPic .code .box {
        background-color: #111;
        font: 12.5pt 'JetBrains Mono';
        font-weight: 100;
        text-shadow: initial;
        color: #d5f7b4;
        border: none;
    }

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

    .xulPinkPic .spoiler {
        background-color: var(--xulBG1) !important;
        color: transparent;
        border: 1px solid #111;
        border-radius: 2px;
        text-shadow: initial;
        transition: background-color 1s, color 1s, text-shadow 1s;
    }

    .xulPinkPic .spoiler * {
        opacity: 0%;
        transition: opacity 1s;
    }

    .xulPinkPic .spoiler:hover {
        background-color: transparent !important;
        color: black;
        transition: background-color 1s, color 1s, text-shadow 1s, opacity 1s;
    }

    .xulPinkPic .spoiler:hover * {
        opacity: 100%;
        transition: opacity 1s;
    }

    .xulPinkPic::after {
        position: absolute;
        content: "Layout by Erik";
        font-size: 10pt;
        left: 10px;
        bottom: 10px;
    }
}

@media screen and (min-width: 900px) {
    .xulPinkPic {
        background: url("sideimglarge.png") bottom right/25% no-repeat, url("bggrad.png");
        padding: 25px 400px 100px 25px;
        min-height: 450px;
        overflow: hidden;
    }

    .xulPinkText {
        padding: 10px;
        border-radius: 12px;
    }

    .xulPinkSig2 {
        position: absolute;
        left: 2.5%;
        min-width: 300px;
    }

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

@media screen and (min-width: 1280px) {
    .xulPinkSig1 {
        display: initial;
        position: absolute;
        right: 5%;
        font-size: 11pt;
        max-width: 220px;
    }
}