Pro for LanaBananaFeFiFoFana

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

:root {
    --cyan: #4DFFFF;
    --gold: #FFC569;
    --pink: #FB3773;
    --r1: 2px;
    --r2: 5px;
}

html, body {
    background: #242424;
    min-height: 885px;
}

body {
    background: url('https://i.imgur.com/BQXhOYC.png') center / cover;
    position: relative;
}
body a {text-decoration: none !important;}

* {cursor: url('https://i.imgur.com/ASpeBop.png'), default !important;}

/* Fonts */

@font-face {
    font-family: 'Rationale';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rationale/v28/9XUnlJ92n0_JFxHIfHcccVtN.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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, #viewer #gaia_header ul {height: 40px !important;}
#viewer #gaia_header li.spacer {display: none !important;}
#viewer #gaia_header li {display: contents !important;}

#viewer #gaia_header {
    backdrop-filter: blur(10px) saturate(150%);
    background: #000000C0 !important;
}

#viewer #gaia_header ul, #viewer #gaia_header a {
    display: flex !important;
    color: #FFFFFF !important;
    margin: 0 6px !important;
}

#viewer #gaia_header ul {
    background: none !important;
    width: auto !important;
    font: 0/35px 'Rationale', sans-serif !important;
    text-transform: uppercase;
}
#gaia_header #header_right {float: right;}

#gaia_header a, #gaia_header a::before {font-size: 16px !important;}
#gaia_header a {align-items: center;}
#gaia_header a:hover {box-shadow: 0 -3px var(--pink) inset;}

#header_left img {
    background: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') no-repeat 0 0 / 100% auto;
    width: 0;
    height: 18px;
    padding: 0 42px 0 0;
}

#header_right a[href*='edit'], #header_right a[href*='report.php'] {font-size: 0 !important;}
#header_right a[href*='edit']::before {content: 'Profile Editor';}
#header_right a[href*='report.php']::before {content: 'Report Profile';}

/* Layout Setup */

#columns, #pictures_container, #texts_container {
    top: calc(50% - 342px);
    left: calc(50% - 495px);
}
#columns .column, #pictures_container, #texts_container {position: absolute;}

#columns {
    background: url('https://i.imgur.com/XJVStgZ.png') no-repeat;
    width: 990px;
    height: 685px;
    font-size: 0;
}
#columns .column {margin: 0;}
#column_3 {display: contents;}

#column_1, #column_2, #id_contact, #id_wishlist {right: 0;}
#column_1, #column_2, #id_wishlist {width: calc(100% - 345px);}
#column_2, #id_contact {top: 80px;}

#column_1, #id_wishlist {
    backdrop-filter: blur(10px) saturate(150%);
    background: #000000C0;
    border-radius: var(--r2);
}
#id_wishlist {bottom: 80px;}

#column_1 {
    height: 375px;
    top: 145px;
}

#column_2 {
    height: 440px;
    contain: layout;
}

/* Panels */

.panel, .panel h2 {
    color: #FFFFFF;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#column_3 h2 {display: none;}

.panel {
    background: none;
    font: 12px/1.8 'Open Sans', sans-serif;
    text-align: justify;
    position: absolute;
    overflow: hidden;
}

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

#id_wishlist, #column_2 .panel {
    border: 15px solid transparent;
    overflow-y: scroll;
    scrollbar-color: var(--gold) #FFC56920;
    scrollbar-width: thin;
}

#column_2 .panel {
    width: 100%;
    padding-right: 15px;
    top: 0;
    left: 0;
    border-radius: var(--r2);
}

#column_2 #id_about, #column_2 .panel:hover {
    height: 100%;
    border-width: 80px 15px 15px 15px;
    transition: height 0.5s ease-in-out 0.5s, border-width 0.0s linear 0.5s;
}

#column_2 .panel, #column_2 .panel:hover ~ #id_about {
    height: 0;
    border-width: 0;
    transition: height 0.5s ease-in-out 0.0s, border-width 0.0s linear 0.5s;
}

/* Buttons and Headers */

#id_contact ul {
    display: flex;
    gap: 15px;
}

#id_contact li *, .panel h2 {
    height: 50px !important;
    text-align: center;
    border-radius: var(--r2);
    box-shadow: 0 0 0 2px var(--cyan) inset, 0 0 0 5px #FFFFFF inset;
}

#id_contact li *, .panel h2, .panel:hover ~ #id_about h2 {
    background: var(--pink);
    color: #FFFFFF;
}

#id_contact a:hover, #id_about h2, .panel:hover h2 {
    background: var(--cyan);
    color: #006666;
}

#id_contact li * {
    display: block;
    width: 50px;
    font: 0/50px 'Font Awesome';
}

#id_contact li *::before {font-size: 20px;}
#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: '';}

.panel h2 {
    width: 140px;
    font: bold 0/52px 'Rationale', sans-serif;
    position: fixed;
    top: 0;
    z-index: 1;
}
#about_title {left: 0;}
#comments_title {left: 155px;}
#footprints_title {left: 310px;}

.panel h2::before {font-size: 23px;}
#about_title::before {content: 'about user';}
#comments_title::before {content: 'guest book';}
#footprints_title::before {content: 'visitor log';}

/* Comments */

#id_comments {
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    gap: 20px 10px;
}
#id_comments h2 + div, #alert_container, #id_comments h2 ~ p {display: contents;}
#alerts_banner, .deletecomment, #id_comments .clear {display: none;}

#id_comments dt {
    background: #BD0674;
    height: 25px;
    line-height: 25px;
    padding: 0 6px;
    margin: 0 0 4px 0;
    border: none;
    border-radius: var(--r1);
}
#id_comments dt a {color: #FFFFFF;}
#id_comments dt a:hover {color: var(--cyan);}

#id_comments dd {
    display: grid;
    grid-template: max-content / 60px calc(100% - 60px);
    margin: 0 0 20px 0;
}
#id_comments dd:last-of-type {margin: 0;}

.dropBox {
    background: var(--gold);
    width: 48px;
    height: 48px;
    margin: 6px 0 0 0;
    border: 1px solid transparent;
    border-radius: var(--r1);
    overflow: hidden;
}

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

/* Comment Buttons */

#id_comments h2 + div a, #id_comments h2 ~ p a {
    display: block;
    background: var(--gold);
    width: 30px;
    height: 30px;
    color: #591F00;
    font: 0px/30px 'Font Awesome';
    text-align: center;
    border-radius: var(--r1);
}

#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
    background: #BD0674;
    color: #FFFFFF;
}

#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font-size: 18px;}
#id_comments h2 + div a::before {content: '';}
#id_comments h2 ~ p a::before {content: '';}

/* Visitors */

#id_footprints .item {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}

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

#id_footprints .item::after {content: '.';}

/* Wish List */

#id_wishlist {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    height: 70px;
    font-size: 0;
    scroll-snap-type: y mandatory;
}
#id_wishlist div:not(.item), .premium_sparkle, .glow {display: none;}
#id_wishlist .item, .owner_checkmark {border-radius: var(--r1);}

#id_wishlist .item {
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}

#id_wishlist a {
    display: block;
    background: var(--pink);
    width: 30px;
    height: 30px;
    padding: 5px;
}
#id_wishlist .item:hover a {background: var(--cyan);}
#id_wishlist a[title*='Questing'] {background: var(--gold);}
#id_wishlist a:has(.glow) {background: lime !important;}

.owner_checkmark {
    background: #FFF;
    padding: 3px;
    margin: 0;
    bottom: 0;
    right: 0;
}

/* Media */

.media_panel {
    background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat #000000;
    width: 30px;
    height: 30px !important;
    bottom: 75px;
    left: 290px;
    border-radius: var(--r1);
    filter: invert(1);
}

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

/* Misc */

.spoiler-hidden {padding: 0;}

.spoiler-revealed {
    background: #FFFFFF10;
    padding: 10px;
    border: 1px dotted #FFFFFF80;
    border-radius: var(--r1);
}

.spoiler-control {
    background: #FFFFFF;
    width: 100px;
    height: 25px;
    font: 12px/25px 'Open Sans', sans-serif !important;
    text-transform: capitalize;
    border: none;
    border-radius: var(--r1);
}
.spoiler-control-hide {margin-bottom: 10px;}

.spoiler-control:hover {
    background: var(--pink);
    color: #FFFFFF;
}

/* Twinkle Animation */

@keyframes spin {
    from {rotate: 0turn;}
    to {rotate: -1turn;}
}

#columns::after {
    content: '';
    background: radial-gradient(circle at center, #FFFFFF, #000000 60%);
    clip-path: polygon(0px 4px, 4px 4px, 4px 0px, 6px 0px, 6px 4px, 10px 4px, 10px 6px, 6px 6px, 6px 10px, 4px 10px, 4px 6px, 0px 6px, 0px 4px );
    mix-blend-mode: color-dodge;

    position: absolute;
    top: 166px;
    left: 144px;

    width: 10px;
    height: 10px;

    animation: spin 5s linear infinite;
}