Pro for fknnrd

/* Profile by AlthIndor */

html, body {
    background: #F8F8F8;
    height: unset;
    min-height: 100vh;
}

body {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 160px 0 100px 0;
    box-sizing: border-box;
}
#pictures_container {order: 1;}
#columns {order: 2;}

body a {
    font-weight: 400 !important;
    text-decoration: none !important;
}

::selection {
    background: #606060;
    color: #F8F8F8;
}

/* Atlas Control */

#columns, .panel h2, .item, .avatar_decoration:nth-of-type(n+2) {background: url('https://i.imgur.com/dTNdYfH.png') no-repeat;}
#columns {background-position: 0 -80px;}
.panel h2 {background-position: -640px -80px;}
.custom_panel h2 {background-position: -640px -120px;}

.item {background-position: -640px -210px;}
.avatar_decoration:nth-of-type(n+2) {background-position: -640px -270px;}
.avatar_decoration:nth-of-type(n+2) a {mask: url('https://i.imgur.com/dTNdYfH.png') -760px -270px;}
.item:has(a:hover), .avatar_decoration:has(a:hover) {background-position-x: -700px;}

.custom_panel span {
    background:
        url('https://i.imgur.com/dTNdYfH.png') left 0,
        url('https://i.imgur.com/dTNdYfH.png') right -40px,
        linear-gradient(to left, #00000000 5px, #000000FF 5px, #000000FF calc(100% - 5px), transparent calc(100% - 5px));
}

/* Fonts */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
}

/* Header */

#viewer #gaia_header, #gaia_header ul {background: none !important;}
#viewer #gaia_header li.spacer {display: none !important;}

#viewer #gaia_header {
    width: calc(100% - 20px) !important;
    height: 49px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    border: 16px solid transparent;
    border-width: 14px 16px 16px 14px;
    border-image: url('https://i.imgur.com/gP6OH21.png') 14 16 16 14 fill;
    box-sizing: border-box;
}

#gaia_header ul {
    width: unset !important;
    font: 0/20px 'Press Start 2P', sans-serif !important;
    padding: 0 7px !important;
}

#gaia_header #header_right {
    float: right;
    display: grid !important;
    grid-auto-flow: column;
}
#gaia_header #header_right li:nth-of-type(4) {grid-column: 2;}

#gaia_header a, #gaia_header a::before {font-size: 8px !important;}
#gaia_header a {color: #F8F8F8 !important;}
#gaia_header a:hover {color: #A8A8A8 !important;}

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

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

#header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
    content: '';
    display: inline-block;
    background: #A8A8A8;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    position: relative;
    top: -2px;
}

/* Columns */

#columns {
    width: 628px;
    font-size: 0;
    padding-top: 254px;
    position: relative;
    top: 0;
}
#columns .column {display: contents;}

/* Panels */

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

.panel {
    background: none;
    color: #000;
    font: 8px/2.5 'Press Start 2P', sans-serif;
    text-align: center;
}
.panel a {color: #A8A8A8;}
.panel a:hover {color: inherit;}

.panel h2 {
    height: 36px;
    font-size: 0;
}

#id_details, #id_about, .media_panel {position: absolute;}
#id_details h2, #id_about h2, .media_panel h2 {display: none;}

#id_about {
    width: 315px;
    height: 126px;
    top: 98px;
    left: 293px;
}

#id_wishlist, .custom_panel {
    border: 20px solid transparent;
    border-width: 20px 20px 20px 18px;
    border-image: url('https://i.imgur.com/aPDHPgh.png') 20 20 20 18;
}
#id_wishlist {margin-bottom: 10px;}

/* Details and Second Avatar */

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

.avatar_decoration:first-of-type a {
    position: absolute !important;
    bottom: -202px;
    left: 107px;
}

/* Media */

.media_panel {
    background: url('https://i.imgur.com/MWTKBXK.gif');
    width: 14px;
    height: 11px !important;
    top: 213px;
    right: 20px;
    overflow: hidden;
    filter: invert(1);
    z-index: 1;
}

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: calc(50% - 20px);
    left: calc(50% - 35px);
    opacity: .001;
}

form .media_panel {
    font-size: 0;
    overflow: visible;
}

form .media_panel .buttons {
    width: max-content;
    position: absolute;
    top: -2px;
    right: 20px;
    filter: invert(1);
}

/* Round Tiles */

#id_wishlist, #pictures_container {
    display: grid;
    grid-auto-rows: max-content;
    gap: 10px;
}
#id_wishlist {grid-template-columns: repeat(10, 50px);}
#pictures_container {grid-template-columns: repeat(9, 52px);}

#id_wishlist a, .avatar_decoration:nth-of-type(n+2) a {
    border-radius: 50%;
    overflow: hidden;
}
#id_wishlist a, .avatar_decoration a {display: block;}

/* Wish List */

#id_wishlist h2 {grid-column: 1/-1;}
#id_wishlist .item {position: relative;}
#id_wishlist .premium_sparkle, #id_wishlist .clear {display: none;}

#id_wishlist a {
    width: 30px;
    height: 30px;
    padding: 10px;
}

.owner_checkmark {
    background: #F8F8F8;
    padding: 2px;
    margin: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #A8A8A8;
    pointer-events: none;
}
#id_wishlist .item:has(a:hover) .owner_checkmark {border-color: #000;}

/* Gallery */

.custom_panel h2 {margin-bottom: 10px;}
.custom_panel span, .custom_panel img {display: block;}
.custom_panel br {display: none;}

.custom_panel h2 + div {
    max-height: 500px;
    padding: 0 10px 0 0;
    overflow: hidden scroll;
    scrollbar-color: #000 transparent;
}

.custom_panel span {
    height: 34px;
    font-size: 16px;
    line-height: 36px;
    margin: 40px auto;
    position: sticky;
    top: 0;
    box-shadow: 0 10px #F8F8F8;
    z-index: 1;
}
.custom_panel span:first-of-type {margin-top: 0;}

.custom_panel img {
    max-width: 480px !important;
    margin: 10px auto;
    mix-blend-mode: multiply;
}
.custom_panel img:last-of-type {margin-bottom: 0;}

/* Avatar Tiles */

#pictures_container {
    position: relative;
    margin: 0 0 -12px 13px;
}

.avatar_decoration {
    width: 52px !important;
    height: 52px !important;
    position: static !important;
}
.avatar_decoration .buttons {top: 0;}

.avatar_decoration:nth-of-type(1) img {
    width: unset !important;
    height: unset !important;
}

.avatar_decoration:nth-of-type(n+2) {contain: layout;}
.avatar_decoration:nth-of-type(n+2) a {padding: 2px;}

/* Saturation Effect */

#id_details, .item, .custom_panel img, .avatar_decoration a {filter: grayscale(1);}
#id_details:hover, .item:has(a:hover), .custom_panel img:hover, .avatar_decoration a:hover {filter: none;}

/* Avatar Head Grid Spacer */
/* Change 'span' Value to Change First Head Offset */

.avatar_decoration:first-of-type {grid-column: 1 / span 3;}