Pro for imalwaystiired

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

:root {
    --avatar-color: #ADBE97;
    --border-color: #D67A54;
    --button-color: #FECCD5;
    --hovers-color: #FFEB7F;
}

html, body {
    background: url('https://i.imgur.com/usrGpgN.png') #FEFCFC;
    overflow: hidden;
}
*, button {cursor: url('https://i.imgur.com/8QtULYh.png'), default !important;}

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

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

#columns, .panel h2, #id_contact li *, .panel.media_panel {background: url('https://i.imgur.com/ZvrqOKb.png') no-repeat;}
#id_footprints h2 {background-position-y: -481px;}
#id_wishlist h2 {background-position-y: -523px;}
#id_contact li:nth-of-type(2) * {background-position-y: -565px;}
#id_contact li:nth-of-type(3) * {background-position-y: -607px;}
.panel.media_panel {background-position-y: -649px;}

/* Fonts */

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

/* Header */

#viewer #gaia_header {
    background: var(--avatar-color) !important;
    border-radius: 5px;
    box-shadow: 0 2px rgb(from var(--border-color) r g b / 25%);
    width: calc(100% - 20px) !important;
    height: 30px !important;

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

    ul {
        background: none !important;
        font: 700 0/30px 'Comfortaa', sans-serif !important;
        width: unset !important;
    }

    #header_right {
        display: flex !important;
        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*='?mode=edit'], #header_right a[href*='report.php'] {font-size: 0 !important;}
    #header_right a[href*='?mode=edit']::before {content: 'v2 editor';}
    #header_right a[href*='report.php']::before {content: 'report user';}

    a {
        color: #FFFFFF !important;
        text-transform: lowercase;
    }
    a:hover {opacity: .5;}

    top: 10px !important;
    left: 10px !important;

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

/* Columns */

#columns, #pictures_container, #texts_container {
    top: calc(50% - 235px);
    left: calc(50% - 281px);
}
#pictures_container, #texts_container {position: absolute;}

#columns {
    contain: layout;
    width: 562px;
    height: 471px;
    font-size: 0;
}
#column_1 {display: contents;}
#column_3 {display: none;}

#column_2 {
    width: 350px;
    height: 395px;
    margin: 0;
    position: absolute;
    top: 39px;
    left: 29px;
}

/* Panels */

.panel, .panel h2 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.panel {
    background: none;
    color: #282828;
    font: 11px/1.7 'Comfortaa', sans-serif;
    overflow: hidden;
    position: absolute;
}

.panel a {color: var(--border-color);}
.panel a:hover {color: inherit;}
.panel img {max-width: 100% !important;}

#id_footprints, #id_wishlist, #id_about {
    width: 100%;
    height: 100%;
    top: 0;
    border: 20px solid transparent;
    overflow-y: auto;
    scrollbar-width: none;
}
#id_about {text-align: center;}

/* Buttons */

.panel.media_panel, .panel h2, #id_contact li * {
    background-color: var(--button-color);
    border: 2px solid var(--border-color);
    border-radius: 3px;
    font-size: 0;
    height: 46px !important;
    transition: background-color .5s ease-in-out;
}
.panel.media_panel, #id_contact li * {width: 46px;}
.panel.media_panel:hover, .panel:hover h2, #id_contact a:hover {background-color: var(--hovers-color);}

#id_contact, .media_panel {bottom: 34px;}
#id_contact {right: 57px;}
.media_panel {right: 0;}

#id_contact ul {
    display: flex;
    gap: 11px;

    li:nth-of-type(1) {display: none;}
    li:nth-of-type(n+2) {display: contents;}
    li * {box-sizing: border-box;}
}

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: -9px;
    left: -33px;
    transform-origin: bottom left;
    scale: 1.5;
    opacity: .001;
}

/* Panel Headers */

.panel h2 {
    width: 160px;
    position: fixed;
    right: 0;
}

#id_about h2, #id_details h2, #id_contact h2, .media_panel h2 {display: none;}
#id_footprints h2 {top: 36px;}
#id_wishlist h2 {top: 102px;}

/* Tab Function */

#id_footprints, #id_wishlist, :is(#id_footprints:hover, #id_wishlist:hover) ~ #id_about {
    left: calc(100% + 3px);
    transition: left .5s 0s ease-in-out;
}

#id_about, #id_footprints:hover, #id_wishlist:hover {
    left: 0;
    transition: left .5s .5s ease-in-out;
}

.panel h2::before {
    width: 190px;
    height: 66px;
    position: absolute;
    right: -2px;
}

#id_footprints h2::before {top: -2px;}
#id_footprints:hover h2::before {content: '';}

#id_wishlist h2::before {bottom: -2px;}
#id_wishlist:hover h2::before {content: '';}

/* Details */

#id_details {
    background: linear-gradient(to top, #FFFFFF80, #FFFFFF00) var(--avatar-color);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    overflow: visible;

    img {
        position: absolute;
        bottom: 10px;
        left: 18px;
    }

    width: 160px;
    height: 25px;
    right: 0;
    bottom: 100px;

    .forum_userstatus, p:nth-of-type(n+2) {display: none;}
    p:nth-of-type(1) {display: contents;}
}

/* Visitors */

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

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

#id_footprints .item a {
    max-width: 170px;
    order: -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

/* Wish List */

#id_wishlist {
    border-width: 20px 19px 19px 20px;
    display: grid;
    gap: 4px;
    grid-auto-rows: 41px;
    grid-template-columns: repeat(7, 41px);
    scroll-snap-type: y mandatory;

    .premium_sparkle, .clear {display: none;}

    .item {
        contain: layout;
        scroll-snap-align: start;
    }

    a {
        display: block;
        background: #FFFFFF;
        width: 30px;
        height: 30px;
        padding: 4px;
        border: 1px solid var(--avatar-color);
        border-radius: 3px;
    }
    a:hover {background: var(--hovers-color);}

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

/* Misc */

#pictures_container .avatar_decoration img[width='48'] {
    background: var(--button-color);
    border: 2px solid var(--border-color);
    border-radius: 3px;
    transition: background .5s ease-in-out;
}
#pictures_container .avatar_decoration img[width='48']:hover {background: var(--hovers-color);}

.bbcode-swapping-image {mix-blend-mode: multiply;}
.spoiler-wrapper {padding: 0;}

.spoiler-revealed {
    border: 1px dotted currentColor;
    border-radius: 3px;
    padding: 5px;
}

.spoiler-control {
    background: var(--avatar-color);
    border: 2px solid #00000040;
    border-radius: 3px;
    color: inherit;
    font: inherit;
    line-height: 27px;
    padding: 0 10px;
    height: 30px;
}
.spoiler-control:hover {background: var(--hovers-color);}