Pro for Madame Ryu

/* Profile by AlthIndor */

:root {
    --medm: #404040;
    --pink: #E33462;
    --purp: #735D70;
}

::selection {
    background: var(--purp);
    color: #FFFFFF;
}

html, body {background: url('https://images.alphacoders.com/810/810756.jpg') fixed center / cover;}
body a {transition: all .5s ease-in-out;}

/* Fonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2') format('woff2');
}

@font-face {
    font-family: 'Macondo';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/macondo/v25/RrQQboN9-iB1IXmOe2LE0Q.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome';
    font-style: normal;
    font-weight: 900;
    src: url('https://ka-f.fontawesome.com/releases/v5.15.4/webfonts/free-fa-solid-900.woff2') format('woff2');
}

/* Header */

#viewer #gaia_header ul, #viewer #gaia_header li {margin: 0 7px !important;}
#viewer #gaia_header li.spacer {display: none !important;}

#viewer #gaia_header {
    background: #404040 !important;
    height: 40px !important;
    box-shadow: 0 2px 5px #00000080;
}

#gaia_header #header_left, #gaia_header #header_right {
    background: none !important;
    width: auto !important;
    font: 700 0/40px 'Macondo', serif !important;
}

#gaia_header #header_right {
    float: right;
    display: grid !important;
    grid-auto-flow: column;
}
#header_right li:nth-of-type(4) {grid-column: 2;}

#gaia_header a, #gaia_header a::before {font-size: 13px !important;}
#header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
#header_right a[href*='edit']::before {content: 'Edit Mine';}
#header_right a[href*='report']::before {content: 'Report Profile';}

#gaia_header a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    text-transform: uppercase;
}
#gaia_header a:hover {color: var(--purp) !important;}

#header_left img {
    -webkit-mask: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') no-repeat 0 0 / 100% auto;
    mask: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') no-repeat 0 0 / 100% auto;
    background: currentColor;
    width: 0;
    height: 18px;
    padding: 0 41px 0 0;
    position: relative;
    top: -1px !important;
}

/* Columns */

#columns {
    width: 900px;
    height: 440px;
    top: calc(50% - 220px);
    left: calc(50% - 450px);
    overflow: visible;
}

#columns .column {
    font-size: 0;
    margin: 0;
    position: absolute;
    box-sizing: border-box;
}
#column_3 {display: contents;}

#column_1 {
    width: 440px;
    height: 100%;
}

#column_2 {
    width: 260px;
    height: 230px;
    right: 0;
}

#column_1, #column_2, #id_details, #id_about {
    background: #00000080;
    backdrop-filter: blur(10px);
    border: 20px solid transparent;
    border-radius: 10px;
    box-shadow: 0 2px 5px #00000080;
}

/* Scrollbars */

#columns ::-webkit-scrollbar, #columns ::-webkit-scrollbar-thumb {
    width: 10px;
    border-radius: 5px;
}
#columns ::-webkit-scrollbar {background: #00000040;}

#columns ::-webkit-scrollbar-thumb {
    background: thistle content-box;
    border: 1px solid transparent;
}

.panel {
    scrollbar-color: thistle #00000040;
    scrollbar-width: thin;
}

/* Panels */

.panel {
    color: #FFFFFF;
    font: 11px/1.75 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
#column_1 .panel, #column_3 .panel {position: absolute;}
#column_2 .panel {background: none;}

.panel a {color: var(--pink);}
.panel h2 {display: none;}
.panel img, .panel:not(.media_panel) iframe {max-width: 100% !important;}

.panel a:hover {
    color: inherit;
    text-decoration: 2px solid underline var(--pink);
    text-underline-offset: 2px;
}

#id_wishlist, #id_equipment, #id_about {overflow-y: scroll;}
#id_wishlist, #id_equipment {height: 140px;}
#id_wishlist {margin-bottom: 70px;}

#id_details, #id_about {left: 460px;}
#id_details {top: 0;}

#id_about {
    width: 440px;
    height: 190px;
    padding-right: 20px;
    bottom: 0;
}

/* Tabbed Panel Switching */

#column_2 .custom_panel {
    margin-top: -160px;

    .spoiler-wrapper, button {border: none;}
    .spoiler-wrapper {padding: 0;}

    .spoiler-title {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;

        .spoiler-control {
            display: block !important;
            background: var(--medm);
            height: 30px !important;
            width: calc(50% - 5px);
            color: #FFFFFF;
            font: 700 11px/31px 'Macondo', serif !important;
            letter-spacing: .1ex;
            border-radius: 5px;
            outline: none;
            transition: background .5s ease-in-out;

            :is(span) {display: none;}
        }

        .spoiler-control-show {float: left;}
        .spoiler-control-hide {float: right;}
        .spoiler-control-show::before {content: 'WISHES LIST';}
        .spoiler-control-hide::before {content: 'EQUIPS LIST';}
    }

    .spoiler-control:hover, .spoiler-hidden .spoiler-control-show, .spoiler-revealed .spoiler-control-hide {background: var(--purp);}
    .spoiler-hidden .spoiler-control-show, .spoiler-revealed .spoiler-control-hide {pointer-events: none;}

    .spoiler {
        display: block !important;
        height: 210px;
    }
    .spoiler-revealed .spoiler {height: 0 !important;}
}

/* Details */

#id_details p:nth-of-type(n+2) {display: none;}

.forum_userstatus {
    background: var(--medm);
    width: 120px;
    height: 30px;
    margin: 0;
    padding: 0 10px 0 10px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;

    .statuslinks, span {
        background: none !important;
        height: 100% !important;
    }
    .pushBox {display: none;}

    .statuslinks span {
        color: #FFFFFF !important;
        font: 700 11px/30px 'Macondo', serif !important;
        letter-spacing: .1ex;
        text-transform: uppercase;
        padding: 0 !important;
    }

    .online::before, .offline::before {
        font-family: 'Font Awesome';
        margin-right: 9px;
    }
    .online::before {content: '';}
    .offline::before {content: '';}
}

/* Contact and Media */

#id_contact, #id_contact :is(ul, li) {display: contents;}
#id_contact li *, .media_panel iframe {position: absolute;}
#id_contact li * {font-size: 0;}

#id_contact li *, .media_panel {
    background: var(--medm);
    width: 70px;
    height: 70px !important;
    text-align: center;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
}
#id_contact a:hover, .media_panel:hover {background: var(--purp);}

#id_contact a {
    color: #FFFFFF;
    text-decoration: none;
}

#id_contact li:nth-of-type(1) *, #id_contact li:nth-of-type(2) * {top: 0;}
#id_contact li:nth-of-type(3) *, .media_panel {bottom: 0;}
#id_contact li:nth-of-type(1) *, #id_contact li:nth-of-type(3) * {left: 0;}
#id_contact li:nth-of-type(2) *, .media_panel {right: 0;}

.media_panel {transition: all .5s ease-in-out;}

.media_panel iframe {
    width: 300px;
    height: 200px;
    bottom: 0;
    left: -25px;
    transform-origin: bottom left;
    scale: 1.75;
    opacity: .001;
}

#id_contact li *::before, .media_panel::before {font: 900 32px/66px 'Font Awesome';}
#id_contact li:nth-of-type(1) *::before {content: '';}
#id_contact li:nth-of-type(2) *::before {content: '';}
#id_contact li:nth-of-type(3) *::before {content: '';}
.media_panel::before {content: '';}

/* Wish List */

#id_wishlist, #id_equipment {
    display: flex;
    flex-flow: row wrap;
    align-content: start;
    gap: 10px;
    scroll-snap-type: y mandatory;

    .premium_sparkle, .clear {display: none;}

    .item {
        position: relative;
        scroll-snap-align: start;
    }

    :is(a) {
        display: block;
        background: var(--medm);
        width: 30px;
        height: 30px;
        padding: 5px;
        border-radius: 5px;
    }
    :is(a:hover) {background: var(--purp);}
}

.owner_checkmark {
    background: #FFFFFF;
    margin: 0;
    padding: 2px;
    bottom: 0;
    left: 0;
    border: 1px solid #000;
    border-width: 1px 1px 0 0;
    pointer-events: none;
}

/* Art */

#column_1 .custom_panel {
    background: #DBC4D6;
    width: 400px;
    height: 400px !important;
    border: 2px solid #FFFFFF;
    border-radius: 50%;

    :is(div) {
        position: absolute;
        top: -2px;
        transition: opacity 1s ease-in-out;
    }

    :is(h2 + div) {
        content: url('https://i.ibb.co/P4L2P3v/madame-ryu2.png');
        left: -2px;
        opacity: 1;
    }

    :is(div + div) {
        content: url('https://i.ibb.co/V3CvpL8/madame-ryu1.png');
        left: -3px;
        opacity: 0;
    }
}

#column_1:hover .custom_panel h2 + div {opacity: 0;}
#column_1:hover .custom_panel div + div {opacity: 1;}

/* Rain Animation */

@keyframes RainMove {
    from {background-position-y: 0;}
    to {background-position-y: 500px;}
}

#panel-details, #panel-details div {position: absolute;}

#panel-details {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;

    :is(div) {
        background: url('https://i.imgur.com/PIWIZtB.png');
        width: calc(100% + 1000px);
        height: calc(100% + 1000px);
        top: -500px;
        left: -500px;
        rotate: 4deg;
        opacity: .25;
        mix-blend-mode: soft-light;
        animation: RainMove .4s linear infinite;
    }

    .bd {
        background-position: -166px 0;
        rotate: 6deg;
        animation-duration: .3s;
    }

    .ft {
        background-position: -333px 0;
        rotate: 8deg;
        animation-duration: .2s;
    }
}