Pro for MintyMiDraws

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

:root {
    --blue: #567D8E;
    --gold: #C5A78F;
    --gray: #484848;
    --lite: #FFDC6E;
}

html, body {
    background: url('https://i.imgur.com/i1pCST6.jpeg') fixed center / cover #0B2B3E;
    min-height: 1200px;
}
body {position: relative;}

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

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

/* Fonts */

@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/v6.5.1/webfonts/free-fa-solid-900.woff2) format('woff2');
}

/* header */

#viewer #gaia_header {
    background: #000000CC;
    height: 40px !important;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to left, #AD7C23, var(--lite), #AD7C23) 2;
    border-radius: 5px;
}
#gaia_header li.spacer {display: none !important;}

#gaia_header ul {
    background: none !important;
    width: unset !important;
    font: 0/38px 'Open Sans', sans-serif !important;
    padding: 0 15px !important;
}
#gaia_header #header_right {float: right;}

#gaia_header a {
    color: #FFFFFF !important;
    font-size: 12px !important;
    text-transform: uppercase;
}
#gaia_header a:hover {color: var(--blue) !important;}

#header_left img {
    -webkit-mask: url('https://i.imgur.com/5FTB40o.png') 0 0 no-repeat;
    mask: url('https://i.imgur.com/5FTB40o.png') 0 0 no-repeat;
    background: currentColor;
    width: 0;
    height: 17px;
    padding: 0 37px 0 0;
}

#header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
    content: '❖';
    color: var(--lite);
    font-size: 13px;
    margin: 0 5px;
}

/* Columns */

#columns, #pictures_container, #texts_container {
    width: 1200px;
    top: calc(50% - 520px + 20px);
    left: calc(50% - 600px);
}
#pictures_container, #texts_container {position: absolute;}

#columns {
    background: url('https://i.imgur.com/Novb9dB.png');
    height: 1040px;
    font-size: 0;
}
#columns .column {display: contents;}

/* Scrollbars */

#columns ::-webkit-scrollbar {
    background: #FFFFFF10;
    width: 8px;
}
#columns ::-webkit-scrollbar-thumb {background: var(--gray);}
#id_wishlist::-webkit-scrollbar-thumb {background: var(--lite);}

@supports not selector(#columns ::-webkit-scrollbar) {
    .panel, dl {
        scrollbar-color: var(--gray) #FFFFFF10;
        scrollbar-width: thin;
    }
    #id_wishlist {scrollbar-color: var(--lite) #FFFFFF10;}
}

/* Panels */

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

.panel {
    background: none;
    color: #FFFFFF;
    font: 10px/1.8 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

.panel a {color: var(--gold);}
.panel a:hover {color: var(--blue);}
.panel h2 {display: none;}
.panel img {max-width: 100% !important;}

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

#id_details, #id_wishlist, #id_comments {left: 545px;}
#id_comments, #id_footprints {top: 593px;}
#id_footprints {left: 832px;}

#id_details, #id_about {
    height: 215px;
    top: 210px;
}

#id_about {
    width: 322px;
    right: 145px;
}

#id_comments {
    width: 223px;
    height: 379px;
}

/* Buttons */

#id_contact, .media_panel {top: 942px;}
#id_contact {left: 810px;}
.media_panel {left: 1025px;}

#id_contact li {float: left;}
#id_contact li:nth-of-type(1) {margin-right: 20px;}
#id_contact li:nth-of-type(2) {margin-right: 19px;}

#id_contact li *, .media_panel {
    background: var(--gray);
    width: 52px;
    height: 52px !important;
    color: #FFFFFF;
    font-size: 0;
    text-align: center;
    border-radius: 10px;
}
#id_contact li * {display: block;}
#id_contact li a:hover, .media_panel:hover {background: var(--blue);}

#id_contact li *::before, .media_panel::before {font: 26px/52px 'Font Awesome';}
#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: '';}
.media_panel::before {content: '';}

.media_panel iframe {
    position: absolute;
    bottom: 0;
    left: -26px;
    scale: 1.5;
    transform-origin: bottom left;
    opacity: .001;
}

/* Details */

#id_details {
    display: grid;
    grid-template-columns: 140px;
    grid-auto-rows: max-content;
    gap: 5px;
    line-height: 1.6;
    box-sizing: unset;
}

#id_details p:first-of-type, .forum_userstatus {border-radius: 5px;}
#id_details p {margin: 0;}
#id_details strong {display: block;}

#id_details p:nth-of-type(1) {
    background: var(--gray);
    padding: 10px;
}

.forum_userstatus, .statuslinks span {padding: 0 !important;}
.statuslinks {display: contents;}
.pushBox {display: none;}

.forum_userstatus {
    background: linear-gradient(135deg, #FFFFFF40 50%, transparent 50%) var(--lite);
    width: 100%;
    height: 30px !important;
    color: var(--gray);
    text-align: center;
    margin: 10px 0 5px 0;
    border: none;
}

.forum_userstatus:has(.offline) {
    background-color: var(--blue);
    color: #FFFFFF;
}

#id_details .forum_userstatus .statuslinks span {
    all: unset;
    color: inherit !important;
    font: 800 11px/30px 'Open Sans', sans-serif !important;
    text-transform: uppercase;
}

.statuslinks span::before {
    content: 'currently ';
    white-space: pre;
}

/* Wish List */

#id_wishlist {
    display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-auto-rows: 40px;
    gap: 10px;
    width: 510px;
    height: 40px;
    top: 489px;
    scroll-snap-type: y mandatory;
}
#id_wishlist .clear, .premium_sparkle {display: none;}
#id_wishlist .item, #id_wishlist a {border-radius: 5px;}

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

#id_wishlist a {
    display: block;
    background: var(--gray);
    width: 30px;
    height: 30px;
    padding: 5px;
}
#id_wishlist .item:hover a {background: var(--blue);}

.owner_checkmark {
    background: #FFFFFF;
    margin: 0;
    padding: 2px;
    bottom: 0;
    left: 0;
    box-shadow: 1px -1px #000;
    filter: hue-rotate(-120deg);
}

/* Comments */

#id_comments #alerts_banner, #id_comments .clear, #id_comments .date a, .dropBox, .deletecomment {display: none;}
#id_comments #alert_container {display: contents;}
#id_comments dd {margin: 0 0 20px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dl {
    width: 100%;
    height: calc(100% - 50px);
    left: 0;
    bottom: 0;
}

#id_comments dt {
    height: unset;
    line-height: 1.6;
    text-align: left;
    margin: 0 0 3px 0;
    padding: 0 0 5px 0;
    border-bottom: 1px dotted #FFFFFF80;
}

#id_comments .username {
    float: none;
    font-size: 12px;
}

#id_comments .date {
    display: flex;
    text-indent: -.75em;
    overflow: hidden;
}

/* Comments Buttons */

#id_comments h2 + div, #id_comments h2 ~ p {
    width: calc(50% - 5px);
    height: 30px;
    margin: 0;
    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: linear-gradient(135deg, #FFFFFF40 50%, transparent 50%) var(--lite);
    width: 100%;
    height: 100%;
    color: var(--gray);
    font-size: 0;
    text-align: center;
}

#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
    background-color: var(--blue);
    color: #FFFFFF;
}

#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: 800 12px/31px 'Open Sans', sans-serif;}
#id_comments h2 + div a::before {content: 'POST NEW';}
#id_comments h2 ~ p a::before {content: 'VIEW ALL';}

/* visitors */

#id_footprints .item {
    display: flex;
    flex-flow: row nowrap;
}
#id_footprints .item:nth-of-type(n+18) {display: none;}

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

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