Pro for Sayuu Badged

/* Profile by AlthIndor */

#badges li:nth-of-type(1)::after {content: 'About Me';}
#badges li:nth-of-type(2)::after {content: 'My Art';}
#badges li:nth-of-type(3)::after {content: 'Spotlight';}
#badges li:nth-of-type(4)::after {content: 'Wishlist';}

#id_details::before {content: 'Music by Kezia Amelia ft. Renardi Effendi';}

html, body {background: url('https://i.imgur.com/pF0SXcV.png') fixed bottom left / cover #102030;}
body a {text-decoration: none !important;}

@supports (background-blend-mode: screen) {
  html, body {
   background: url('https://images2.imgbox.com/c2/08/PU8imW4c_o.png') fixed center repeat-x, url('https://i.imgur.com/pF0SXcV.png') fixed bottom left no-repeat #102030;
   background-blend-mode: screen, normal;
  }
}

#id_comments, #id_contact ul:not(.buttons) li, #badges img {background: url('https://images2.imgbox.com/16/c8/CiNdIrgv_o.png') no-repeat;}
#columns, #column_2 .panel:not(#id_badges) {background: url('https://images2.imgbox.com/86/56/ab5xPOfy_o.png');}

/* Fonts */

@font-face {
 font-family: 'Open Sans';
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
 font-family: 'Open Sans';
 font-weight: 600;
 src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhv.woff) format('woff');
}

@font-face {
 font-family: 'Overlock';
 font-weight: 700;
 src: local('Overlock Bold'), local('Overlock-Bold'), url(https://fonts.gstatic.com/s/overlock/v8/Z9XSDmdMWRiN1_T9Z7xizfmLtrw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/overlock/v8/Z9XSDmdMWRiN1_T9Z7xizfmLtro.woff) format('woff');
}

@font-face {
 font-family: 'Overlock';
 font-weight: 900;
 src: local('Overlock Black'), local('Overlock-Black'), url(https://fonts.gstatic.com/s/overlock/v8/Z9XSDmdMWRiN1_T9Z7xaz_mLtrw.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: linear-gradient(to right, rgba(208,32,48,.8), rgba(255,128,64,.8));
 height: 26px !important;
 box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 font: 700 0/24px 'Overlock', sans-serif !important;
 padding: 0 7px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}
#gaia_header .spacer {display: none !important;}

#header_left img {
 background: url('https://i.imgur.com/cGGVY2x.png') 0 2px no-repeat;
 width: 0;
 padding: 0 34px 0 0;
 margin: 0 -2px 0 0;
 filter: invert(100%) drop-shadow(0 0 .5px rgba(0,0,0,.5));
}

#gaia_header a, #header_left li::after, #header_right li::before {
 color: #FFFFFF !important;
 font-size: 12px !important;
 text-shadow: 0 0 1px rgba(0,0,0,.5);
}

#gaia_header a {
 letter-spacing: .05em;
 text-transform: uppercase;
 transition: opacity .5s ease-in-out;
}
#gaia_header a:hover {opacity: .75;}

#header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
 content: '●';
 margin: 0 6px;
 position: relative;
 top: -1px;
 opacity: .75;
}

/* Columns */

#columns, #column_1, #column_2 {
 float: none;
 margin: 0;
}
#column_1, #column_2 {position: absolute;}
#column_3 {display: none;}

#columns, #column_1 {
 width: 1140px;
 height: 630px;
}

#columns {
 position: fixed;
 top: calc(50% - 315px + 12px);
 left: calc(50% - 570px);
}

#column_1 {
 top: 0;
 left: 0;
 transform: translateZ(0);
}

#column_2 {
 width: 395px;
 height: 300px;
 top: 77px;
 left: 611px;
}

/* Panels */

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

.panel {
 color: #404040;
 font: 10px/1.6em 'Open Sans', sans-serif;
 text-align: center;
 position: absolute;
 overflow: hidden;
}

#column_1 .panel:not(#id_comments) {background: none;}
#id_badges {background: none;}

.panel a {
 color: crimson;
 transition: color .5s ease-in-out;
}
.panel a:hover {color: rebeccapurple;}

#column_2 .panel:not(#id_badges) {
 background-position: -611px -77px;
 width: 100%;
 height: 100%;
 top: -100%;
 left: 0;
}

/* Badges */

#id_badges {
 clip-path: inset(calc(100% - 32px) 0 0 0);
 height: calc(50% - 234px);
 position: fixed;
 top: 0;
}
#badges, #badges li {height: 100%;}
#tooltip-badge {display: none;}

#badges li {
 width: 95px;
 margin: 0;
 position: relative;
 box-sizing: border-box;
 cursor: pointer;
}
#badges li:nth-of-type(n+2) {margin-left: 5px;}
#badges li:nth-of-type(n+5) {display: none;}

#badges li:nth-of-type(1) {padding-top: 0;}
#badges li:nth-of-type(2) {padding-top: 5px;}
#badges li:nth-of-type(3) {padding-top: 10px;}
#badges li:nth-of-type(4) {padding-top: 15px;}

#badges img {
 width: 0;
 height: 100%;
 padding: 0 95px 0 0;
 opacity: .01;
 transition: opacity .5s ease-in-out;
}
#badges li:hover img {opacity: 1 !important;}

#badges li:nth-of-type(1) img {background-position: -212px bottom;}
#badges li:nth-of-type(2) img {background-position: -307px bottom;}
#badges li:nth-of-type(3) img {background-position: -402px bottom;}
#badges li:nth-of-type(4) img {background-position: -497px bottom;}

#id_badges li::after {
 display: block;
 width: 100%;
 height: 32px;
 color: #FFFFFF;
 font: 900 14px/28px 'Overlock', serif;
 text-shadow: 0 0 3px #000;
 text-transform: uppercase;
 position: absolute;
 bottom: 0;
 left: 0;
 pointer-events: none;
}

/* Panel Control */

#badges li:nth-of-type(1) img {opacity: 1;}
#tooltip-badge_c ~ #columns #badges li:nth-of-type(1) img {opacity: 0;}

#column_2 .panel:nth-of-type(1) {top: 0 !important;}
#viewer #tooltip-badge_c[style*='top: 5px']:first-of-type ~ #columns #column_2 .panel:nth-of-type(2) {top: 0;}
#viewer #tooltip-badge_c[style*='top: 10px']:first-of-type ~ #columns #column_2 .panel:nth-of-type(3) {top: 0;}
#viewer #tooltip-badge_c[style*='top: 15px']:first-of-type ~ #columns #column_2 .panel:nth-of-type(4) {top: 0;}

#viewer #tooltip-badge_c[style*='top: 0px']:first-of-type ~ #columns #badges li:nth-of-type(1) img {opacity: 1;}
#viewer #tooltip-badge_c[style*='top: 5px']:first-of-type ~ #columns #badges li:nth-of-type(2) img {opacity: 1;}
#viewer #tooltip-badge_c[style*='top: 10px']:first-of-type ~ #columns #badges li:nth-of-type(3) img {opacity: 1;}
#viewer #tooltip-badge_c[style*='top: 15px']:first-of-type ~ #columns #badges li:nth-of-type(4) img {opacity: 1;}

@supports not (clip-path: inset(calc(100% - 32px) 0 0 0)) {
  #id_badges::after {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 32px);
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* Contact and Comments */

#id_contact, #id_comments {left: 126px;}
#id_contact {top: 67px;}

#id_comments {
 background-position: -159px 0;
 top: 250px;
}
#id_comments #alert_container {padding: 0;}
#id_comments #alerts_banner, #id_comments p, #id_comments dl {display: none;}

#id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a, #id_comments, #id_comments a {
 display: block;
 width: 53px !important;
 height: 52px !important;
 font-size: 0;
}
#id_contact ul:not(.buttons) li a, #id_comments a {position: absolute;}

#id_contact ul:not(.buttons) li {
 position: relative;
 margin-bottom: 9px;
}
#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 top;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -53px top;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -106px top;}

#id_contact ul:not(.buttons) li, #id_comments {
 opacity: .01;
 transition: opacity .5s ease-in-out;
}
#id_contact ul:not(.buttons) li:hover, #id_comments:hover {opacity: 1;}

/* Details */

#id_details {
 display: flex;
 flex-flow: row wrap;
 align-content: center;
 width: 390px;
 height: 150px;
 top: 406px;
 left: 613px;
}
#id_details .forum_userstatus {display: none;}

#id_details p:first-of-type {
 margin: 0 0 0 20px;
 position: absolute;
}

#id_details p:nth-of-type(n+2), #id_details::before, #id_details::after {
 width: calc(100% - 130px);
 margin: 0 0 0 130px;
}

#id_details::before, #id_details::after, #id_details p::after {
 display: block;
 font-weight: bold;
 opacity: .5;
}

#id_details::before {margin-bottom: 10px;}
#id_details::after {content: 'Profile Theme by AlthIndor';}

#id_details p:last-of-type::after {
 content: 'Profile Art Made by Piewat';
 margin-top: 10px;
}

/* Media */

.media_panel {
 width: 20px;
 height: 20px !important;
 top: 555px;
 left: 553px;
}

.media_panel::after {
 content: url('https://i.imgur.com/MWTKBXK.gif');
 filter: brightness(50%) sepia(50%);
 pointer-events: none;
}

.media_panel iframe {
 position: absolute;
 bottom: -2px;
 left: -10px;
 opacity: .01;
}

.media_panel h2 {
 background: none;
 color: #FFFFFF;
 font: 600 10px/0 'Open Sans', sans-serif;
 text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
 text-transform: capitalize;
 position: fixed;
 top: 601px;
 left: 555px;
 pointer-events: none;
}
.media_panel:hover h2 {display: initial !important;}

/* Misc */

#column_2 .panel:not(#id_badges) .buttons {
 width: 45px;
 margin: 0;
 position: fixed;
 left: calc(50% + 470px);
}

#column_2 .panel:nth-of-type(1) .buttons {top: calc(50% - 240px);}
#column_2 .panel:nth-of-type(2) .buttons {top: calc(50% - 220px);}
#column_2 .panel:nth-of-type(3) .buttons {top: calc(50% - 200px);}
#column_2 .panel:nth-of-type(4) .buttons {top: calc(50% - 180px);}

.media_panel .buttons {
 position: fixed;
 top: 550px;
 left: 580px;
}