Pro for Cozy Sleuth

/* Profile By AlthIndor */

:root {
    --lightblue: #7DC3E1;
    --lightgold: #F3DFB2;
    --lightpink: #F7BCC0;
    --lightpurp: #D2BAFB;
    --flowercol: #D96C6C;
}

html, body {
    background: #8C83A8;
    height: 858px;
    min-height: 100vh;
}
body {position: relative;}

.bbcode-swapping-image {background: url('https://i.imgur.com/2MbyLRf.png');}
* {cursor: url('https://i.imgur.com/hyDLMKI.png') 4 0, auto !important;}

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

#site #about a {color: crimson;}
#site #comments a {color: rebeccapurple;}
#site a:hover {color: inherit !important;}

#header, #equipped_id, #details, #friends, #journal, #signature {display: none;}

/* Fonts */

@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300 700;
    src: url('https://fonts.gstatic.com/s/comfortaa/v47/1Ptsg8LJRfWJmhDAuUs4TYFq.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 */

#gaia_header ul {
    background: none !important;
    width: auto !important;
    font: 700 0/20px 'Comfortaa', sans-serif !important;
    text-transform: lowercase;
}
#header_right {float: right !important;}

#gaia_header li.spacer, #header_right span {display: none;}
#gaia_header li {margin: 0 5px;}

#gaia_header a {
    display: inline-block;
    color: #FFFFFF !important;
    font-size: 12px;
    padding: 10px 6px 2px 6px;
    position: relative;
    top: -10px;
    border: 3px solid #FFFFFF;
    border-radius: 0 0 5px 5px;
}

#gaia_header a:hover {
    text-shadow: 0 0 5px #FFFFFF;
    top: -3px;
}

#header_left li:nth-of-type(4n-3) a, #header_right li:nth-of-type(2) a {background: var(--lightpurp) !important;}
#header_left li:nth-of-type(4n-2) a, #header_right li:nth-of-type(3) a {background: var(--lightpink) !important;}
#header_left li:nth-of-type(4n-1) a, #header_right li:nth-of-type(4) a {background: var(--lightgold) !important;}
#header_left li:nth-of-type(4n-0) a, #header_right li:nth-of-type(1) a {background: var(--lightblue) !important;}

#header_right a.favorites_add {
    width: unset;
    height: unset;
    right: unset;
}
#header_right .favorites_add::before {content: attr(title);}
#header_right a[href*='logout']::after {content: ' of gaia';}

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

/* Main Areas */

#site {
    background: url('https://i.imgur.com/bgbSj7P.png');
    contain: layout;
    margin: 0;
    overflow: hidden;

    #content, #sidebar, #main {display: contents;}

    width: 925px;
    height: 708px;
    position: absolute;
    top: calc(50% - 354px);
    left: calc(50% - 462px);
}

/* Sections */

.section {
    background: none !important;
    color: #404040;
    font: 500 11px/1.6 'Comfortaa', sans-serif;
    padding: 0;
}
.section h2 {display: none;}
.section img:not(dt a img) {max-width: 100%;}

#wishlist, #about, #about ol, #comments {
    border: 10px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden scroll;
    scrollbar-color: #FFFFFF #00000010;
    scrollbar-width: thin;
}
#wishlist, #about, #comments {position: absolute;}
#wishlist, #about {top: 20px;}
#wishlist {left: 60px;}

#about, #about ol, #comments {
    width: 338px;
    height: 152px;
    left: 162px;
}
#about, #comments {padding-right: 10px;}
#comments {bottom: 20px;}

#about h2 ~ ol {position: fixed;}
#about h2 ~ ol:nth-of-type(1) {top: 192px;}
#about h2 ~ ol:nth-of-type(2) {top: 364px;}
#about h2 ~ br {display: none;}

/* Avatar and Contact Buttons */

#profile {display: contents;}
#bar, #profile .avatar {position: absolute;}
#bar, #bar a {background: none !important;}
#bar, #about :is(.links, .links li) {margin: 0;}
#bar, #about .links {right: 121px;}

#bar {
    display: grid;
    grid-template: 50px 50px / 50px 50px;
    gap: 20px;

    #onlineButton, #offlineButton, #ignoreButton {display: none;}
    #addButton, #msgButton, #tradeButton {display: contents;}

    height: unset;
    top: 36px;
}

#profile .avatar {
    top: 21px;
    left: 521px;
    border-radius: 5px;
}

#about .links {
    position: fixed;
    top: 106px;
}
#about .links li:nth-last-child(n+2) {display: none;}

#bar a, #about .links a {
    display: block;
    width: 50px !important;
    height: 50px;
    color: #E89496 !important;
    font-size: 0;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    -webkit-text-stroke: 4px #FFFFFF;
    paint-order: stroke fill;
}

#bar a:hover, #about .links a:hover {
    color: var(--lightblue) !important;
    rotate: 1turn;
}

#bar a::before, #about .links a::before {font: 32px/50px 'Font Awesome';}
#addButton a::before {content: '';}
#msgButton a::before {content: '';}
#tradeButton a::before {content: '';}
#about .links a::before {content: '';}

/* Wish List */

#wishlist {
    width: 82px;
    height: 668px;
    scroll-snap-type: y mandatory;

    .items {display: contents;}
    img, a::after {transition: all .5s ease-in-out;}
    img {background: none !important;}
}

#wishlist li {
    display: block;
    scroll-snap-align: start;
}
#wishlist li:nth-of-type(n+2) {margin-top: 10px;}

#wishlist a {
    display: block;
    background: #FFFFFF;
    width: 30px;
    height: 30px;
    padding: 6px;
    position: relative;
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #40404080 inset;
}

#wishlist a::after {
    content: '';
    width: 34px;
    height: 34px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 1px dotted #404040C0;
}

#wishlist a:hover {
    background: var(--flowercol);
    box-shadow: 0 0 0 1px #FFFFFF inset;
}
#wishlist a:hover::after {border-color: #FFFFFF;}
#wishlist a:hover img {rotate: 1turn;}

/* Comments */

#comments :is(#alerts_banner, h2 ~ p) {display: none;}
#comments :is(dl, dl dt) {padding: 0;}
#comments :is(.date, .date + p) {line-height: 1;}
#comments dt {height: 0;}
#comments dd {display: contents;}
#comments dd::before, #comments dd::after {content: unset;}
#comments :is(.message, .date, li) {margin: 0;}

#comments dt a {
    display: block;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    overflow: hidden;

    img {
        position: unset !important;
        margin: -30px 0 0 -25px;
    }

    position: absolute;
    top: 34px;
    left: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
}

#comments .message {
    background: none;
    border-radius: 5px;
    font: inherit !important;
    padding: 10px;
    position: unset;
    min-height: 76px !important;
}
#comments .caption .message {background: #00000010;}

#comments .date {
    float: right;
    font-style: normal;
}

#comments .postcontent {
    border-top: 1px dotted currentColor;
    margin-top: 5px;
    padding: 4px 0 0 59px;
}

#comments .admin {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;

    li:first-child {order: 1;}
    li:first-child a::before {content: 'Delete Comment';}
    img {display: none;}

    font-size: 9px;
    margin: 2px 0 0 60px;
    padding-top: 3px;
    border-top: 1px dotted currentColor;
}
#comments .admin::after {content: '•';}

/* Comments Links */

#comments :is(.links div, .alert_container) {display: contents;}

#comments .links {
    display: flex;
    justify-content: space-between;
    font-size: 0;
    text-align: center;

    li {flex: 0 0 calc(50% - 5px);}

    a {
        display: block;
        background: #FFFFFF;
        border-radius: 5px;
        height: 20px;
    }


    a:hover {
        background: rebeccapurple;
        color: #FFFFFF !important;
    }

    a::before {font: 700 10px/22px 'Comfortaa', sans-serif;}
    li:nth-of-type(1) a::before {content: 'Post New Comment';}
    li:nth-of-type(2) a::before {content: 'View All Comments';}
}

/* Multimedia */

#multimedia, #multimedia object {position: absolute;}

#multimedia {
    background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat var(--flowercol) !important;
    border-radius: 5px;
    width: 30px;
    height: 30px !important;
    right: 98px;
    bottom: 54px;
    overflow: hidden;
    transition: all .5s ease-in-out;
}
#multimedia:hover {background-color: var(--lightblue) !important;}

#multimedia object {
    width: 480px;
    height: 360px;
    top: calc(50% - 180px);
    left: calc(50% - 240px);
    opacity: .001;
}