Pro for Dirty DeviI

/* Profile by AlthIndor */

html, body {background: #000;}
body a {transition: all .5s ease-in-out;}

.bbcode-swapping-image {background: url('https://i.imgur.com/Fk5mUXF.png');}

::selection {
    background: #808080;
    color: #FFFFFF;
}

/* Fonts */

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/librebaskerville/v14/kmKiZrc3Hgbbcjq75U4uslyuy4kn0qviTgY3KcA.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;
}

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6daw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTYf0D33Esw.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: 'Noto Serif';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6daw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTYf6D30.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;
}

@font-face {
    font-family: 'Font Awesome';
    font-style: normal;
    font-weight: 900;
    src: url(https://ka-f.fontawesome.com/releases/v6.7.2/webfonts/free-fa-solid-900.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
    ul, #header_left li:nth-of-type(2) {display: flex !important;}
    ul, li {margin: 0 5px !important;}
    li.spacer {display: none !important;}

    ul {
        justify-content: space-between;
        width: unset !important;
        min-width: 305px;
        height: 35px !important;

        a, a::before {font-size: 11px !important;}

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

        border-bottom: 2px solid #FFFFFF;
        font: 700 0/36px 'Libre Baskerville', serif !important;
    }

    #header_right {
        li:nth-of-type(4) {order: -1;}
        li:nth-of-type(1) {order: -2;}

        float: right;

        a[href*='?mode=edit'], a[href*='report.php'] {font-size: 0 !important;}
        a[href*='?mode=edit']::before {content: 'Launch V2 Editor';}
        a[href*='report.php']::before {content: 'Report';}
    }

    #header_left li:nth-of-type(2) {
        display: flex !important;
        place-self: center;
    }

    img {
        content: url('https://i.imgur.com/5FTB40o.png');
        width: 37px;
        height: 16px;
    }
}

/* Columns */

#columns {
    width: 840px;
    height: 418px;

    .column {
        display: contents;
        font-size: 0;
    }

    contain: layout;
    top: calc(50% - 209px);
    left: calc(50% - 420px);
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
    background: #FFFFFF20;
    width: 8px;
}
#columns ::-webkit-scrollbar-thumb {background: #FFFFFF;}

@supports not selector(::-webkit-scrollbar) {
    .panel {
        scrollbar-color: #FFFFFF #FFFFFF20;
        scrollbar-width: thin;
    }
}

/* Panels */

.panel, .panel h2 {
    background: #000;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

.panel {
    font: 400 11px/1.74 'Noto Serif', serif;
    position: absolute;
    box-sizing: border-box;
}

#id_about, #id_wishlist, #id_footprints {
    height: 100%;
    padding-right: 15px;
    top: 0;
    overflow: hidden scroll;

    h2 {
        height: 40px;
        font: 700 16px/52px 'Libre Baskerville', serif;
        position: fixed;
        top: 2px;
        border-bottom: 2px solid currentColor;
    }

    border: 17px solid transparent;
    border-top-width: 59px;
    border-radius: 10px;
    outline: 2px solid #FFFFFF;
    outline-offset: -2px;
}

.panel a {
    color: #FFFFFF;
    text-decoration: dotted underline;
}
.panel:not(#id_wishlist) a:hover {opacity: .5;}

#id_about {
    width: 400px;
    left: 220px;

    h2 {
        width: calc(211px - 15px);
        left: calc(220px + 17px);
    }

    img {
        max-width: 100% !important;
        filter: grayscale(1);
        transition: all .5s ease-in-out;
    }
    img:hover {filter: grayscale(0);}
}

#id_wishlist, #id_footprints {width: 200px;}
#id_wishlist h2, #id_footprints h2 {width: calc(200px - 17px - 17px);}

#id_footprints {right: 0;}
#id_footprints h2 {right: 17px;}

/* Contact Buttons and Media */

#id_contact, #id_comments, .media_panel {
    top: 17px;
    z-index: 1;
}
#id_contact h2, #id_comments h2, .media_panel h2 {display: none;}

#id_contact {left: 448px;}
#id_comments {left: 544px;}
.media_panel {left: 576px;}

#id_contact ul {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
}

#id_contact li *, #id_comments a, .media_panel {
    display: block;
    background: #FFFFFF;
    width: 27px;
    height: 27px !important;
    color: #000;
    font: 0/27px 'Font Awesome';
    text-align: center;
    border-radius: 3px;
}
#id_contact a, #id_comments a {text-decoration: none;}

#id_contact li *::before, #id_comments a::before, .media_panel::before {font-size: 16px;}
#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: '';}
#id_comments h2 ~ div a::before {content: '';}
.media_panel::before {content: '';}

/* Comments */

#id_comments {
    #alerts_banner, .clear, dl, p {display: none;}
    #alert_container {display: contents;}
}

/* Media */

.media_panel {
    overflow: hidden;
    transition: opacity .5s ease-in-out;
}
.media_panel:hover {opacity: .5;}

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: -7px;
    left: -21px;
    opacity: .001;
}

/* Wish List */

#id_wishlist {
    display: grid;
    grid-auto-rows: 40px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    text-align: center;

    .premium_sparkle, .clear {display: none;}

    scroll-snap-type: y mandatory;
    scroll-padding-bottom: 2px;
    padding-bottom: 2px;

    .item {
        position: relative;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    a {
        display: block;
        background: #FFFFFF20;
        width: 100%;
        height: 30px;
        padding: 5px 0;
        border-radius: 2px;
        filter: grayscale(1);
    }

    a:hover {
        background: #FFFFFF;
        filter: grayscale(0);
    }

    .owner_checkmark {
        background: #FFFFFF;
        padding: 2px;
        margin: 0;
        bottom: -2px;
        right: -2px;
        border: 1px solid #000;
        filter: grayscale(100%) contrast(200%);
        pointer-events: none;
    }
}

/* Visitors */

#id_footprints .item {font-size: 0;}

#id_footprints a {
    display: inline-block;
    max-width: 100%;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Not Logged In */

body:has(#header_right a[href$='/auth/']) {
    #gaia_header ul {min-width: 245px;}
    #gaia_header #header_left {justify-content: start;}
    #gaia_header #header_right {justify-content: end;}

    #id_contact {visibility: hidden;}
    #id_about h2 {width: 324px;}
}

/* Editor */

.panel .buttons {
    margin: 0;
    position: fixed;
    top: 3px;
    right: unset;
}

#id_wishlist .buttons {left: 10px;}
#id_about .buttons {left: 230px;}
#id_footprints .buttons {left: 650px;}

#id_contact .buttons, #id_comments .buttons {display: none;}
.media_panel .buttons {left: 570px;}