Pro for BeIKing

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

:root {
    --aqua: #A0E8F2;
    --midnight: #262C4C;
    --purple: #8C52D8;
    --royal: #063478;
    --out-round: 5px;
    --in-round: 3px;
}

html, body {
    background: url('https://i.imgur.com/KQwrSmw.png') #000828 center / cover;
    min-height: 1550px;
}

body {
    position: relative;

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

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

#columns, #column_1 h2::after {background: url('https://i.imgur.com/7TSb9Im.png') no-repeat;}
#column_1 h2::after {background-position: 41px -1360px;}

/* Fonts */


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

@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 200 900;
    src: url(https://fonts.gstatic.com/s/crimsonpro/v24/q5uDsoa5M_tv7IihmnkabARboYE.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header, #gaia_header ul, #header_left li:nth-of-type(2) a {
    display: flex !important;
    height: 35px !important;
}

#viewer #gaia_header {
    background: #00000040 !important;
    justify-content: space-between;

    a, a::before {font-size: 15px !important;}
    a {color: #FFFFFF !important;}
    a:hover {color: var(--aqua) !important;}

    ul {
        font: 0/34px 'Crimson Pro', serif !important;
        text-transform: uppercase;
        width: unset !important;
    }

    #header_left, #header_left li:nth-of-type(2) a {clip-path: polygon(0 0, 100% 0, calc(100% - 35px) 100%, 0 100%);}

    #header_left {
        padding: 0 40px 0 0 !important;

        li:nth-of-type(2) a {
            align-items: center;
            background: var(--royal);
            padding: 0 0 0 10px;
            width: 80px;

            img {
                background: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') no-repeat 0 0 / 100% auto;
                width: 0;
                height: 18px;
                padding: 0 41px 0 0;
                margin: 1px 0 0 0;
            }
        }
        li:nth-of-type(2) a:hover {background: var(--purple);}

        li.spacer {display: none !important;}
        li:nth-of-type(n+4) {margin: 0 0 0 15px;}
    }

    #header_right {
        background: none !important;
        gap: 15px;
        margin: 0 15px 0 0 !important;

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

        a[href*='mode=edit'], a[href*='report.php'] {font-size: 0 !important;}
        a[href*='mode=edit']::before {content: 'Edit My Own';}
        a[href*='report.php']::before {content: 'Report Profile';}
    }
}

/* Columns */

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

#columns {
    width: 1150px;
    height: 1350px;
    contain: layout;

    .column {
        font-size: 0;
        margin: 0;
        position: absolute;
    }
    #column_3 {display: contents;}

    #column_1 {
        width: 430px;
        height: 400px;
        top: 465px;
        left: 420px;
    }

    #column_2 {
        overflow: visible;
        width: unset;
    }

    ::-webkit-scrollbar {width: 0;}
}

/* Panels */

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

.panel, .panel h2 {
    color: #FFFFFF;
    text-align: center;
    padding: 0;
    margin: 0;
}

.panel {
    background: none;
    font: 11px/1.8 'Open Sans', sans-serif;
    position: absolute;

    a {color: var(--aqua);}
    a:hover {color: inherit;}

    img:not(.avatarImage) {max-width: 100% !important;}
}

#id_footprints, #id_signature, #id_about, #id_comments dl, #id_wishlist {
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
#column_1 .panel {border-radius: var(--out-round);}

.dropBox {
    background: var(--aqua);
    width: 48px;
    height: 48px;
    border: 1px solid transparent;
    border-radius: var(--in-round);
    overflow: hidden;
}

/* Panel Switching */

#column_1 .panel {
    width: 100%;
    border: 20px solid transparent;
}

#column_1 .panel, #column_1 .panel:hover ~ #id_about {
    height: 0;
    border-width: 0 20px;
    transition: border-width 0s .5s linear, height .5s 0s ease-in-out;
}

#column_1 #id_about, #column_1 .panel:hover {
    height: 100%;
    border-width: 20px;
    transition: border-width 0s .5s linear, height .5s .5s ease-in-out;
}

/* Panel Headers */

.panel h2 {
    cursor: default;
    height: 35px;
    position: fixed;
    z-index: 2;
}
:is(#id_about, #id_contact, #id_details, .media_panel) h2 {display: none;}

#column_1 h2, #column_1 h2::after {width: 100px;}

#column_1 h2 {
    background: linear-gradient(#FFFFFF20 50%, transparent 50%) var(--midnight);
    font: 500 0/30px 'Crimson Pro', serif;
    text-shadow: 0 0 3px var(--aqua);
    top: 420px;
    border: 2px solid #688090;
    border-radius: var(--out-round);
    transition: all .5s ease-in-out;
}
#friends_title {left: 420px;}
#comments_title {left: 530px;}
#footprints_title {left: 640px;}
#signature_title {left: 750px;}

#column_1 h2::before {font-size: 15px;}
#friends_title::before {content: 'MES AMIS';}
#comments_title::before {content: 'WRITE ME';}
#footprints_title::before {content: 'STALKERS';}
#signature_title::before {content: 'FORUM SIG';}

#column_1 h2::after {
    content: '';
    height: 0;
    position: absolute;
    top: 27px;
    left: -2px;
    opacity: 0;
    transition: height 0s .5s linear, opacity .5s 0s ease-in-out;
}

#column_1 .panel:hover h2 {
    background-color: var(--royal);
    text-shadow: 0 0 3px #FFFFFF;
    border-color: var(--aqua);
}

#column_1 .panel:hover h2::after {
    height: 22px;
    opacity: 1;
    transition: height 0s 0s linear, opacity .5s 0s ease-in-out;
}

/* Friends */

#id_friends {
    display: grid;
    gap: 15px;
    grid-template: repeat(3, 95px) / repeat(3, 90px);
    place-content: center;
    place-items: center;

    h2 ~ :not(ul), li:nth-of-type(10) {display: none;}
    ul, p, span {display: contents;}

    li, a {
        width: 100%;
        height: 100%;
    }

    li, .dropBox {transition: background .5s ease-in-out;}
    .dropBox {margin: 15px auto 0 auto;}

    li {
        background: var(--royal);
        border-radius: var(--out-round);
        contain: layout;
        overflow: hidden;

        a {
            color: #FFFFFF;
            line-height: 155px;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    li:hover {
        background: var(--aqua);

        a {color: var(--midnight);}
        .dropBox {background: #FFFFFF;}
    }
}

/* Comments */

#id_comments, #id_comments dd {
    display: grid;
    gap: 20px 10px;
}

#id_comments {
    grid-template: 310px 30px / 1fr 1fr;

    #alert_container {display: contents;}
    #alerts_banner, .deletecomment, .clear {display: none;}

    h2 + div, h2 ~ p {
        grid-row: 2;
        margin: 0;

        a {
            display: block;
            background: var(--royal);
            width: 100%;
            height: 100%;
            color: #FFFFFF;
            font: 700 0/28px 'Crimson Pro', serif;
            border-radius: var(--in-round);
        }
        a::before {font-size: 14px;}

        a:hover {
            background: var(--aqua);
            color: var(--midnight);
        }
    }
    h2 + div a::before {content: 'POST NEW COMMENT';}
    h2 ~ p a::before {content: 'VIEW ALL COMMENTS';}

    dl {
        grid-area: 1/1/2/3;
        text-align: justify;

        dt {
            height: unset;
            line-height: unset;
            padding: 0 0 4px 0;
            margin: 0 0 4px 0;
            border-bottom: 1px dotted #FFFFFF;
        }

        dd {
            grid-template: 1fr / 50px calc(100% - 60px);
            margin: 0 0 20px 0;

            .dropBox {
                margin: 6px 0 0 0;

                img {
                    width: 120px;
                    height: 150px;
                    margin: -30px 0 0 -47px;
                }
            }
        }
        dd:last-of-type {margin: 0;}
    }
}

/* Visitors */

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

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

#id_footprints a {order: -1;}

/* Details */

#id_details {
    top: 930px;
    left: 865px;
}
#id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
#id_details p {margin: 0;}

/* Wish List */

#id_wishlist, #id_wishlist h2 {
    width: 170px;
    left: 550px;
}

#id_wishlist, #id_wishlist a {display: flex;}

#id_wishlist {
    flex-flow: row wrap;
    gap: 10px;

    h2 {
        background: none;
        font: 500 30px/26px 'Crimson Pro', serif;
        text-shadow: 0 0 5px var(--aqua);
        top: 996px;
    }
    .premium_sparkle, .clear {display: none;}
    * {transition: all .5s ease-in-out;}

    height: 170px;
    top: 1040px;

    .item, a {
        width: 50px;
        height: 50px;
    }

    .item {
        contain: layout;
        outline: 1px dotted var(--aqua);
        outline-offset: -6px;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        a {
            background: var(--royal);
            border: 2px solid var(--royal);
            border-radius: 50%;
            box-shadow: 0 0 0 1px inset var(--aqua);
            box-sizing: border-box;
            place-content: center;
            place-items: center;
        }

        a:hover {
            background: var(--aqua);
            box-shadow: 0 0 0 1px inset #FFFFFF;

            img {rotate: 1turn;}
        }
    }
    .item:has(a:hover) {outline-color: #FFFFFF;}

    scroll-snap-type: y mandatory;
}

.owner_checkmark {
    background: #FFFFFF;
    padding: 2px;
    margin: 0;
    bottom: 2px;
    right: 2px;
    border-radius: 2px;
    filter: hue-rotate(-100deg);
    pointer-events: none;
}

/* Contact */

#id_contact, #id_contact ul {height: 50px;}
#id_contact li {display: contents;}
#id_contact li:nth-of-type(3) * {margin-left: 3px;}

#id_contact {
    top: 640px;
    left: 900px;
    overflow: visible;
}

#id_contact ul {
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
    place-content: center;
    place-items: center;
}

#id_contact * {
    color: #B8D0DD;
    font: 0px 'Font Awesome';
    text-shadow: 0 0 10px var(--aqua);
}

#id_contact a:hover {
    color: #FFFFFF;
    text-shadow: 0 0 10px #FFFFFF;
}

#id_contact li *::before {font-size: 30px;}
#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 */

#column_2 {
    top: 310px;
    left: 635px;
    outline: 1px dotted var(--aqua);
    outline-offset: 24px;
}

#column_2, .media_panel {transition: all .5s ease-in-out;}
#column_2:hover {outline-color: #FFFFFF;}

.media_panel, #column_2::after {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.media_panel iframe, #column_2::after {position: absolute;}

.media_panel {
    background: var(--royal);
    border: 2px solid var(--royal);
    box-shadow: 0 0 0 1px var(--aqua) inset;

    iframe {
        width: 300px;
        height: 200px;
        bottom: -17px;
        left: -48px;
        opacity: .001;
        scale: 2;
        transform-origin: bottom left;
    }

    width: 50px;
    height: 50px !important;
    overflow: clip;
    overflow-clip-margin: 2px;
    rotate: -45deg;
}

.media_panel:hover {
    background: var(--aqua);
    box-shadow: 0 0 0 1px #FFFFFF inset;
}

#column_2::after {
    content: url('https://i.imgur.com/MWTKBXK.gif');
    margin-top: -1px;
    pointer-events: none;
}

/* Misc */

.spoiler-wrapper {padding: 0;}

.spoiler-revealed {
    background: #00041060;
    padding: 10px;
    border-color: #F0E0FFC0;
    border-radius: var(--out-round);
}

.spoiler-control {
    background: #F0E0FF;
    width: 100px;
    height: 25px;
    font: inherit;
    border: none;
    border-radius: var(--in-round);
}
.spoiler-control-hide {margin-bottom: 10px;}
.spoiler-control:hover {filter: brightness(80%);}

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