Theme for Moonlight_Splendor

/* Design By Moonchu */
/* Code By AlthIndor */

:root {
    --ctorange: #FF8000;
    --deep-red: #860000;
    --litegold: #F6C898;
    --midnight: #000428;
}

html, body {
    background: url('https://i.imgur.com/093jelR.png') top center #550000;
    height: 100vh;
    min-height: 880px;
}
body {position: relative;}

#header, #profile :is(.avatar, .items), #details, #wishlist, #about, #friends, #journal, #signature {display: none;}
a, button, #multimedia {transition: all .5s ease-in-out;}
* {cursor: url('https://i.imgur.com/k60Wajj.png'), default !important;}

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

/* Sprite Sheet */

#site {background: url('https://i.imgur.com/196w8UA.png');}
#bar a::before, #comments .links a::before {mask: url('https://i.imgur.com/196w8UA.png') no-repeat;}
#addButton a::before {mask-position: 7px -827px;}
#msgButton a::before {mask-position: -33px -827px;}
#tradeButton a::before {mask-position: -73px -827px;}
#comments .links a::before {mask-position: -113px -827px;}

/* 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');
}

@font-face {
    font-family: 'Shantell Sans';
    font-style: normal;
    font-weight: 500;
    src: url('https://fonts.gstatic.com/s/shantellsans/v13/FeVvS0pCoLIo-lcdY7kjvNoQqWVWD0CW_l29ajppTuUTu_cHUjHfsPOL-maYi4xuKiysQU9eBqPs8ws8PWdkSbY1SA.woff2') format('woff2');
}

/* Header */

#gaia_header, #gaia_header ul {
    height: 30px !important;
    font: 0/31px 'Shantell Sans', cursive !important;
}

#gaia_header ul, #gaia_header .favorites_add {
    background: none !important;
    width: unset !important;
}

#gaia_header {
    background: var(--deep-red);
    border-bottom: 3px solid var(--midnight);
}

#gaia_header ul {
    margin: 0 3px;

    li.spacer, .favorites_add span {display: none;}
    li {margin: 0 5px;}

    a {
        color: #FFFFFF !important;
        font-size: 11px;
        font-variation-settings: 'BNCE' 50, 'INFM' 0, 'SPAC' 0;
        text-decoration: none;
        text-transform: uppercase;
    }
    a:hover {color: var(--ctorange) !important;}

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

    .favorites_add {
        cursor: inherit;
        height: unset;
        position: unset;
    }
    .favorites_add::before {content: 'Add As Favorite';}
}

#gaia_header #header_right {
    display: flex !important;
    float: right;
}
#header_right li:has(a[href$='profileprefs']) {order: -2;}
#header_right li:has(.favorites_add) {order: -1;}

/* Main Content */

#site {
    width: 1000px;
    height: 820px;
    margin: 0;
    position: absolute;
    top: calc(50% - 410px + 16px);
    left: calc(50% - 500px);
}
#content, #sidebar, #main {display: contents;}

@media (min-height: 890px) {
    #site {top: calc(50% - 410px);}
}

/* Sections */

.section {
    color: #FFFFFF;
    font: 11px/1.6 'Open Sans', sans-serif;
    padding: 0;
    position: absolute;
}
.section:not(#multimedia) {background: none;}
.section h2 {display: none;}

.section a {
    color: #FFFFFF !important;
    font-weight: 600;
    text-decoration: dotted underline;
}
.section .postcontent a {color: var(--litegold) !important;}
.section a:hover {color: var(--ctorange) !important;}

/* Contact and Media */

#bar, #bar li {background: none !important;}
#bar li {margin: 0 5px 0 0;}
#onlineButton, #offlineButton, #ignoreButton {display: none;}

#profile, .links {
    position: absolute;
    top: 641px;
}
#profile {left: 255px;}
.links {left: 366px;}

#bar {
    height: unset;
    margin: 0;
}

.links, .alert_container, .alert_container li {margin: 0 !important;}
.alert_container li:nth-child(2) {display: none;}

#bar a, #comments .links a, #multimedia {
    background: var(--midnight) !important;
    width: 30px !important;
    height: 30px;
    color: var(--ctorange) !important;
    border: 1px solid currentColor;
    border-radius: 50%;
    overflow: hidden;
}
#bar a:hover, #comments .links a:hover, #multimedia:hover {color: #FFFFFF !important;}
#bar a:hover, #comments .links a:hover {rotate: 1turn;}

#bar a::before, #comments .links a::before, #multimedia::before {
    content: '';
    display: block;
    background: currentColor;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#multimedia::before {mask: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat;}

#bar a, #comments .links a {
    display: block;
    font-size: 0;
    padding: 0;
    position: relative;
}

/* Media */

#multimedia {
    top: 147px;
    right: 255px;
}

#multimedia object {
    position: absolute;
    top: calc(50% - 180px);
    left: calc(50% - 240px);
    opacity: .001;
}

/* Comments */

#comments {display: contents;}
#comments h2 ~ p, #alerts_banner {display: none;}

#comments dl {
    display: grid;
    gap: 15px 0;
    grid-auto-rows: max-content;
    grid-template-columns: 52px calc(100% - 52px);
    overflow: hidden scroll;
    scrollbar-color: #FFFFFF var(--midnight);
    scrollbar-width: thin;

    dt, dt img, .message {position: unset !important;}
    dt, .message {padding: 0 !important;}
    dt {margin-top: 27px;}
    .postcontent {clear: both;}

    position: absolute;
    top: 200px;
    left: 265px;

    dd {display: contents;}
    dd::before, dd::after {content: unset;}

    width: 470px;
    height: 420px;
    padding: 0 10px 0 0;
    box-sizing: border-box;

    dt a {
        display: block;
        background: var(--midnight);
        width: 48px;
        height: 48px;
        border: 2px solid transparent;
        border-radius: 5px;
        overflow: hidden;
    }
    dt a img {margin: -30px 0 0 -25px;}

    .date {
        float: right;
        font-style: normal;
        margin: 0;
    }

    .date, .date + p {
        height: 19px;
        line-height: normal;

        a {
            font-weight: 700;
            text-decoration: none;
        }
    }
    .date + p {border-bottom: 1px dotted var(--ctorange);}

    .message {
        background: none;
        font-size: inherit;
        margin: 0 0 0 -52px;
    }
    .postcontent {margin: 3px 0 0 59px;}

    .postcontent img {
        max-width: 100%;
        margin-top: 4px;
    }
}

/* Misc */

.spoiler-wrapper {padding: 0;}

.spoiler-revealed {
    padding: 10px;
    border-color: var(--midnight);
    border-radius: 5px;
}

.spoiler-control {
    background: #F0F0F0;
    height: 25px;
    color: var(--midnight);
    font: 11px/25px 'Shantell Sans', sans-serif;
    font-variation-settings: 'BNCE' 50, 'INFM' 0, 'SPAC' 0;
    text-transform: uppercase;
    padding: 0 5px;
    border: 1px solid #00000040;
    border-radius: 3px;
}
.spoiler-control:hover {background: var(--litegold);}

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