Pro for Leonardo da Binchi

/* Design by Nezumimousey */
/* With Code By AlthIndor */

:root {
    --gaialogopink: #FC90A0;
    --deets-header: #185BC2;
    --deets-border: #15237B;
    --deets-stroke: #15237B;
    --equip-header: #6B8BD5;
    --equip-border: #3053A7;
    --equip-stroke: #3053A7;
    --wishs-header: #E79E9C;
    --wishs-border: #D0726F;
    --wishs-stroke: #BE6461;
    --visit-header: #FBCDDF;
    --visit-border: #C56C74;
    --visit-stroke: #8A3B42;
    --about-header: #C9E7FF;
    --about-border: #647FCD;
    --about-stroke: #344C91;
    --journ-header: #CDD0FB;
    --journ-border: #826CC5;
    --journ-stroke: #4E3B8A;
    --cmnts-header: #FDF9CF;
    --cmnts-border: #B8CD74;
    --cmnts-stroke: #AF7B38;
    --signt-header: #DBF9CE;
    --signt-border: #6FC26E;
    --signt-stroke: #3E873D;
}

html, body {
    height: unset;
    min-height: 100vh;
}
html {background: url('https://i.ibb.co/mVrr642P/Wallpaper.webp') bottom center / cover #B6CAD5;}

body {
    background: #FFFFFF;
    border: 3px solid #33455C;
    border-top: none;
    box-shadow: 0 10px 15px #00000040;
    margin: 20px auto;
    width: 889px;
}

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

@keyframes AnimatedCursor {
    000% {cursor: url('https://i.imgur.com/5UobqpO.png'), default;}
    010% {cursor: url('https://i.imgur.com/HYguKO1.png'), default;}
    020% {cursor: url('https://i.imgur.com/jFhdFi0.png'), default;}
    030% {cursor: url('https://i.imgur.com/dOHve2y.png'), default;}
    050% {cursor: url('https://i.imgur.com/ViM6KHg.png'), default;}
    060% {cursor: url('https://i.imgur.com/aGQjx3d.png'), default;}
    065% {cursor: url('https://i.imgur.com/DZhLjS5.png'), default;}
    070% {cursor: url('https://i.imgur.com/h5SPUhz.png'), default;}
    075% {cursor: url('https://i.imgur.com/rLPb1c1.png'), default;}
    080% {cursor: url('https://i.imgur.com/ZDwGgqy.png'), default;}
    085% {cursor: url('https://i.imgur.com/rLPb1c1.png'), default;}
    090% {cursor: url('https://i.imgur.com/h5SPUhz.png'), default;}
    095% {cursor: url('https://i.imgur.com/rLPb1c1.png'), default;}
    100% {cursor: url('https://i.imgur.com/ZDwGgqy.png'), default;}
}

*, a, button {cursor: url('https://i.imgur.com/ZDwGgqy.png'), default;}

#gaia_header a:hover,
.panel:not(#id_equipment):not(#id_wishlist) :is(a:hover, a *:hover),
button:hover, button *:hover {animation: AnimatedCursor 1s steps(1) 1 forwards;}

/* Cursor Image Preloader */

#panel-details .hd {
    background:
        url('https://i.imgur.com/5UobqpO.png'),
        url('https://i.imgur.com/HYguKO1.png'),
        url('https://i.imgur.com/jFhdFi0.png'),
        url('https://i.imgur.com/dOHve2y.png'),
        url('https://i.imgur.com/ViM6KHg.png'),
        url('https://i.imgur.com/aGQjx3d.png'),
        url('https://i.imgur.com/DZhLjS5.png'),
        url('https://i.imgur.com/h5SPUhz.png'),
        url('https://i.imgur.com/rLPb1c1.png');
}

/* Sprite Sheet */

#id_details .forum_userstatus span, #id_contact li *, #id_store a, .media_panel, .panel h2, #id_comments h2 + div a, #id_comments h2 ~ p a, #id_journal h2 + p a {background: url('https://i.imgur.com/lAKLhuH.png') no-repeat border-box;}

#id_details .forum_userstatus span.offline {background-position-x: -42px;}
#id_contact li:nth-of-type(1) * {background-position-x: -84px;}
#id_contact li:nth-of-type(2) * {background-position-x: -126px;}
#id_contact li:nth-of-type(3) * {background-position-x: -168px;}
#id_store a {background-position-x: -210px;}
.media_panel {background-position-x: -252px;}

#id_details h2 {background-position-y: -40px;}
#id_equipment h2 {background-position-y: -80px;}
#id_wishlist h2 {background-position-y: -120px;}
#id_footprints h2 {background-position-y: -160px;}
#id_about h2 {background-position-y: -200px;}
#id_journal h2 {background-position-y: -240px;}
#id_comments h2 {background-position-y: -280px;}
#id_signature h2 {background-position-y: -320px;}

/* Fonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@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');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Header */

#viewer #gaia_header, #gaia_header ul {
    background: #33455C !important;
    height: 40px !important;
}

#viewer #gaia_header {
    box-shadow: 0 3px #33455C40;

    ul {
        font: 0/38px 'Open Sans', sans-serif !important;
        padding: 0 7px !important;
        width: unset !important;
    }

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

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

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

    a {color: #FFFFFF !important;}
    a:hover {color: var(--gaialogopink) !important;}

    #header_left img {
        mask: url('https://i.imgur.com/5FTB40o.png');
        background: currentColor;
        width: 0;
        height: 16px;
        margin-top: -1px;
        padding: 0 37px 0 0;
    }
}

/* Columns */

#panel-details {
    background: url('https://i.imgur.com/UZL0a0R.png') bottom right;
    border-bottom: 3px solid #33455C;
    height: 380px;
}

#columns, #columns .column {
    contain: layout;
    float: none;
    font-size: 0;
}
#columns .column {margin: 0;}

#columns {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    padding: 20px;
    position: unset;
}

#column_1 {width: 297px;}
#column_2 {width: 532px;}

#column_3 {
    display: none;
    width: 100%;
}

/* Panels */

.panel {
    border: 1px solid;
    font: 11px/1.6 'Open Sans', sans-serif;
    margin: 0 0 20px 0;
    overflow: hidden;
}
.panel:last-of-type {margin: 0;}

.panel h2 {
    border-bottom: 1px solid;
    font-size: 0;
    height: 40px;
    margin: -15px -15px 15px -15px;
    padding: 0;
}
:is(#id_contact, #id_store, .media_panel) h2 {display: none;}

.panel img:not(.avatarImage), .panel:not(.media_panel) iframe {max-width: 100% !important;}
.bbcode-swapping-image {mix-blend-mode: multiply;}

/* Classic Colors */

#id_details, #id_details h2 {border-color: var(--deets-border);}
#id_equipment, #id_equipment h2 {border-color: var(--equip-border);}
#id_wishlist, #id_wishlist h2 {border-color: var(--wishs-border);}
#id_footprints, #id_footprints h2 {border-color: var(--visit-border);}
#id_about, #id_about h2 {border-color: var(--about-border);}
#id_comments, #id_comments h2 {border-color: var(--cmnts-border);}
#id_journal, #id_journal h2 {border-color: var(--journ-border);}
#id_signature, #id_signature h2 {border-color: var(--signt-border);}

#id_details {background: hsl(from var(--deets-header) h 50% 97.5%);}
#id_equipment {background: hsl(from var(--equip-header) h 50% 97.5%);}
#id_wishlist {background: hsl(from var(--wishs-header) h 50% 97.5%);}
#id_footprints {background: hsl(from var(--visit-header) h 50% 97.5%);}
#id_about {background: hsl(from var(--about-header) h 50% 97.5%);}
#id_comments {background: hsl(from var(--cmnts-header) h 50% 97.5%);}
#id_journal {background: hsl(from var(--journ-header) h 50% 97.5%);}
#id_signature {background: hsl(from var(--signt-header) h 50% 97.5%);}

#id_details a {color: var(--deets-stroke);}
#id_footprints a {color: var(--visit-stroke);}
#id_about a {color: var(--about-stroke);}
#id_comments a {color: var(--cmnts-stroke);}
#id_journal a {color: var(--journ-stroke);}
#id_signature a {color: var(--signt-stroke);}
.panel a:hover {color: inherit !important;}

/* Details */

#id_details {
    height: 264px;
    line-height: normal;
    text-align: left;

    h2 {margin-bottom: 65px;}
    p {margin: .75cap 0;}
    strong {display: block;}

    p:first-of-type {
        background: hsl(from var(--equip-header) h s 90);
        border-radius: 5px;
        float: left;
        margin: 0 10px 0 0;
        padding: 10px;
        width: 120px;
    }

    p:nth-of-type(n+7) {display: none;}
}

/* Forum Status and Contact */

.forum_userstatus, .forum_userstatus span, #id_contact li *, #id_store a, .media_panel {
    border: 1px solid var(--equip-border);
    border-radius: 5px;
    box-shadow: 0 1px inset #FFFFFF, 0 0 0 1px inset var(--equip-header);
    box-sizing: border-box;
    font-size: 0 !important;
    height: 40px !important;
}
.forum_userstatus, .forum_userstatus span, .media_panel {padding: 0 !important;}

.forum_userstatus span, #id_contact li *, #id_store a, .media_panel {
    background-color: hsl(from var(--equip-header) h s 90) !important;
    width: 42px !important;
}
#id_contact a:hover, #id_store a:hover, .media_panel:hover {background-color: #FFFFFF !important;}

.forum_userstatus {
    background: linear-gradient(to right, hsl(from var(--equip-header) h s 90), hsl(from var(--equip-header) h s 80));
    width: calc(100% - 10px) !important;

    .statuslinks {display: contents;}
    .pushBox {display: none;}
    span {margin: 4px 0 0 8px !important;}

    position: absolute;
    top: calc(41px + 5px);
    left: 5px;
}

#id_contact, #id_contact li, #id_store {display: contents;}
#id_store :is(h3, div, p:first-of-type) {display: none;}
#id_store p:last-of-type {display: contents;}

#id_contact ul, #id_store a, .media_panel {
    position: absolute;
    top: 52px;
}
#id_store a {left: 196px;}

#id_contact ul {
    display: flex;
    flex-flow: row nowrap;
    gap: 3px;
    left: 61px;
}

.media_panel {
    left: 241px;
    overflow: clip;
    overflow-clip-margin: 1px;

    iframe {
        width: 300px;
        height: 200px;
        position: absolute;
        bottom: -6px;
        left: -23px;
        scale: 1.25;
        transform-origin: bottom left;
        opacity: .001;
    }
}

/* Item Lists */

#id_equipment, #id_wishlist {
    display: flex;
    flex-flow: row wrap;
    gap: 5px;

    h2 {
        flex: 100% 1 0;
        margin-bottom: 10px;
    }

    .item {contain: layout;}
    .premium_sparkle {display: none;}

    .item a {
        display: block;
        width: 30px;
        height: 30px;
        padding: 5px;
        border-radius: 5px;
    }

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

#id_equipment a {background: hsl(from var(--equip-header) h s 90);}
#id_equipment a:hover {background: var(--equip-header);}

#id_wishlist a {background: hsl(from var(--wishs-header) h s 90);}
#id_wishlist a:hover {background: var(--wishs-header);}

/* Comments and Journal Buttons */

#id_comments h2 + div a, #id_comments h2 ~ p a, #id_journal h2 + p a {
    background-color: var(--gaialogopink);
    background-position-x: -5px;
    border: 1px solid #00000080;
    border-radius: 5px;
    width: 28px;
    height: 28px;
    font-size: 0;
    position: absolute;
    top: 5px;
}
#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover, #id_journal h2 + p a:hover {background-color: #FFFFFF;}

#id_comments h2 + div a {
    background-position-y: -405px;
    right: 40px;
}

#id_comments h2 ~ p a, #id_journal h2 + p a {
    background-position-y: -365px;
    right: 5px;
}

/* Comments */

#id_comments #alert_container {display: contents;}
#id_comments #alerts_banner {display: none;}
#id_comments p {margin: 0;}

#id_comments dt {
    border: none;
    display: flex;
    height: 0;
    line-height: 7px;
    margin-left: 62px;
    padding: 0;
    position: relative;

    .username {margin-right: 4px;}
    .date {display: contents;}
    .date a {display: none;}
}

#id_comments dd {
    display: grid;
    gap: 10px;
    grid-template: 1fr / 52px calc(500px - 62px);
    margin: 0 0 30px 0;

    .deletecomment {display: none;}

    .postcontent {
        border-top: 1px solid var(--cmnts-border);
        margin-top: 18px;
        padding-top: 4px;
    }
}
#id_comments dd:last-of-type {margin: 0;}

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

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

/* Journal */

#id_journal h3 {
    border-bottom: 1px solid var(--journ-border);
    font-size: 13px;
    line-height: 1;
    padding-bottom: 14px;
    margin-bottom: 9px;
}
#id_journal ul {margin-left: 10px;}

/* Misc Panel Stuff */

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

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

#id_footprints a {
    order: -1;
    max-width: 180px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#id_signature h2 ~ p {display: contents;}

.spoiler-control {
    background: #E8E8E8;
    border: 1px solid #00000080;
    border-radius: 5px;
    width: 100px;
    height: 30px;
    font: inherit;
    text-transform: capitalize;
}
.spoiler-control:hover {background: #D8D8D8;}
.spoiler-control span {pointer-events: none;}

.spoiler-revealed {
    border-radius: 5px;
    padding: 10px;
}
.spoiler-hidden {padding: 0;}

/* Editor Features */

form #column_3 {
    display: block;
    background: #C00;
    border-radius: 5px;
    margin-left: 0px !important;
    text-align: center;
}

form #column_3::before {
    content: 'NO PANELS ALLOWED IN THIS COLUMN';
    color: #FFFFFF;
    font: 700 11px/40px 'Open Sans', sans-serif;
}