Pro for Sayuu

/* Profile by AlthIndor */

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;
  }
}

.custom_panel:nth-of-type(n+2), #id_comments, #id_contact ul:not(.buttons) li, .spoiler-control-show {background: url('https://images2.imgbox.com/bd/27/hsjsgcFR_o.png');}
#column_1, .custom_panel:nth-of-type(1) .spoiler-control-show {background: url('https://images2.imgbox.com/c2/83/hOB34St6_o.png') center no-repeat;}

/* 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 {
 float: none;
 margin: 0;
 position: absolute;
}
#column_2, #column_3 {display: none;}

#columns, #column_1 {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}
#column_1 {background-position: 50% calc(50% + 12px);}

/* Panels */

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

.panel {
 color: #404040;
 font: 10px/1.6em 'Open Sans', sans-serif;
 text-align: justify;
 text-align-last: center;
 position: absolute;
 overflow: hidden;
}
.panel:not(.custom_panel) h2 {display: none;}

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

.custom_panel, .spoiler-wrapper, .spoiler-title {
 width: 395px;
 height: 340px !important;
}

.spoiler-wrapper, .spoiler-title {
 top: 0;
 left: 0;
}
.spoiler-wrapper + br {display: none;}

.custom_panel {
 padding-top: 38px;
 left: calc(50% + 41px);
}

/* Spoiler Buttons and Header */

.custom_panel h2 {
 background: none;
 font: 900 14px/30px 'Overlock', serif;
 letter-spacing: .03em;
 text-align: center;
 text-shadow: 0 0 3px #000;
 z-index: 999;
 pointer-events: none;
}

.spoiler-wrapper, .spoiler-title button {border: none;}
.spoiler-title span {display: none;}
.spoiler {display: none;}

.spoiler-wrapper {
 padding: 0;
 position: absolute;
}

.spoiler-title .spoiler-control {
 display: block !important;
 outline: none;
}

.spoiler-title .spoiler-control-show, .custom_panel h2 {
 width: 95px;
 height: 32px;
 position: fixed;
 top: calc(50% - 266px);
}

.spoiler-title .spoiler-control-show {
 opacity: .01;
 transition: opacity .5s ease-in-out;
 z-index: 998;
}
.spoiler-title .spoiler-control-show:hover {opacity: 1;}

.spoiler-title .spoiler-control-hide {
 background: none !important;
 width: 100%;
 height: calc(100% - 38px);
 margin-top: 38px;
 cursor: default !important;
}

.custom_panel:nth-of-type(1) h2, .custom_panel:nth-of-type(1) .spoiler-control-show {left: calc(50% + 41px);}
.custom_panel:nth-of-type(1) .spoiler-control-show {background-position: -611px -37px !important;}

.custom_panel:nth-of-type(2) h2, .custom_panel:nth-of-type(2) .spoiler-control-show {left: calc(50% + 141px);}
.custom_panel:nth-of-type(2) .spoiler-control-show {background-position: 0 bottom !important;}

.custom_panel:nth-of-type(3) h2, .custom_panel:nth-of-type(3) .spoiler-control-show {left: calc(50% + 241px);}
.custom_panel:nth-of-type(3) .spoiler-control-show {background-position: -95px bottom !important;}

.custom_panel:nth-of-type(4) h2, .custom_panel:nth-of-type(4) .spoiler-control-show {left: calc(50% + 341px);}
.custom_panel:nth-of-type(4) .spoiler-control-show {background-position: -190px bottom !important;}

/* Spoiler Function */

#column_1 .custom_panel {top: -100%;}
#column_1 .custom_panel:focus-within {top: calc(50% - 266px);}
#column_1 .custom_panel:focus-within .spoiler-control-show {opacity: 1;}

#column_1 .custom_panel:first-of-type {
 background: none !important;
 top: calc(50% - 266px) !important;
}

/* Contact and Comments */

#id_contact, #id_comments {left: calc(50% - 444px);}

#id_contact {
 background: none;
 top: calc(50% - 236px);
}

#id_comments {
 background-position: right -156px;
 top: calc(50% - 53px);
}
#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: right 0px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: right -52px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: right -104px;}

#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 {
 background: none;
 display: flex;
 flex-flow: row wrap;
 align-content: center;
 width: 390px;
 height: 150px;
 top: calc(50% + 103px);
 left: calc(50% + 43px);
}
#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 {
 content: 'Music by Kezia Amelia ft. Renardi Effendi';
 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;
}

/* Wish List */

.custom_panel ol {
 display: grid;
 grid-template-columns: repeat(8, 40px);
 grid-column-gap: calc((100% - (40px * 8)) / 7);
 grid-row-gap: 10px;
 margin: 5px 0 0 0 !important;
 padding: 0 2px;
}

.custom_panel ol a {
 display: inline-block;
 background: #FFFFFF;
 width: 30px;
 height: 30px;
 padding: 5px;
 border-radius: 50%;
 box-shadow: 0 0 2px rgba(0,0,0,.3);
 outline: 1px dotted #FF0000;
 outline-offset: -3px;
 transition: all .5s ease-in-out;
}

.custom_panel ol a:hover {
 background: #30B0FF;
 box-shadow: 0 0 2px #FFFFFF;
 outline-color: #FFFFFF;
}

/* Media */

.media_panel {
 background: url('https://i.imgur.com/43iYKtm.gif') center no-repeat;
 width: 30px;
 height: 30px !important;
 top: calc(50% + 243px);
 left: calc(50% - 20px);
}

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

.media_panel h2 {
 background: none;
 padding: 0;
 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: calc(50% + 298px);
 left: calc(50% - 13px);
 pointer-events: none;
}
.media_panel:hover h2 {display: initial;}

/* Misc */

.custom_panel .buttons {
 width: 45px;
 position: fixed;
 left: calc(50% + 460px);
}
.custom_panel:nth-of-type(1) .buttons {top: calc(50% - 240px);}
.custom_panel:nth-of-type(2) .buttons {top: calc(50% - 220px);}
.custom_panel:nth-of-type(3) .buttons {top: calc(50% - 200px);}
.custom_panel:nth-of-type(4) .buttons {top: calc(50% - 180px);}

.media_panel .buttons {
 position: fixed;
 top: calc(50% + 252px);
 left: calc(50% + 15px);
}

.picture_decoration {top: 50px !important;}