/* =========================================================
   CHIBI NETWORK
   PROFILE BACKGROUNDS

   THEME
   = room layout / panels / window skin

   BACKGROUND
   = whole-page backdrop behind the room
   ========================================================= */


/* =========================================================
   SHARED BACKGROUND SYSTEM
   ========================================================= */

body.background-frutiger-aqua,
body.background-wired,
body.background-hero-of-time,
body.background-madoka,
body.background-kira,
body.background-isaac,
body.background-lawliet,
body.background-sakura-pink,
body.background-dusty-wisteria,
body.background-baby-blue,
body.background-sage-green,
body.background-forest-green,
body.background-teddy-brown,
body.background-white,
body.background-nyu,
body.background-red,
body.background-black,
body.background-pastel-yellow,
body.background-orange {

    position: relative;

    min-height: 100vh;

    isolation: isolate;

    background-attachment:
        fixed !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

}


/* =========================================================
   MAKE PAGE WRAPPERS TRANSPARENT
   ========================================================= */

body.background-frutiger-aqua .profile-page,
body.background-wired .profile-page,
body.background-hero-of-time .profile-page,
body.background-madoka .profile-page,
body.background-kira .profile-page,
body.background-isaac .profile-page,
body.background-lawliet .profile-page,
body.background-sakura-pink .profile-page,
body.background-dusty-wisteria .profile-page,
body.background-baby-blue .profile-page,
body.background-sage-green .profile-page,
body.background-forest-green .profile-page,
body.background-teddy-brown .profile-page,
body.background-white .profile-page,
body.background-nyu .profile-page,
body.background-red .profile-page,
body.background-black .profile-page,
body.background-pastel-yellow .profile-page,
body.background-orange .profile-page,

body.background-frutiger-aqua .user-room-page,
body.background-wired .user-room-page,
body.background-hero-of-time .user-room-page,
body.background-madoka .user-room-page,
body.background-kira .user-room-page,
body.background-isaac .user-room-page,
body.background-lawliet .user-room-page,
body.background-sakura-pink .user-room-page,
body.background-dusty-wisteria .user-room-page,
body.background-baby-blue .user-room-page,
body.background-sage-green .user-room-page,
body.background-forest-green .user-room-page,
body.background-teddy-brown .user-room-page,
body.background-white .user-room-page,
body.background-nyu .user-room-page,
body.background-red .user-room-page,
body.background-black .user-room-page,
body.background-pastel-yellow .user-room-page,
body.background-orange .user-room-page {

    position: relative;

    z-index: 5;

    background:
        transparent !important;

}


/* =========================================================
   HIDE NORMAL THEME BACKGROUND DECOR
   ========================================================= */

body.background-frutiger-aqua .room-background-effects,
body.background-wired .room-background-effects,
body.background-hero-of-time .room-background-effects,
body.background-madoka .room-background-effects,
body.background-kira .room-background-effects,
body.background-isaac .room-background-effects,
body.background-lawliet .room-background-effects,
body.background-sakura-pink .room-background-effects,
body.background-dusty-wisteria .room-background-effects,
body.background-baby-blue .room-background-effects,
body.background-sage-green .room-background-effects,
body.background-forest-green .room-background-effects,
body.background-teddy-brown .room-background-effects,
body.background-white .room-background-effects,
body.background-nyu .room-background-effects,
body.background-red .room-background-effects,
body.background-black .room-background-effects,
body.background-pastel-yellow .room-background-effects,
body.background-orange .room-background-effects {

    display:
        none !important;

}


/* =========================================================
   SHARED ART LAYERS
   ========================================================= */

body.background-frutiger-aqua::before,
body.background-frutiger-aqua::after,
body.background-wired::before,
body.background-wired::after,
body.background-hero-of-time::before,
body.background-hero-of-time::after,
body.background-madoka::before,
body.background-madoka::after,
body.background-kira::before,
body.background-kira::after,
body.background-isaac::before,
body.background-isaac::after,
body.background-lawliet::before,
body.background-lawliet::after {

    position: fixed;

    pointer-events: none !important;

    z-index: 1;

}


/* =========================================================
   FRUTIGER AQUA
   ========================================================= */

body.background-frutiger-aqua {

    background-color:
        #078ecb !important;

    background-image:

        radial-gradient(
            circle at 9% 12%,
            rgba(255,255,255,0.85) 0 6px,
            transparent 7px
        ),

        radial-gradient(
            circle at 89% 14%,
            rgba(255,255,255,0.72) 0 5px,
            transparent 6px
        ),

        radial-gradient(
            circle at 21% 76%,
            rgba(255,255,255,0.58) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 83% 71%,
            rgba(255,255,255,0.52) 0 4px,
            transparent 5px
        ),

        linear-gradient(
            180deg,
            #37caf5 0%,
            #1ea7df 26%,
            #0a86c5 48%,
            #0765a9 72%,
            #04385c 100%
        ) !important;

}


/* rainbow */

body.background-frutiger-aqua::before {

    content: "";

    left:
        -4vw;

    top:
        2vh;

    width:
        62vw;

    height:
        35vh;

    border-radius:
        50% 50% 0 0;

    border-top:
        6px solid
        rgba(255,124,157,0.35);

    box-shadow:

        inset
        0 6px 0
        rgba(255,224,92,0.28),

        inset
        0 12px 0
        rgba(126,226,133,0.20),

        inset
        0 18px 0
        rgba(99,198,255,0.18),

        inset
        0 24px 0
        rgba(141,115,255,0.17);

    transform:
        rotate(-4deg);

    opacity:
        0.8;

}


/* dolphin */

body.background-frutiger-aqua::after {

    content: "";

    right:
        6vw;

    top:
        20vh;

    width:
        90px;

    height:
        42px;

    background:
        linear-gradient(
            180deg,
            #d5f7f6,
            #69b7c8
        );

    clip-path:
        polygon(
            0 55%,
            16% 42%,
            36% 34%,
            54% 31%,
            68% 35%,
            82% 21%,
            77% 39%,
            100% 45%,
            83% 52%,
            75% 69%,
            63% 58%,
            45% 65%,
            28% 64%,
            13% 59%
        );

    opacity:
        0.52;

    filter:
        drop-shadow(
            0
            4px
            3px
            rgba(0,65,96,0.22)
        );

}


/* =========================================================
   THE WIRED
   ========================================================= */

body.background-wired {

    background-color:
        #061a1d !important;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(120,255,249,0.05) 0 1px,
            transparent 1px 4px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(120,255,249,0.05) 0 1px,
            transparent 1px 32px
        ),

        linear-gradient(
            90deg,

            rgba(43,202,210,0.10)
            0 13%,

            transparent
            13% 27%,

            rgba(63,104,196,0.12)
            27% 40%,

            transparent
            40% 54%,

            rgba(28,218,194,0.10)
            54% 68%,

            transparent
            68% 82%,

            rgba(81,113,235,0.11)
            82% 100%
        ),

        linear-gradient(
            180deg,

            transparent
            0 12%,

            rgba(132,255,252,0.10)
            12% 12.5%,

            transparent
            12.5% 31%,

            rgba(83,230,220,0.08)
            31% 31.5%,

            transparent
            31.5% 53%,

            rgba(106,255,243,0.09)
            53% 53.6%,

            transparent
            53.6% 77%,

            rgba(88,179,255,0.08)
            77% 77.6%,

            transparent
            77.6%
        ),

        linear-gradient(
            135deg,
            #1a666b 0%,
            #124852 18%,
            #103640 35%,
            #122b3a 55%,
            #0a2730 73%,
            #05171a 100%
        ) !important;

}


body.background-wired::before {

    content:
        "WIRED // LAYER 01\A"
        "NAVI CONNECTION ---- ACTIVE\A"
        "\30EF\30A4\30E4\30FC\30C9\A"
        "\63A5\7D9A\4E2D  //  \540C\671F\4E2D\A"
        "PROTOCOL 7 ---- SYNC\A"
        "identity ---- unresolved\A"
        "memory cache ---- corrupted\A"
        "\8A18\61B6\30A8\30E9\30FC\A"
        "\73FE\5B9F  //  \4EEE\60F3\A"
        "signal // signal // signal\A"
        "present day\A"
        "present time";

    left:
        2.8vw;

    top:
        8vh;

    width:
        390px;

    color:
        rgba(158,255,247,0.52);

    font-family:
        "MS Gothic",
        "Courier New",
        monospace;

    font-size:
        12px;

    line-height:
        1.7;

    letter-spacing:
        1.1px;

    white-space:
        pre-line;

    text-shadow:

        2px 0
        rgba(42,255,225,0.25),

        -2px 0
        rgba(130,90,255,0.25),

        0 0 8px
        rgba(76,255,240,0.22);

    opacity:
        0.96;

    animation:
        wiredTextShift
        2s
        steps(2,end)
        infinite;

}


body.background-wired::after {

    content: "";

    right:
        2vw;

    top:
        11vh;

    width:
        330px;

    height:
        190px;

    border:
        1px solid
        rgba(136,255,249,0.30);

    background:

        linear-gradient(
            180deg,
            rgba(110,255,245,0.04),
            rgba(0,0,0,0.20)
        ),

        repeating-linear-gradient(
            0deg,
            transparent 0 12px,
            rgba(111,255,245,0.05) 12px 13px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 19px,
            rgba(111,255,245,0.04) 19px 20px
        ),

        linear-gradient(
            135deg,
            rgba(116,255,243,0.10),
            rgba(44,73,120,0.16)
        );

    box-shadow:

        -120px 95px
        0 -28px
        rgba(83,255,244,0.18),

        -98px 178px
        0 -46px
        rgba(116,111,255,0.18),

        -55px 238px
        0 -73px
        rgba(45,210,190,0.22),

        26px 182px
        0 -54px
        rgba(98,255,242,0.16),

        56px 248px
        0 -84px
        rgba(108,102,255,0.20),

        36px 24px
        0 -18px
        rgba(72,136,255,0.16),

        inset
        0 0 24px
        rgba(86,255,244,0.10),

        0 0 20px
        rgba(52,235,222,0.10);

    opacity:
        0.90;

    animation:
        wiredPaneShift
        1.1s
        steps(3,end)
        infinite;

}


@keyframes wiredTextShift {

    0%,
    100% {

        transform:
            translateX(0);

        opacity:
            0.96;

    }

    30% {

        transform:
            translateX(2px);

    }

    33% {

        transform:
            translateX(-3px);

        opacity:
            0.60;

    }

    36% {

        transform:
            translateX(1px);

        opacity:
            1;

    }

    70% {

        transform:
            translateX(0);

    }

}


@keyframes wiredPaneShift {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    33% {

        transform:
            translate(-3px,1px);

    }

    66% {

        transform:
            translate(3px,-2px);

    }

}


/* =========================================================
   HERO OF TIME
   ========================================================= */

body.background-hero-of-time {

    background-color:
        #5f6953 !important;

    background-image:

        linear-gradient(
            #f7fff2,
            #f7fff2
        ),

        linear-gradient(
            rgba(204,255,212,0.58),
            rgba(204,255,212,0.58)
        ),

        linear-gradient(
            rgba(204,255,212,0.34),
            rgba(204,255,212,0.34)
        ),

        linear-gradient(
            #f7fff2,
            #f7fff2
        ),

        linear-gradient(
            rgba(204,255,212,0.54),
            rgba(204,255,212,0.54)
        ),

        linear-gradient(
            rgba(204,255,212,0.30),
            rgba(204,255,212,0.30)
        ),

        linear-gradient(
            rgba(234,255,224,0.72),
            rgba(234,255,224,0.72)
        ),

        linear-gradient(
            rgba(234,255,224,0.52),
            rgba(234,255,224,0.52)
        ),

        linear-gradient(
            rgba(234,255,224,0.44),
            rgba(234,255,224,0.44)
        ),

        linear-gradient(
            180deg,

            #7f8769
            0%,

            #717b60
            24%,

            #636e55
            47%,

            #56614c
            68%,

            #475442
            84%,

            #394639
            100%
        ) !important;

    background-size:

        5px 5px,
        13px 5px,
        5px 13px,

        5px 5px,
        13px 5px,
        5px 13px,

        4px 4px,
        4px 4px,
        4px 4px,

        100% 100% !important;

    background-position:

        10% 24%,
        calc(10% - 4px) 24%,
        10% calc(24% - 4px),

        90% 28%,
        calc(90% - 4px) 28%,
        90% calc(28% - 4px),

        18% 65%,
        82% 67%,
        91% 54%,

        center !important;

    background-repeat:
        no-repeat !important;

}


/* sword */

body.background-hero-of-time::before {

    content: "";

    left:
        2.5vw;

    bottom:
        2vh;

    width:
        128px;

    height:
        188px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='188' viewBox='0 0 128 188' shape-rendering='crispEdges'%3E%3Crect x='24' y='156' width='80' height='20' fill='%23434b3e'/%3E%3Crect x='31' y='138' width='66' height='18' fill='%23596352'/%3E%3Crect x='40' y='128' width='48' height='10' fill='%236d7561'/%3E%3Crect x='58' y='55' width='12' height='73' fill='%23b6c9c7'/%3E%3Crect x='61' y='55' width='4' height='73' fill='%23efffff'/%3E%3Crect x='55' y='52' width='18' height='6' fill='%237a94a1'/%3E%3Crect x='42' y='48' width='18' height='9' fill='%234f568f'/%3E%3Crect x='68' y='48' width='18' height='9' fill='%234f568f'/%3E%3Crect x='55' y='45' width='18' height='10' fill='%236870a5'/%3E%3Crect x='58' y='20' width='12' height='25' fill='%23584776'/%3E%3Crect x='55' y='16' width='18' height='5' fill='%23746597'/%3E%3Crect x='61' y='8' width='6' height='8' fill='%23c05071'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    background-size:
        contain;

    image-rendering:
        pixelated;

    opacity:
        0.88;

    filter:
        drop-shadow(
            4px
            4px
            0
            rgba(42,51,39,0.30)
        );

}


/* chest */

body.background-hero-of-time::after {

    content: "";

    right:
        2.5vw;

    bottom:
        3vh;

    width:
        104px;

    height:
        90px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='90' viewBox='0 0 104 90' shape-rendering='crispEdges'%3E%3Crect x='14' y='35' width='76' height='40' fill='%23604729'/%3E%3Crect x='19' y='39' width='66' height='31' fill='%23937445'/%3E%3Crect x='46' y='39' width='10' height='31' fill='%23d2b269'/%3E%3Crect x='14' y='29' width='76' height='9' fill='%23745a33'/%3E%3Crect x='20' y='21' width='64' height='8' fill='%23a4844d'/%3E%3Crect x='27' y='15' width='50' height='6' fill='%23c5a862'/%3E%3Crect x='47' y='50' width='8' height='10' fill='%23efe1a2'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    background-size:
        contain;

    image-rendering:
        pixelated;

    opacity:
        0.88;

    filter:
        drop-shadow(
            4px
            4px
            0
            rgba(42,51,39,0.28)
        );

}


/* =========================================================
   MADOKA
   ========================================================= */

body.background-madoka {

    background-color:
        #c987c7 !important;

    background-image:

        radial-gradient(
            circle at 16% 18%,
            rgba(255,255,255,0.95) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 67% 20%,
            rgba(255,255,255,0.90) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 38% 67%,
            rgba(255,255,255,0.92) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 86% 72%,
            rgba(255,255,255,0.86) 0 1px,
            transparent 2px
        ),

        linear-gradient(
            135deg,
            #ffd6ea 0%,
            #f4a8d3 26%,
            #da88ca 46%,
            #b87ec3 68%,
            #7e61a5 86%,
            #55406d 100%
        ) !important;

}


body.background-madoka::before {

    content: "";

    left:
        12vw;

    top:
        -10vh;

    width:
        10px;

    height:
        120vh;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,0.82) 30%,
            rgba(255,233,251,0.40) 58%,
            transparent
        );

    box-shadow:

        280px 80px
        0 -3px
        rgba(255,255,255,0.38),

        610px -60px
        0 -4px
        rgba(255,239,255,0.31);

    transform:
        rotate(18deg);

    opacity:
        0.68;

}


body.background-madoka::after {

    content: "";

    right:
        11vw;

    bottom:
        12vh;

    width:
        4px;

    height:
        4px;

    background:
        #ffffff;

    box-shadow:

        0 -9px 0 -1px #fff9ff,

        0 9px 0 -1px #fff9ff,

        -9px 0 0 -1px #fff9ff,

        9px 0 0 -1px #fff9ff,

        -52px -41px 0 0 #fff7ff,

        -52px -48px 0 -1px #fff7ff,

        -52px -34px 0 -1px #fff7ff,

        -59px -41px 0 -1px #fff7ff,

        -45px -41px 0 -1px #fff7ff,

        39px -73px 0 0 #fff4ff,

        39px -80px 0 -1px #fff4ff,

        39px -66px 0 -1px #fff4ff,

        32px -73px 0 -1px #fff4ff,

        46px -73px 0 -1px #fff4ff;

    filter:
        drop-shadow(
            0
            0
            6px
            #fff1ff
        );

    animation:
        madokaTwinkle
        1.6s
        steps(2,end)
        infinite;

}


@keyframes madokaTwinkle {

    0%,
    100% {

        opacity:
            0.45;

    }

    50% {

        opacity:
            1;

    }

}


/* =========================================================
   KIRA
   ========================================================= */

body.background-kira {

    background-color:
        #080204 !important;

    background-image:

        radial-gradient(
            ellipse at 78% 22%,
            rgba(156,14,31,0.43) 0%,
            transparent 36%
        ),

        radial-gradient(
            ellipse at 23% 74%,
            rgba(99,7,19,0.29) 0%,
            transparent 40%
        ),

        repeating-linear-gradient(
            0deg,
            transparent 0 31px,
            rgba(166,39,49,0.16) 31px 32px
        ),

        linear-gradient(
            135deg,
            #020102 0%,
            #0e0204 28%,
            #27050a 52%,
            #460812 71%,
            #210207 87%,
            #080102 100%
        ) !important;

}


body.background-kira::before {

    content:
        "\591C\795E\6708\A"
        "9   3   31   6\A"
        "23:40     00:17\A"
        "40 seconds\A"
        "NAME ............\A"
        "CAUSE ...........";

    left:
        7vw;

    top:
        13vh;

    width:
        330px;

    color:
        rgba(224,93,104,0.18);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        24px;

    font-style:
        italic;

    line-height:
        1.55;

    letter-spacing:
        6px;

    white-space:
        pre-line;

    text-shadow:
        0
        0
        8px
        rgba(161,13,33,0.24);

    transform:
        rotate(-5deg);

    opacity:
        0.86;

}


body.background-kira::after {

    content: "";

    right:
        6vw;

    bottom:
        6vh;

    width:
        120px;

    height:
        150px;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0 25px,
            rgba(116,13,27,0.10) 25px 26px
        ),

        linear-gradient(
            120deg,
            #090809,
            #111011 56%,
            #050505
        );

    border:
        2px solid
        rgba(119,13,29,0.42);

    box-shadow:

        inset
        7px
        0
        0
        rgba(255,255,255,0.02),

        7px
        8px
        0
        rgba(0,0,0,0.40);

    transform:
        rotate(5deg);

    opacity:
        0.60;

}


/* =========================================================
   ISAAC
   ========================================================= */

body.background-isaac {

    background:
        #020202 !important;

}


body.background-isaac::before {

    content: "";

    left:
        0;

    top:
        0;

    width:
        100vw;

    height:
        132px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cpath d='M0 0H360V22C342 18 329 27 311 23C289 18 281 31 261 24C243 18 224 29 208 25C188 19 176 30 155 22C136 15 124 28 105 24C87 19 71 28 53 21C37 15 19 27 0 22Z' fill='%237b0712'/%3E%3Cpath d='M59 18H72V77C72 88 67 94 65 94C61 94 59 88 59 78Z' fill='%238d0b18'/%3E%3Cpath d='M164 18H173V56C173 67 169 72 166 72C163 72 164 63 164 54Z' fill='%236f0710'/%3E%3Cpath d='M278 18H289V88C289 102 284 110 281 110C277 110 278 101 278 89Z' fill='%23970d19'/%3E%3Cpath d='M327 18H334V51C334 62 331 67 329 67C326 67 327 59 327 51Z' fill='%23680710'/%3E%3C/svg%3E");

    background-repeat:
        repeat-x;

    background-position:
        top left;

    background-size:
        360px 120px;

    opacity:
        0.90;

    filter:
        drop-shadow(
            0
            5px
            4px
            rgba(38,0,4,0.35)
        );

}


body.background-isaac::after {

    content:
        none;

}


/* =========================================================
   LAWLIET
   ========================================================= */

body.background-lawliet {

    background-color:
        #f7dce5 !important;

    background-image:

        repeating-linear-gradient(
            90deg,

            rgba(255,255,255,0.30)
            0 22px,

            rgba(236,191,204,0.18)
            22px 44px
        ),

        linear-gradient(
            180deg,
            #fff4f7 0%,
            #f8e4ea 42%,
            #f0d2dd 100%
        ) !important;

}


body.background-lawliet::before {

    content: "";

    left:
        1vw;

    bottom:
        2vh;

    width:
        280px;

    height:
        180px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='180' viewBox='0 0 280 180' shape-rendering='crispEdges'%3E%3Crect x='8' y='152' width='240' height='7' fill='%233b3438'/%3E%3Crect x='20' y='92' width='62' height='48' fill='%23fff9f6'/%3E%3Crect x='24' y='97' width='54' height='10' fill='%23efa9bd'/%3E%3Crect x='24' y='111' width='54' height='9' fill='%23fffdfb'/%3E%3Crect x='24' y='124' width='54' height='10' fill='%23e98fa9'/%3E%3Crect x='16' y='140' width='70' height='7' fill='%23fffdf9'/%3E%3Crect x='30' y='84' width='11' height='8' fill='%23e83c62'/%3E%3Crect x='57' y='84' width='11' height='8' fill='%23e83c62'/%3E%3Crect x='34' y='80' width='4' height='4' fill='%235b8c61'/%3E%3Crect x='61' y='80' width='4' height='4' fill='%235b8c61'/%3E%3Crect x='119' y='104' width='42' height='34' fill='%23fffaf8'/%3E%3Crect x='115' y='99' width='50' height='8' fill='%233b3438'/%3E%3Crect x='125' y='96' width='30' height='5' fill='%2362483b'/%3E%3Crect x='161' y='111' width='8' height='19' fill='%23fffaf8'/%3E%3Crect x='169' y='115' width='7' height='12' fill='%233b3438'/%3E%3Crect x='204' y='64' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='220' y='56' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='220' y='72' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='236' y='64' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='216' y='64' width='24' height='16' fill='%23ffffff'/%3E%3Crect x='224' y='60' width='8' height='24' fill='%23ffffff'/%3E%3Crect x='222' y='66' width='12' height='12' fill='%23f4becd'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-size:
        contain;

    image-rendering:
        pixelated;

    opacity:
        0.96;

}


body.background-lawliet::after {

    content: "";

    right:
        1vw;

    bottom:
        2vh;

    width:
        280px;

    height:
        180px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='180' viewBox='0 0 280 180' shape-rendering='crispEdges'%3E%3Crect x='32' y='152' width='240' height='7' fill='%233b3438'/%3E%3Crect x='183' y='92' width='62' height='48' fill='%23fff9f6'/%3E%3Crect x='187' y='97' width='54' height='10' fill='%23efa9bd'/%3E%3Crect x='187' y='111' width='54' height='9' fill='%23fffdfb'/%3E%3Crect x='187' y='124' width='54' height='10' fill='%23e98fa9'/%3E%3Crect x='179' y='140' width='70' height='7' fill='%23fffdf9'/%3E%3Crect x='193' y='84' width='11' height='8' fill='%23e83c62'/%3E%3Crect x='220' y='84' width='11' height='8' fill='%23e83c62'/%3E%3Crect x='197' y='80' width='4' height='4' fill='%235b8c61'/%3E%3Crect x='224' y='80' width='4' height='4' fill='%235b8c61'/%3E%3Crect x='104' y='104' width='42' height='34' fill='%23fffaf8'/%3E%3Crect x='100' y='99' width='50' height='8' fill='%233b3438'/%3E%3Crect x='110' y='96' width='30' height='5' fill='%2362483b'/%3E%3Crect x='146' y='111' width='8' height='19' fill='%23fffaf8'/%3E%3Crect x='154' y='115' width='7' height='12' fill='%233b3438'/%3E%3Crect x='28' y='62' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='44' y='54' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='44' y='70' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='60' y='62' width='16' height='16' fill='%23ffffff'/%3E%3Crect x='40' y='62' width='24' height='16' fill='%23ffffff'/%3E%3Crect x='48' y='58' width='8' height='24' fill='%23ffffff'/%3E%3Crect x='46' y='64' width='12' height='12' fill='%23f4becd'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-size:
        contain;

    image-rendering:
        pixelated;

    opacity:
        0.96;

}


/* =========================================================
   SOLID COLORS
   ========================================================= */

body.background-sakura-pink {

    background:
        #e9a8bd !important;

}


body.background-dusty-wisteria {

    background:
        #9987b5 !important;

}


body.background-baby-blue {

    background:
        #9dc8e8 !important;

}


body.background-sage-green {

    background:
        #aebca3 !important;

}


body.background-forest-green {

    background:
        #294b37 !important;

}


body.background-teddy-brown {

    background:
        #c6a783 !important;

}


body.background-white {

    background:
        #f8f6f1 !important;

}


body.background-nyu {

    background:
        #e83c62 !important;

}


body.background-red {

    background:
        #8e1828 !important;

}


body.background-black {

    background:
        #030303 !important;

}


body.background-pastel-yellow {

    background:
        #eadc91 !important;

}


body.background-orange {

    background:
        #c56d31 !important;

}


/* =========================================================
   CLICK SAFETY
   ========================================================= */

.room-personal-link,
.room-door-links a,
.room-small-link,
.profile-links a {

    position:
        relative;

    z-index:
        50;

    pointer-events:
        auto !important;

    cursor:
        pointer !important;

}


.room-personal-link {

    color:
        var(--room-accent) !important;

}


.room-personal-link:hover,
.room-door-links a:hover,
.room-small-link:hover,
.profile-links a:hover {

    text-decoration:
        underline !important;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
    max-width: 850px
) {

    body.background-frutiger-aqua::before {

        width:
            72vw;

        height:
            25vh;

        opacity:
            0.46;

    }


    body.background-frutiger-aqua::after {

        width:
            62px;

        height:
            29px;

        right:
            2vw;

        opacity:
            0.34;

    }


    body.background-wired::before {

        left:
            2vw;

        top:
            7vh;

        width:
            220px;

        font-size:
            7px;

        opacity:
            0.67;

    }


    body.background-wired::after {

        right:
            1vw;

        width:
            180px;

        height:
            110px;

        opacity:
            0.60;

    }


    body.background-hero-of-time::before {

        left:
            -8px;

        width:
            80px;

        height:
            120px;

        opacity:
            0.70;

    }


    body.background-hero-of-time::after {

        right:
            -4px;

        width:
            65px;

        height:
            57px;

        opacity:
            0.70;

    }


    body.background-kira::before {

        left:
            2vw;

        width:
            200px;

        font-size:
            15px;

        letter-spacing:
            3px;

        opacity:
            0.43;

    }


    body.background-kira::after {

        width:
            74px;

        height:
            96px;

        right:
            1vw;

        opacity:
            0.31;

    }


    body.background-isaac::before {

        height:
            88px;

        background-size:
            265px
            88px;

        opacity:
            0.74;

    }


    body.background-lawliet::before {

        left:
            -8px;

        width:
            150px;

        height:
            100px;

        opacity:
            0.78;

    }


    body.background-lawliet::after {

        right:
            -8px;

        width:
            150px;

        height:
            100px;

        opacity:
            0.78;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    body.background-wired::before,
    body.background-wired::after,
    body.background-madoka::after {

        animation:
            none !important;

    }

}