Pro for My Little Pokket

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

:root {
    --aqua: #7AFFD2;
    --purp: #CBAAEE;
    --pink: #FF5858;
}

html, body {
    background: url('https://i.imgur.com/2zzIjye.png') center #E4C0F4;
    min-height: 800px;
}
body {position: relative;}

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

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

/* Sprite Sheet Management */

#columns, #id_comments h2 + div, #columns::after {background: url('https://i.imgur.com/h2wQ0yZ.png');}
#id_comments h2 + div {background-position-y: -630px;}
#id_comments:has(h2 + div a) h2 + div:hover {background-position-x: -170px;}
#columns::after {background-position: bottom right;}

/* Fonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.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 */

#gaia_header {background: none !important;}
#gaia_header li {margin: 0 5px;}
#gaia_header li.spacer {display: none !important;}

#gaia_header ul {
    width: auto !important;
    height: 30px !important;
    font: 0/30px 'Open Sans', sans-serif !important;
    padding: 0 5px !important;
    margin: 10px 0 !important;
    box-shadow: 3px 3px 5px #0C203080;
}

#gaia_header #header_left {
    background: #FFFFFF !important;
    border-radius: 0 5px 5px 0;
}

#gaia_header #header_right {
    float: right;
    border-radius: 5px 0 0 5px;
}

#header_left img {
   -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 0 no-repeat;
    mask: url('https://i.imgur.com/cGGVY2x.png') 0 0 no-repeat;
    background: currentColor;
    width: 0;
    height: 15px;
    padding: 0 34px 0 0;
    transition: background .5s ease-in-out;
}

#gaia_header a, #header_right a::before {font-size: 13px !important;}
#header_left a {color: #000 !important;}
#header_right a {color: #FFFFFF !important;}
#gaia_header ul a:hover {color: var(--pink) !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: 'My Profile';}
#header_right a[href*='report.php']::before {content: 'File Report';}

/* Set Up Layout */

#panel-details, #panel-details *, #columns, #pictures_container, #texts_container {position: absolute;}
#panel-details .ft {display: none;}

#panel-details, #panel-details .bd {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#panel-details .hd, #columns, #pictures_container, #texts_container {
    top: calc(50% - 304px);
    left: calc(50% - 490px);
}

#panel-details .hd, #columns {
    width: 980px;
    height: 610px;
}

/* Wallpaper Overlay Effect */

#panel-details h2 {
    background: linear-gradient(to bottom, #B692F8, #40E4B8, #B692F8);
    width: 685px;
    height: 385px;
    top: 27px;
    left: 160px;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #0C203080;
}

#panel-details .bd {
    background:
        linear-gradient(to right,
            transparent calc(50% - 574px), var(--purp) calc(50% - 574px),
            var(--purp) calc(50% - 566px), transparent calc(50% - 566px),
            transparent calc(50% - 558px), var(--aqua) calc(50% - 558px),
            var(--aqua) calc(50% - 550px), transparent calc(50% - 550px)
        ),
        linear-gradient(to right,
            #000000FF calc(50% - 200px), #00000000 calc(50% - 200px),
            #00000000 calc(50% - 196px), #000000FF calc(50% - 196px),
            #000000FF calc(50% - 184px), #00000000 calc(50% - 184px),
            #00000000 calc(50% - 180px), #000000FF calc(50% - 180px),
            #000000FF calc(50% - 176px), #00000000 calc(50% - 176px)
        );
}

/* Columns */

#columns {overflow: visible;}
#columns .column {display: contents;}

@keyframes ghost {
    0% {
        rotate: 0turn;
        opacity: 0;
        animation-timing-function: linear;
    }
    5% {
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
    20% {
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
    25% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    100% {
        rotate: 2turn;
        opacity: 0;
        animation-timing-function: linear;
    }
}

#columns::after {
    content: '';
    width: 364px;
    height: 196px;
    position: absolute;
    top: 220px;
    left: -35px;
    transform-origin: 192px 77px;
    pointer-events: none;
    animation: ghost 20s linear infinite;
}

#columns ::-webkit-scrollbar {width: 0;}
.panel {scrollbar-width: none;}

/* Panels */

.panel {
    background: none;
    color: #FFFFFF;
    font: 11px/1.75 'Open Sans', sans-serif;
    text-align: center;
    padding: 0;
    margin: 0;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
}
.panel h2 {display: none;}

.panel a {color: var(--aqua);}
.panel a:hover {color: var(--pink);}

#id_about, #id_wishlist {
    height: 290px;
    top: 167px;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

#id_about {
    width: 235px;
    right: 205px;
}
#id_about img {max-width: 100%;}

/* Comments */

#id_comments {
    width: 165px;
    height: 218px;
    top: 109px;
    right: 17px;
    clip-path: path('M 0 107 C 15 90 15 70 30 44 C 50 10 75 3 95 3 C 120 3 162 25 162 75 C 162 162 15 210 0 215 Z');
}
#id_comments #alerts_banner, #id_comments p, #id_comments dl, #id_comments .clear {display: none;}
#id_comments #alert_container {display: contents;}

#id_comments h2 + div, #id_comments a {
    width: 100%;
    height: 100%;
}

#id_comments a {
    display: block;
    font-size: 0;
}

/* Contact Buttons */

#id_contact {
    text-align: center;
    top: 317px;
    right: 40px;
    overflow: visible;
}
#id_contact li {margin-top: 15px;}

#id_contact li * {
    display: block;
    background: #000;
    width: 60px;
    height: 60px;
    font-size: 0;
    border-radius: 15px;
    box-shadow: 3px 3px 5px #0C203080;
}
#id_contact li *::before {font: 25px/60px '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: '';}

#id_contact a {color: #FFFFFF;}
#id_contact a:hover {color: var(--pink);}

/* Media */

.media_panel {
    background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat !important;
    width: 30px;
    height: 30px !important;
    bottom: 89px;
    left: 26px;
    border-radius: 50%;
}

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

/* Wish List */

#id_wishlist {
    display: flex;
    flex-flow: row wrap;
    align-content: start;
    gap: 10px;
    width: 140px;
    left: 345px;
    scroll-snap-type: y mandatory;
}
#id_wishlist .clear, .premium_sparkle {display: none;}

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

#id_wishlist a {
    display: block;
    background: #5A5A5A;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}
#id_wishlist a:hover {background: var(--pink);}

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