Pro for Misfortuned Checkmate

/* Designed by Visual Light, Coded by AlthIndor */

html, body {background: url('https://i.imgur.com/9XAj6qE.png') center #000;}
#gaia_header, #panel-details, #columns, #column_2 .panel, #column_2 h2, #column_2 h2::after {background: url('https://images2.imgbox.com/92/00/v7qxXZ3L_o.png');}

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

#panel-details {
 background-position: bottom left;
 width: 100%;
 height: 148px;
 position: absolute;
 top: calc(50% - 74px + 15px);
 left: 0;
 box-shadow: 0 0 5px #000;
}

/* Fonts */

@font-face {
 font-family: 'Noto Serif';
 font-style: normal;
 font-weight: 400;
 src: local('Noto Serif'), local('NotoSerif'), url(https://fonts.gstatic.com/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2) format('woff2');
}

@font-face {
 font-family: 'Noto Serif';
 font-style: normal;
 font-weight: 700;
 src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://fonts.gstatic.com/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfReecQ.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background-position: bottom left;
 height: 30px !important;
 box-shadow: 0 0 5px #000;
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {filter: drop-shadow(0 1px 1px #00000080);}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 font: 700 0px/24px 'Noto Serif', serif !important;
 padding: 0 8px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}

#header_left img {
 background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
 width: 0 !important;
 padding: 0 34px 0 0;
 margin:  0 -1px 0 0;
 filter: invert(100%);
}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 11px !important;
 font-variant: small-caps;
}
#gaia_header a:hover {opacity: .8;}

#header_left li::before, #header_right li::before {
 font-size: 14px;
 margin: 0 6px;
 position: relative;
 top: 1px;
}
#header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {content: '•';}

/* Columns */

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

#columns, #column_1 {
 width: 1160px;
 height: 580px;
}

#columns {
 top: calc(50% - 292px + 15px);
 left: calc(50% - 580px);
 transform: translateZ(0);
}

#column_2 {
 width: 548px;
 height: 330px;
 top: 126px;
 left: 415px;
 border: 10px solid transparent;
 box-sizing: border-box;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
 background: #00000040;
 width: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: #FFFFFF;}

#columns * {
 scrollbar-color: #FFFFFF #00000040;
 scrollbar-width: thin;
}

/* Panels */

.panel, .panel h2 {
 color: #FFFFFF;
 padding: 0;
 margin: 0;
}
.panel:not(#id_store), .panel h2 {box-sizing: border-box;}

.panel {
 font: 11px/1.6 'Noto Serif', serif;
 position: absolute;
 overflow: hidden;
}
.panel img {max-width: 100% !important;}

.panel a {color: #FFFFBE;}
#id_about a:hover, #id_comments dl a:hover {opacity: .6;}

#column_2 .panel {
 background-position: -425px -136px;
 width: 100%;
 height: 100%;
 padding-right: 10px;
 top: -100%;
 left: 0;
 overflow-y: scroll;
 z-index: 9;
}
#column_2 #id_about, #column_2 .panel:hover {top: 0;}
#column_2 #id_about {z-index: 1;}

#id_about, #id_comments {text-align: justify;}
#id_wishlist, #id_signature {text-align: center;}

/* Panel Headers */

#column_2 h2, #column_2 h2::after {
 width: 176px;
 height: 64px;
}

#column_2 h2 {
 background-position-y: -580px;
 font-size: 0;
 position: fixed;
 right: 7px;
}
#id_about h2 {top: 165px;}

#id_comments h2 {
 background-position-x: -176px;
 top: 229px;
}

#id_wishlist h2 {
 background-position-x: -352px;
 top: 293px;
}

#id_signature h2 {
 background-position-x: -528px;
 top: 354px;
}

#column_2 h2::after {
 content: '';
 background-clip: content-box;
 background-position-x: inherit;
 background-position-y: -644px;
 position: absolute;
 right: 0;
 transition: opacity .5s ease-in-out;
}

#column_2 .panel:hover ~ #id_about h2::after, #column_2 h2::after {
 border-left: 0px solid transparent;
 opacity: 0;
}

#id_about h2::after, #column_2 .panel:hover h2::after {
 border-left-width: 25px;
 opacity: 1;
}

/* Buttons */

#id_contact {
 background: none;
 top: 125px;
 overflow: visible;
}

#id_contact, #id_store {left: 348px;}
#id_contact h2, #id_contact span, #id_store h2 {display: none;}

#id_store {top: 287px;}
#id_store *:nth-last-child(n+2) {display: none;}

#id_contact li, #id_contact li a, #id_store, #id_store a {
 width: 40px;
 height: 40px;
}

#id_contact li, #id_store {
 background: url('https://i.imgur.com/TnEN5nQ.png') top center / 32px auto #9C64B0;
 border: 2px solid #000;
 border-radius: 50%;
 box-shadow: 0 2px 3px #00000080;
 overflow: hidden;
}

#id_contact li {
 margin: 0 0 10px 0;
 position: relative;
}
#id_contact li:nth-of-type(1) {background-position-y: 4px;}
#id_contact li:nth-of-type(2) {background-position-y: -28px;}
#id_contact li:nth-of-type(3) {background-position-y: -60px;}

#id_contact li a, #id_store a {
 background: url('https://i.imgur.com/vcNz49l.png') top center / 32px auto #E64CB4;
 background-position: inherit;
 font-size: 0;
 position: absolute;
 opacity: 0;
}
#id_contact li:hover a, #id_store:hover a {opacity: 1;}
#id_store, #id_store a {background-position: center -124px;}

/* Comments */

#id_comments #alerts_banner {display: none;}
#id_comments dd {margin: 0 0 15px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dl {
 clear: both;
 margin-top: 50px;
}

#id_comments dt {
 height: auto;
 line-height: normal;
 padding: 0 0 4px 0;
 margin: 0 0 2px 0;
 border-bottom: 1px solid #00000040;
}

#id_comments .dropBox {
 background: #00000040;
 width: 48px;
 height: 60px;
 margin: 5px 8px 0px 0px;
 border: 1px solid #000;
 overflow: hidden;
}

#id_comments .dropBox img {
 max-width: none !important;
 width: 120px;
 height: 150px;
 margin-top: -25px;
 margin-left: -45px;
}

/* Comments Buttons */

#id_comments h2 + div, #id_comments h2 ~ p {
 background: #9C64B0;
 width: calc(50% - 5px);
 height: 34px;
 font-variant: small-caps;
 line-height: 28px;
 text-align: center;
 position: relative;
 border: 2px solid #000;
 border-radius: 3px;
 box-shadow: 0 2px 3px #00000040;
 box-sizing: border-box;
 transition: background .5s ease-in-out;
}
#id_comments h2 + div:hover, #id_comments h2 ~ p:hover {background: #E64CB4;}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

/* Wish List */

#id_wishlist {
 display: grid;
 grid-template-columns: repeat(10, 1fr);
 grid-auto-rows: 40px;
 gap: 10px;
 justify-content: center;
}
.premium_sparkle, .owner_checkmark {margin: 0;}

#id_wishlist .item {
 background: #FFFFFF40;
 width: 100%;
 height: 30px;
 padding: 5px 0;
 position: relative;
 border-radius: 3px;
 transition: all .5s ease-in-out;
}
#id_wishlist .item:hover {background: #FFFFFF;}

.premium_sparkle {
 top: 3px;
 right: 1px;
}

.owner_checkmark {
 left: 5px;
 bottom: 5px;
 filter: drop-shadow(0 0 .1px #000);
}

/* Media */

.media_panel, .media_panel h2 {transition: opacity .5s ease-in-out;}
.media_panel:hover, .media_panel:hover h2 {opacity: 1;}

.media_panel {
 background: url('https://i.imgur.com/gqTTTvw.png') -20px -6px, linear-gradient(to bottom, #9C64B0, #C65CAC);
 width: 72px;
 height: 32px !important;
 bottom: 47px;
 left: 247px;
 border-radius: 5px;
 box-shadow: 0 1px 3px 2px #00000080;
 opacity: .4;
}

.media_panel h2 {
 background: none;
 position: fixed;
 color: #FFFFFF;
 font-size: inherit;
 text-shadow: 0 0 1px #000;
 bottom: 55px;
 left: 330px;
 opacity: 0;
 pointer-events: none;
}

.media_panel iframe {
 width: 300px;
 height: 200px;
 position: absolute;
 bottom: -2px;
 left: -20px;
 opacity: .01;
}