Profile for wehksy

/* Design by Nezumimousey */
/* With Code By AlthIndor */

:root {
    --green: #3DA225;
    --purple: #431C45;
    --red: #D2313C;
}

html, body {background: url('https://i.imgur.com/BhkipFP.png') center #330101;}
* {cursor: url('https://i.imgur.com/0YjTHqz.png'), auto !important;}

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

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

/* Sprite Sheet */

#columns, #id_contact li *, .media_panel, #column_2 h2 {background: url('https://i.imgur.com/020AtVf.png');}
#id_contact li *, .media_panel, #column_2 h2 {background-position-y: -540px;}
#id_contact li:nth-child(2) * {background-position-x: -60px;}
.media_panel {background-position-x: -120px;}
#id_about h2 {background-position-x: -180px;}
#id_wishlist h2 {background-position-x: -240px;}
#id_footprints h2 {background-position-x: -300px;}

/* Fonts */

@font-face {
    font-family: 'Gluten';
    font-style: normal;
    font-weight: 100 900;
    src: url('https://fonts.gstatic.com/s/gluten/v18/HhyIU5gk9fW7OUdVIPh2zD_RSqQJ__A1zDQhQw.woff2') format('woff2');
}

@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/lobster/v32/neILzCirqoswsqX9zoKmMw.woff2') format('woff2');
}

/* Header */

#viewer #gaia_header {
    height: 35px !important;
    filter: drop-shadow(0 5px 10px #00000040);

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

    ul {
        width: auto !important;
        font: 0/32px 'Lobster', cursive !important;
    }
    #header_right {float: right;}

    a {
        color: #FFFFFF !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        text-transform: capitalize;
    }
    a:hover {color: var(--green) !important;}

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

/* Columns */

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

#columns {
    width: 820px;
    height: 515px;
    filter: drop-shadow(0 5px 10px #00000080);
    overflow: visible;
}

#columns .column {
    font-size: 0;
    margin: 0;
}
#column_1 {display: contents;}
#column_3 {display: none;}

#column_2 {
    width: 600px;
    height: 331px;
    position: absolute;
    top: 85px;
    left: 110px;
}

/* Panels */

.panel, .panel h2 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#column_1 h2 {display: none;}

.panel {
    color: #202020;
    font: 300 12px/1.5 'Gluten', cursive;
    position: absolute;
    overflow: hidden;
}

.panel a {
    color: var(--green);
    font-weight: 400;
}
.panel a:hover {color: var(--red);}
.panel img {max-width: 100% !important;}

#column_2 .panel {
    background: #FFFFFFE0;
    width: 100%;
    padding-right: 10px;
    top: 0;
    left: 0;
    border: 20px solid transparent;
    border-radius: 10px;
    overflow-y: scroll;
    scrollbar-color: var(--purple) rgb(from var(--purple) r g b / 20%);
    scrollbar-width: thin;
}

/* Tabbed Function */

#column_2 .panel {
    height: 0;
    border-width: 0 20px;
    transition: all .5s ease-in-out;
}

#column_2 .panel:hover {
    height: 100%;
    border-width: 20px 20px;
    transition: all .5s .5s ease-in-out;
}

#column_2 h2::before {
    width: 70px;
    height: 115px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-radius: 0 0 10px 10px;
}
#column_2 .panel:hover h2::before {content: '';}

/* Buttons */

#id_contact, .media_panel, .panel h2 {bottom: 0;}
.media_panel {left: 350px;}

#id_contact {
    background: none;
    left: 210px;
}

#id_contact ul {
    display: flex;
    gap: 20px;
}
#id_contact li * {display: block;}
#id_contact li:nth-child(3) {display: none;}

#id_contact li *, .media_panel, .panel h2 {
    width: 50px;
    height: 50px !important;
    color: #FFFFFF;
    font-size: 0;
    text-align: center;
    border-radius: 10px;
    opacity: .01;
    transition: opacity .5s ease-in-out;
}
#id_contact a:hover, .media_panel:hover, .panel:hover h2 {opacity: 1;}

.panel h2 {position: fixed;}
#id_about h2 {left: 420px;}
#id_wishlist h2 {left: 490px;}
#id_footprints h2 {left: 560px;}

/* Media */

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 150px);
    scale: 1.25;
    opacity: .001;
}

/* Wishlist */

#id_wishlist {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-auto-rows: 40px;
    align-content: start;
    gap: 10px;
    scroll-snap-type: y mandatory;

    .premium_sparkle, .clear {display: none;}

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

    a {
        display: block;
        background: #FFE7C7;
        width: 100%;
        height: 100%;
        padding: 4px;
        border: 1px solid #00000020;
        border-radius: 5px;
        box-sizing: border-box;
    }
    a:hover {background: var(--red);}

    .owner_checkmark {
        background: #FFFFFF;
        margin: 0;
        padding: 2px;
        border: 1px solid #000;
        bottom: -1px;
        right: -1px;
    }
}

/* Visitors */

#id_footprints .item {display: flex;}

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

#id_footprints .item a {order: -1;}
#id_footprints .item::after {content: '.';}

/* Misc */

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

.spoiler-revealed {
    padding: 10px;
    border-color: currentColor;
    border-radius: 2px;
}

.spoiler-control {
    background: var(--purple);
    width: 100px;
    height: 25px;
    color: #FFFFFF;
    font: inherit;
    border: 1px solid #00000040;
    border-radius: 5px;

    span {
        position: relative;
        top: 1px;
    }

    transition: background .5s ease-in-out;
}
.spoiler-control:hover, .spoiler-control-hide {background: var(--red);}