Pro for Zero Undergrove with Friend List

/* Profile By AlthIndor */

:root {
    --bckgrnd: url('https://i.ibb.co/MxGfh3V7/Foggy-Wallpaper.jpg');
    --color-1: #000000;
    --color-2: #101010;
    --color-3: #303030;
    --color-4: #202020;
}

html, body {background: var(--bckgrnd) center / cover #404040;}
a, button, .media_panel {transition: all .5s ease-in-out;}

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

/* Fonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    src: url('https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2');
}

/* Header */

#viewer #gaia_header, #gaia_header ul {background: none !important;}

#viewer #gaia_header {
    position: absolute !important;
    filter: drop-shadow(0 0 5px #00000080);

    ul, li {margin: 0 5px !important;}
    li.spacer {display: none !important;}

    ul {
        font: 0/31px 'Open Sans', sans-serif !important;
        width: unset !important;
    }
    #header_right {float: right;}

    a {
        color: #FFFFFF !important;
        font-size: 11px !important;
        text-decoration: none;
        text-transform: capitalize;
    }
    a:hover {opacity: .5;}

    img {
        mask: url('https://i.imgur.com/cGGVY2x.png');
        background: currentColor;
        height: 0;
        width: 0;
        margin-top: -1px;
        padding: 15px 34px 0 0;
    }
}

/* Columns */

#column_2, #pictures_container, #texts_container {
    position: absolute;
    top: 25vh;
    left: calc(50% - 215px);
}

#columns {display: contents;}
#column_3 {display: none;}

#columns .column {
    font-size: 0;
    margin: 0;
}

#column_1, #column_1 .panel {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#column_1 {
    contain: layout;
    position: fixed;
    pointer-events: none;
}
form #column_1 {pointer-events: unset;}

#column_2 {
    width: 430px;
    padding: 255px 0 50px 0;
    overflow: visible;
}

/* Panels */

.panel, .panel h2 {
    color: #FFFFFF;
    font: 11px/1.7 'Open Sans', sans-serif;
    text-align: center;
    padding: 0;
}
.panel {margin: 0 0 20px 0;}
.panel:last-child {margin: 0;}

.panel a {
    color: inherit;
    text-decoration: none;
}
.panel a:hover {opacity: .5;}

#id_about, #id_comments dl {text-align: justify;}
#id_about a, #id_comments .postcontent a {text-decoration: dotted underline #808080;}

#column_2 .panel:not(.media_panel), #friendGroup {
    background: var(--color-2);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 10px #00000080;
}

.panel h2 {
    background: var(--color-3);
    height: 30px;
    font-weight: 700;
    line-height: 30px;
    margin: 0 0 15px 0;
    border-radius: 5px;
}
#column_1 h2, .media_panel h2 {display: none;}

.panel img:not(.avatarImage) {max-width: 100% !important;}

/* Details and Media */

#id_details, .media_panel {
    position: absolute;
    box-sizing: border-box;
}

#id_details {
    width: 100%;
    height: calc(150px + 15px + 30px + 40px);
    position: absolute;
    top: 0;
}
#id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}

.media_panel {
    background: url('https://i.imgur.com/gqTTTvw.png') -21px -2px no-repeat var(--color-3);
    width: 40px;
    height: 40px !important;
    top: 175px;
    right: 20px;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1;
}
.media_panel:hover {opacity: .5;}

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 150px);
    opacity: .001;
}

/* Comments */

#id_comments {
    #alerts_banner, .deletecomment, .clear {display: none;}
    h2 + div, #alert_container {display: contents;}
    p {margin: 0;}
    dl {margin-top: 15px;}
}

#id_comments dt {
    height: unset;
    line-height: unset;
    margin: 0 0 2px 0;
    padding: 0 0 2px 0px;
    border-bottom: 1px dotted currentColor;

    .date a {font-weight: 400;}
}

#id_comments dd {
    display: grid;
    gap: 10px;
    grid-template: 1fr / 52px calc(100% - 62px);
    margin: 0 0 15px 0;
}
#id_comments dd:last-of-type {margin: 0;}

#id_comments .dropBox {
    background: var(--color-3);
    border: 2px solid transparent;
    border-radius: 5px;
    width: 48px;
    height: 48px;
    margin-top: 5px;
    overflow: hidden;

    img {
        width: 120px;
        height: 150px;
        margin: -30px 0 0 -47px;
    }
}

/* Wish List */

#id_wishlist {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;

    h2 {
        flex: 1 0 100%;
        margin-bottom: 5px;
    }
    .premium_sparkle, .clear {display: none;}
    .item {position: relative;}

    a {
        display: block;
        background: var(--color-3);
        border-radius: 5px;
        width: 30px;
        height: 30px;
        padding: 5px;
    }

    .owner_checkmark {
        background: #FFFFFF;
        border: 1px solid var(--color-1);
        margin: 0;
        padding: 2px;
        right: -2px;
        bottom: -2px;
        pointer-events: none;
    }
}

/* Friends List */

#id_friends h2 + div, #id_friends h2 ~ p:nth-of-type(n+2) {display: none;}
#id_friends p, #friendGroup p {margin: 0 0 20px 0;}

#id_friends ul, #friendGroup ul {
    gap: 10px;

    li {
        display: flex;
        flex-flow: column-reverse nowrap;
        place-items: center;
        background: var(--color-3);
        height: 86px;
        padding: 10px 0 7px 0;
        border-radius: 5px;
        box-sizing: border-box;
    }

    p, span {display: contents;}
    .dropBox {line-height: 0;}

    a {
        margin-top: .25cap;
        max-width: 52px;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
    }

    img {
        background: var(--color-4);
        border-radius: 3px;
        padding: 2px;
    }
}

#id_friends ul {
    display: grid;
    grid-auto-rows: max-content;
    grid-template-columns: repeat(5, 1fr);

    li {width: unset;}
}

#friendGroup {
    margin: 0;
    position: static;

    ul {
        display: flex;
        flex-flow: row wrap;
        max-width: calc(72px * 9 + 80px);
    }
    li {width: 72px;}

    .user_info {display: none;}
    .pagination {margin: 15px 0 0 0;}
    .pagination:empty {display: none;}
}

body:has(#friendGroup) {
    display: flex;
    flex-flow: column nowrap;
    place-content: center;
    place-items: center;
}

/* Avatar Panel */

#column_2 .custom_panel div[id*='content'] ul {
    display: grid;
    gap: 10px;
    grid-auto-rows: 56px;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    margin: 0;

    li, a {border-radius: 5px;}
    li, b {overflow: hidden;}
    a, b {position: absolute;}
    br {display: none;}

    li {
        background: var(--color-3);
        border: 2px solid transparent;
        position: relative;
    }

    li:hover {
        overflow: visible;
        z-index: 1;
    }

    a, img[class*='bbcode'] {
        width: 120px;
        height: 150px;
    }
    img[class*='bbcode'] {background-position: 56px 39px;}
    img[src*='_96x96'] {scale: -1 1;}

    a {
        background: var(--color-4);
        color: var(--color-1);
        font-weight: 300;
        padding: 5px;
        top: -33px;
        left: calc(50% - 75px);
        opacity: 1;
        transition: none;
    }
    a:hover {margin: -21px 0 0 10px;}
    a:hover img[class*='bbcode'] {background-position: center;}

    a:has(img[src*='_96x96']) {
        width: 96px;
        height: 96px;
        top: -18px;
        left: calc(50% - 57px);
    }
    a:has(img[src*='_96x96']):hover {margin: -9px 0 0 4px;}

    b {
        background: #F0F0F0;
        max-width: calc(100% - 32px);
        line-height: 1.7;
        padding: 0 5px;
        bottom: 10px;
        left: 10px;
        text-overflow: ellipsis;
        white-space: pre;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
    }
}

/* Misc */

.spoiler-wrapper {padding: 0;}
.spoiler-title {text-align: center;}

.spoiler-revealed {
    border: 1px dotted currentColor;
    border-radius: 2px;
    padding: 10px;
}

.spoiler-control {
    background: #F0F0F0;
    border: 1px solid #C0C0C0;
    border-radius: 5px;
    width: 100px;
    height: 25px;
    font: inherit;
    text-transform: capitalize;
}

.spoiler-control:hover {
    background: #C0C0C0;
    border-color: #909090;
}

.bbcode-swapping-image {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* Background Animation */

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

@keyframes Ripples04 {
    00% {background-position-y: 0;}
    06% {background-position-y: -030px;}
    12% {background-position-y: -060px;}
    18% {background-position-y: -090px;}
    24% {background-position-y: -120px;}
}

@keyframes Ripples12 {
    00% {background-position-y: 0;}
    02% {background-position-y: -030px;}
    04% {background-position-y: -060px;}
    06% {background-position-y: -090px;}
    08% {background-position-y: -120px;}
    10% {background-position-y: -150px;}
    12% {background-position-y: -180px;}
    14% {background-position-y: -210px;}
    16% {background-position-y: -240px;}
    18% {background-position-y: -270px;}
    20% {background-position-y: -300px;}
    22% {background-position-y: -330px;}
    24% {background-position-y: -360px;}
}

#column_1 .custom_panel {
    background: var(--bckgrnd) center / cover;
    contain: layout;

    h2 + div, i {
        width: 100%;
        bottom: 0;
    }
    h2 + div, b {position: absolute;}
    b, i:nth-of-type(odd) {mix-blend-mode: soft-light;}
    h2 + div {height: 50%;}

    b {
        background: url('https://i.ibb.co/wZ1nxqsG/Effects.png');
        height: 30px;
    }

    b:nth-of-type(odd) {
        width: 180px;
        animation: Ripples12 3s steps(1) infinite;
    }

    b:nth-of-type(even) {
        background-position-x: -180px;
        width: 140px;
        animation: Ripples04 2s steps(1) infinite;
    }

    b:nth-of-type(01) {top: 15%; right: -1%; scale: 0.17; animation-duration: 3.5s; animation-delay: -2.7s;}
    b:nth-of-type(02) {top: 20%; left:  01%; scale: 0.07; animation-duration: 2.4s; animation-delay: -0.1s;}
    b:nth-of-type(03) {top: 22%; right: 06%; scale: 0.10; animation-duration: 2.9s; animation-delay: -1.8s;}
    b:nth-of-type(04) {top: 25%; right: 11%; scale: 0.20; animation-duration: 2.2s; animation-delay: +0.0s;}
    b:nth-of-type(05) {top: 30%; left:  19%; scale: 0.02; animation-duration: 2.7s; animation-delay: -0.1s;}
    b:nth-of-type(06) {top: 21%; right: 21%; scale: 0.09; animation-duration: 1.9s; animation-delay: -1.1s;}
    b:nth-of-type(07) {top: 19%; left:  27%; scale: 0.07; animation-duration: 2.8s; animation-delay: -2.4s;}
    b:nth-of-type(08) {top: 20%; left:  33%; scale: 0.01; animation-duration: 2.3s; animation-delay: -0.9s;}
    b:nth-of-type(09) {top: 21%; left:  40%; scale: 0.04; animation-duration: 2.7s; animation-delay: -1.7s;}
    b:nth-of-type(10) {top: 28%; left:  45%; scale: 0.05; animation-duration: 1.5s; animation-delay: +0.0s;}
    b:nth-of-type(11) {top: 32%; right: 00%; scale: 0.34; animation-duration: 2.7s; animation-delay: -1.1s;}
    b:nth-of-type(12) {top: 44%; left:  02%; scale: 0.21; animation-duration: 2.3s; animation-delay: -0.7s;}
    b:nth-of-type(13) {top: 32%; right: 08%; scale: 0.40; animation-duration: 3.3s; animation-delay: -0.9s;}
    b:nth-of-type(14) {top: 45%; right: 12%; scale: 0.20; animation-duration: 1.5s; animation-delay: -0.3s;}
    b:nth-of-type(15) {top: 43%; right: 17%; scale: 0.31; animation-duration: 3.0s; animation-delay: -1.6s;}
    b:nth-of-type(16) {top: 40%; left:  21%; scale: 0.29; animation-duration: 1.5s; animation-delay: -0.9s;}
    b:nth-of-type(17) {top: 38%; left:  25%; scale: 0.33; animation-duration: 3.3s; animation-delay: -3.1s;}
    b:nth-of-type(18) {top: 42%; left:  34%; scale: 0.35; animation-duration: 2.2s; animation-delay: -0.6s;}
    b:nth-of-type(19) {top: 37%; right: 38%; scale: 0.27; animation-duration: 2.7s; animation-delay: -0.1s;}
    b:nth-of-type(20) {top: 41%; left:  45%; scale: 0.34; animation-duration: 2.5s; animation-delay: -1.3s;}
    b:nth-of-type(21) {top: 51%; left:  -2%; scale: 0.52; animation-duration: 3.4s; animation-delay: -1.4s;}
    b:nth-of-type(22) {top: 59%; right: 04%; scale: 0.49; animation-duration: 1.8s; animation-delay: -0.3s;}
    b:nth-of-type(23) {top: 55%; left:  09%; scale: 0.49; animation-duration: 3.4s; animation-delay: -1.7s;}
    b:nth-of-type(24) {top: 57%; right: 12%; scale: 0.44; animation-duration: 1.5s; animation-delay: -1.3s;}
    b:nth-of-type(25) {top: 52%; left:  17%; scale: 0.47; animation-duration: 2.7s; animation-delay: -0.2s;}
    b:nth-of-type(26) {top: 50%; left:  24%; scale: 0.57; animation-duration: 2.0s; animation-delay: -0.9s;}
    b:nth-of-type(27) {top: 47%; right: 28%; scale: 0.52; animation-duration: 3.3s; animation-delay: -2.7s;}
    b:nth-of-type(28) {top: 47%; right: 31%; scale: 0.41; animation-duration: 2.1s; animation-delay: -0.7s;}
    b:nth-of-type(29) {top: 51%; left:  38%; scale: 0.41; animation-duration: 2.7s; animation-delay: -2.1s;}
    b:nth-of-type(30) {top: 57%; left:  41%; scale: 0.58; animation-duration: 2.2s; animation-delay: -1.9s;}
    b:nth-of-type(31) {top: 73%; left:  00%; scale: 0.71; animation-duration: 3.3s; animation-delay: +0.0s;}
    b:nth-of-type(32) {top: 66%; right: 03%; scale: 0.79; animation-duration: 1.9s; animation-delay: -1.8s;}
    b:nth-of-type(33) {top: 72%; left:  09%; scale: 0.60; animation-duration: 3.2s; animation-delay: +0.0s;}
    b:nth-of-type(34) {top: 66%; left:  11%; scale: 0.75; animation-duration: 2.1s; animation-delay: -0.4s;}
    b:nth-of-type(35) {top: 65%; right: 16%; scale: 0.61; animation-duration: 3.1s; animation-delay: -1.4s;}
    b:nth-of-type(36) {top: 68%; right: 20%; scale: 0.64; animation-duration: 2.0s; animation-delay: -0.8s;}
    b:nth-of-type(37) {top: 75%; left:  27%; scale: 0.77; animation-duration: 3.0s; animation-delay: -1.6s;}
    b:nth-of-type(38) {top: 60%; right: 32%; scale: 0.66; animation-duration: 2.1s; animation-delay: -0.5s;}
    b:nth-of-type(39) {top: 62%; right: 38%; scale: 0.61; animation-duration: 2.8s; animation-delay: -0.7s;}
    b:nth-of-type(40) {top: 62%; left:  40%; scale: 0.60; animation-duration: 2.3s; animation-delay: -1.3s;}
    b:nth-of-type(41) {top: 81%; left:  -2%; scale: 0.96; animation-duration: 3.5s; animation-delay: -0.3s;}
    b:nth-of-type(42) {top: 86%; right: 04%; scale: 0.94; animation-duration: 1.7s; animation-delay: -0.3s;}
    b:nth-of-type(43) {top: 84%; left:  08%; scale: 0.95; animation-duration: 2.8s; animation-delay: -1.4s;}
    b:nth-of-type(44) {top: 76%; left:  14%; scale: 0.90; animation-duration: 2.0s; animation-delay: -1.2s;}
    b:nth-of-type(45) {top: 79%; right: 16%; scale: 0.97; animation-duration: 3.3s; animation-delay: -3.1s;}
    b:nth-of-type(46) {top: 88%; right: 24%; scale: 0.84; animation-duration: 1.8s; animation-delay: -1.6s;}
    b:nth-of-type(47) {top: 83%; left:  26%; scale: 0.88; animation-duration: 2.8s; animation-delay: -1.1s;}
    b:nth-of-type(48) {top: 83%; right: 35%; scale: 0.94; animation-duration: 2.3s; animation-delay: -0.9s;}
    b:nth-of-type(49) {top: 82%; left:  39%; scale: 0.85; animation-duration: 3.4s; animation-delay: -0.2s;}
    b:nth-of-type(50) {top: 82%; left:  43%; scale: 0.96; animation-duration: 1.7s; animation-delay: -0.6s;}

    i {
        background: url('https://i.ibb.co/nstc1tvf/Rain-Large.png');
        height: 100%;
        position: fixed;
        left: 0;
        animation: Raindrops .4s linear infinite;
    }

    i:nth-of-type(n+2) {
        background: url('https://i.ibb.co/2Yyz3SFv/Rain-Small.png');
        filter: blur(1px);
        animation-duration: .3s;
    }

    i:nth-of-type(2) {
        mix-blend-mode: multiply;
        opacity: .3;
    }

    i:nth-of-type(3) {
        background-size: 1000px 1000px;
        filter: blur(2px);
        opacity: .7;
        animation-duration: .2s;
    }

    .buttons {
        top: 40px;
        right: 10px;
    }
}