Pro for xHello Batty

/* Design by Cassiel Socks */
/* And Coding by AlthIndor */

:root {
    --inky: #0C1642;
    --rock: #3A50B4;
    --shell: #F291CB;
    --seafoam: #99FFCC;
    --shadow: drop-shadow(2px 2px 2px #00000040);
}

html, body {
    background: url('https://i.imgur.com/vdLkhnm.jpeg') center / cover var(--inky);
    min-height: 1050px;
}
body {position: relative;}

body a {
    text-decoration: none !important;
    transition: all .5s ease-in-out;
}

::selection {
    background: dodgerblue;
    color: #FFFFFF;
}

/* Sprite Sheet */

#gaia_header img {mask: url('https://i.imgur.com/iRtMxcC.png') bottom left;}

#columns, #column_1 h2, #id_contact li *, #id_store a, #id_forum a {background: url('https://i.imgur.com/iRtMxcC.png') no-repeat border-box;}
#columns {background-position: right top;}

#column_1 #wishlist_title {background-position-y: -90px;}
#column_1 #comments_title {background-position-y: -180px;}
#column_1 #footprints_title {background-position-y: -270px;}

#id_contact li:nth-of-type(1) * {background-position-y: -400px;}
#id_contact li:nth-of-type(2) * {background-position-y: -440px;}
#id_contact li:nth-of-type(3) * {background-position-y: -480px;}
#id_store a {background-position-y: -520px;}
#id_forum a {background-position-y: -560px;}

/* Fonts */

@font-face {
    font-family: 'Londrina Solid';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/londrinasolid/v17/flUhRq6sw40kQEJxWNgkLuudGfNeKBM.woff2) format('woff2');
}

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

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

/* Header */

#viewer #gaia_header {
    background: var(--inky) !important;
    height: 40px !important;
    filter: var(--shadow);
}
#gaia_header :is(ul, li) {margin: 0 6px !important;}
#gaia_header li.spacer {display: none !important;}

#viewer #gaia_header ul {
    background: none !important;
    width: auto !important;
    font: 400 0/39px 'Londrina Solid', sans-serif !important;
}

#gaia_header #header_right {
    display: flex !important;
    float: right;
}
#header_right li:nth-of-type(1) {order: -2;}
#header_right li:nth-of-type(4) {order: -1;}

#gaia_header a, #gaia_header a::before {font-size: 16px !important;}

#gaia_header a {
    color: #FFFFFF !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
#gaia_header a:hover {color: var(--seafoam) !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 img {
    background: currentColor;
    width: 0;
    height: 19px;
    padding: 0 42px 0 0;
    transition: all .5s ease-in-out;
}

/* Columns */

#columns, #pictures_container, #texts_container {
    top: calc(50% - 405px + 20px);
    left: calc(50% - 485px);
}
#column_1, #pictures_container, #texts_container {position: absolute;}

#columns {
    width: 970px;
    height: 810px;
    contain: layout;
}
#column_2, #column_3 {display: contents;}

#column_1 {
    width: 360px;
    height: 472px;
    font-size: 0;
    margin: 0;
    top: 254px;
    left: 120px;
    border-radius: 15px;
}

/* Scrollbars */

.panel, #id_comments dl {
    scrollbar-color: #000 #00000010;
    scrollbar-width: thin;
}

#columns ::-webkit-scrollbar, #columns ::-webkit-scrollbar-thumb {
    width: 8px;
    border-radius: 4px;
}
#columns ::-webkit-scrollbar {background: #00000010;}
#columns ::-webkit-scrollbar-thumb {background: #000;}

/* Panels */

.panel, .panel h2 {
    margin: 0;
    padding: 0;
}
#column_2 h2, #column_3 h2 {display: none;}

.panel, #id_comments dl {
    box-sizing: border-box;
    overflow: hidden;
}

.panel {
    background: none;
    color: #000;
    font: 12px/1.6 'Open Sans', sans-serif;
    position: absolute;
}

.panel a {color: var(--rock);}
.panel a:hover {color: var(--seafoam);}
.panel img:not(.avatarImage) {max-width: 100% !important;}

.custom_panel, #id_wishlist, #id_comments dl, #id_about {
    padding-right: 15px;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

#column_1 .panel {
    width: 100%;
    height: 100%;
    border: 15px solid transparent;
}

#column_1 .panel, #column_1 .panel:hover ~ #id_about {
    left: -100%;
    transition: left 0.5s 0.0s ease-in-out;
}

#column_1 .panel:hover, #column_1 #id_about {
    left: 0;
    transition: left 0.5s 0.5s ease-in-out;
}

/* Headers */

#column_1 h2 {
    width: 100px;
    height: 90px;
    font-size: 0;
    position: fixed;
    left: 10px;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    clip-path: path('M95.1,25.7a11.7,11.7,0,0,0-6.3-3.4A20.2,20.2,0,0,0,81.6,8.8C75.3,3.2,66.9,5.1,64,6.1,62.8,4,59.2,0,50,0S37.2,4,36,6.1c-3-.9-11.3-2.9-17.7,2.7a20.2,20.2,0,0,0-7.2,13.6,11.7,11.7,0,0,0-6.3,3.4A17.4,17.4,0,0,0,0,39.6C.7,50.3,9.5,62.8,17.4,69a48.1,48.1,0,0,0,21,9.5l-1.6,2a4.1,4.1,0,0,0,0,5.2c1.3,1.6,4.1,3.6,9.5,4.2h7.3c5.5-.6,8.2-2.6,9.5-4.2a4.1,4.1,0,0,0,0-5.2h0l-1.6-2a48.1,48.1,0,0,0,21-9.5c7.9-6.3,16.6-18.7,17.3-29.5A17.4,17.4,0,0,0,95.1,25.7Z');
}

#column_1 .panel:hover h2 {
    width: 115px;
    opacity: 1;
    clip-path: path('M50,0c-9.2,0-12.8,4-14,6.1c-3-0.9-11.3-2.9-17.7,2.7c-5.9,5.2-7,11.1-7.2,13.6c-1.4,0.3-4,1-6.3,3.4C1.3,29.4-0.3,34.1,0,39.6C0.7,50.3,9.5,62.8,17.4,69c6.1,4.8,13.1,8,21,9.5l-1.6,2c-1.2,1.5-1.2,3.7,0,5.2c1.3,1.6,4.1,3.6,9.5,4.2c0.4,0,2,0.1,3.7,0.1c0,0,65,0,65,0V0H50z');
}

.custom_panel h2 {top: 280px;}
#wishlist_title {top: 390px;}
#comments_title {top: 500px;}
#footprints_title {top: 610px;}
#about_title {display: none;}

/* Avatar */

@keyframes bounce {
    from {translate: 0 5px;}
    to {translate: 0 -5px;}
}

#id_details {
    top: 635px;
    left: 490px;
    animation: bounce 2.5s ease-in-out infinite alternate;
    filter: var(--shadow);
}
#id_details h2 ~ :nth-child(n+3) {display: none;}
#id_details p {margin: 0;}

/* Contact Buttons */

#id_contact, #id_store, #id_forum {top: 765px;}
#id_contact {left: 270px;}
#id_store {left: 420px;}
#id_forum {left: 640px;}

#id_contact ul {
    display: flex;
    gap: 10px;
}
#id_contact li {display: contents;}

#id_contact li *, #id_store a, #id_forum a {
    display: block;
    background-color: var(--rock);
    width: 36px;
    height: 36px;
    font-size: 0;
    border: 2px solid #000;
    border-radius: 50%;
}
:is(#id_contact, #id_store, #id_forum) a:hover {background-color: var(--shell);}

:is(#id_store, #id_forum) h2 ~ :not(p:last-child) {display: none;}
:is(#id_store, #id_forum) h2 ~ p:last-child {display: contents;}

/* Media */

.media_panel {
    background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat var(--rock);
    width: 36px;
    height: 36px !important;
    top: 181px;
    left: 156px;
    border-radius: 7.5px;
    transition: all .5s ease-in-out;
}
.media_panel:hover {background-color: var(--shell);}

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: -2px;
    left: -16px;
    opacity: .001;
}

/* Wish List */

#id_wishlist {
    display: grid;
    gap: 8px 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 42px;
    scroll-snap-type: y mandatory;
}
#id_wishlist .item, #id_wishlist a {width: 100%;}
#id_wishlist .clear, .premium_sparkle {display: none;}

#id_wishlist .item {
    contain: layout;
    height: 100%;
    scroll-snap-align: start;
}

#id_wishlist a {
    display: block;
    height: 40px;
    text-align: center;
    padding: 4px 0;
    box-sizing: border-box;
}
#id_wishlist a:hover {background: var(--shell);}

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

/* Comments */

#id_comments :is(#alerts_banner, .date a, .deletecomment, .clear) {display: none;}
#id_comments :is(#alert_container, .username) {display: contents;}
#id_comments :is(dt, .date) {display: flex;}
#id_comments :is(p, dd:last-of-type) {margin: 0;}

#id_comments dl {
    clear: both;
    height: calc(100% - 50px);
    margin-top: 50px;
}

#id_comments dt {
    justify-content: space-between;
    height: 21px;
    line-height: 1;
    padding: 0;
    margin: 0 0 6px 0;
    border-bottom: 1px dotted #000;
}

#id_comments .date {
    text-indent: -8px;
    overflow: hidden;
}

#id_comments dd {
    display: grid;
    gap: 10px;
    grid-template: 1fr / 50px calc(100% - 60px);
    margin: 0 0 15px 0;
}

#id_comments .dropBox {
    background: var(--shell);
    width: 48px;
    height: 48px;
    margin: 4px 0 0 0;
    border: 1px solid transparent;
    border-radius: 5px;
    overflow: hidden;
}

#id_comments .dropBox img {
    width: 120px;
    height: 150px;
    margin: -30px 0 0 -47px;
}

/* Comments Buttons */

#id_comments h2 + div, #id_comments h2 ~ p {
    width: calc(50% - 5px);
    height: 30px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
    display: block;
    background: var(--rock);
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    font: 400 0/31px 'Londrina Solid', sans-serif;
}
#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {background: var(--shell);}

#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font-size: 16px;}
#id_comments h2 + div a::before {content: 'POST NEW COMMENT';}
#id_comments h2 ~ p a::before {content: 'SEE ALL COMMENTS';}

/* visitors */

#id_footprints .item {display: flex;}

#id_footprints .item::before {
    content: ' visited ';
    white-space: pre;
}

#id_footprints .item a {order: -1;}
#id_footprints .item::after {content: '.';}

/* Misc */

#id_comments dt a, #id_footprints .item a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden visible;
}
#id_comments dt a {max-width: 185px;}
#id_footprints .item a {max-width: 200px;}

#id_wishlist a, .spoiler-control {
    background: lavender;
    border: 1px solid #00000040;
    border-radius: 5px;
}

.spoiler-wrapper {padding: 0;}
.spoiler-revealed {padding: 10px;}

.spoiler-control {
    width: 100px;
    height: 30px;
    font: inherit;
    padding: 5px 10px;
}
.spoiler-control:hover {filter: brightness(90%);}
.spoiler-control-hide {margin-bottom: 10px;}

.bbcode-swapping-image {mix-blend-mode: multiply;}