Pro for MonokuroBara

/* Design by Cassiel Socks and Code by AlthIndor */
/* Falling Petals by Aaron Griffin at Codepen.io */

#column_2 .panel:nth-of-type(n+2), #id_details p:first-of-type, #id_contact ul:not(.buttons) li, .custom_panel b {background: url('https://images2.imgbox.com/79/de/17Ee9XFD_o.png') border-box no-repeat;}
html, body {background: url('https://i.imgur.com/xgeYps2.jpg') fixed no-repeat top center / cover;}
body a {text-decoration: none !important;}

/* Fonts */

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 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 Condensed';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}

@font-face {
 font-family: 'Patrick Hand';
 font-style: normal;
 font-weight: 400;
 src: local('Patrick Hand'), local('PatrickHand-Regular'), url(https://fonts.gstatic.com/s/patrickhand/v12/LDI1apSQOAYtSuYWp8ZhfYe8XsLL.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header, #header_left, #header_right {background: none !important;}
#viewer #gaia_header {position: fixed !important;}
#header_right {float: right !important;}

#gaia_header #header_left, #gaia_header #header_right {
 box-sizing: border-box;
 font: normal 0/28px 'Open Sans Condensed', sans-serif !important;
 padding: 0 2px !important;
}
#gaia_header .spacer {display: none !important;}
#gaia_header li {margin: 0 5px !important;}

#header_left img {
 background: #FFFFFF;
 height: 0;
 mask-image: url('https://i.imgur.com/5FTB40o.png');
 padding: 16px 37px 0 0;
 transition: background .5s ease-in-out;
 width: 0;
}
#header_left img {-webkit-mask-image: url('https://i.imgur.com/5FTB40o.png');}
#header_left li:nth-of-type(2) a:hover img {background: #FFE490;}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 13px !important;
 font-weight: normal;
 text-transform: uppercase;
 transition: color .5s ease-in-out;
}
#gaia_header a:hover {color: #FFE490 !important;}

/* Columns */

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

#column_1, #column_2 {
 font-size: 0;
 height: 100%;
 position: absolute;
 width: 100%;
}
#column_2 {transform: translateZ(0);}

#columns ::-webkit-scrollbar {
 background: rgba(255,255,255,.5);
 border-radius: 5px;
 width: 10px;
}

#columns ::-webkit-scrollbar-thumb {
 background: rgba(32,64,128,.6) content-box;
 border: 1px solid transparent;
 border-radius: 5px;
}

/* Panels */

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

.panel a {color: #008000;}
.panel a:hover {color: #004080;}
.panel img {max-width: 100% !important;}

.custom_panel, #id_contact {background: none;}
.custom_panel h2, #id_contact h2 {display: none;}

#column_2 .panel:nth-of-type(n+2) {
 background-position: top right;
 border: 20px solid transparent;
 border-width: 0px 20px;
 color: #002040;
 font: 11px/1.6 'Open Sans', sans-serif;
 height: 0px;
 width: 430px;
}
#column_2 .panel:nth-of-type(2) {margin-top: 300px;}

#column_2 .panel:nth-of-type(n+2):hover {
 border-width: 20px;
 height: 300px;
}

#column_2 .panel:nth-of-type(n+3):not(#id_comments), #id_comments dl {
 overflow: hidden scroll;
 padding-right: 10px;
}

/* Panel Headers */

.panel h2 {
 background: rgba(192,232,255,.8);
 border-radius: 14px;
 box-shadow: 0 0 5px #C0E8FF inset, 0 0 2px rgba(0,0,128,.25), 0 0 10px #D0FFFF;
 color: #FFFFFF;
 height: 28px;
 font: normal 22px/26px 'Patrick Hand', cursive;
 position: fixed;
 text-align: center;
 text-shadow: 0 0 1px #004080;
 text-transform: capitalize;
 transition: background .5s linear;
 width: 170px;
}
.panel:hover h2 {background: sandybrown;}

.panel h2::after {
 content: '';
 display: none;
 height: 40px;
 left: 0;
 position: absolute;
 top: 50%;
 width: 100%;
}
.panel:hover h2::after{display: block;}

/* Contact */

#id_contact {
 height: 130px;
 left: calc(50% - 172px);
 width: 340px;
}

#id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a {
 display: block;
 font-size: 0;
 height: 90px;
 width: 90px;
}

#id_contact ul:not(.buttons) li {
 float: left;
 transform: scale(.75);
 transition: filter .5s ease-in-out;
}
#id_contact ul:not(.buttons) li:hover {filter: saturate(500%);}

#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 bottom;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -90px bottom;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -180px bottom;}
#id_contact ul:not(.buttons) li:nth-of-type(odd) {margin-top: 40px;}
#id_contact ul:not(.buttons) li:nth-of-type(n+2) {margin-left: 31px;}

/* Details */

#id_details p:first-of-type {
 border: 90px solid transparent;
 border-width: 90px 105px;
 left: calc(50% - 165px);
 pointer-events: none;
 position: fixed;
 top: 65px;
}
#id_details p:first-of-type img {filter: drop-shadow(-5px 0 #94B8D4) drop-shadow(5px 0 #94B8D4);}
#id_details p:nth-of-type(n+2) {margin-bottom: 0;}
#id_details .forum_userstatus {display: none;}

/* Comments */

#id_comments #alerts_banner {display: none;}
#id_comments #alert_container {float: none;}
#id_comments .deletecomment {margin: 0 0 0 10px;}
#id_comments .dropBox {display: none;}
#id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}

#id_comments dl {
 box-sizing: border-box;
 height: calc(100% - 35px);
 position: absolute;
 top: 35px;
 width: 100%;
}

#id_comments dt {
 border-bottom: 1px dotted rgba(0,0,0,.2);
 height: auto;
 line-height: 1.2;
 margin: 0 0 2px 0;
 padding: 0 0 4px 0;
 text-align: left;
}
#id_comments .username, #id_comments .date {float: none;}
#id_comments .date {font: 85% monospace; padding-left: 1px;}

#id_comments h2 + div, #id_comments h2 ~ p {
 background: #004080;
 border-radius: 5px;
 box-shadow: 0 0 2px #FFFFFF;
 float: left;
 height: 24px;
 line-height: 24px;
 text-align: center;
 transition: background-color .5s ease-in-out;
 width: calc(50% - 5px);
}
#id_comments h2 + div {margin: 0 10px 0 0;}
#id_comments h2 + div a, #id_comments h2 ~ p a {color: #FFFFFF;}
#id_comments h2 + div:hover, #id_comments h2 ~ p:hover {background: sandybrown;}

/* Wish and Equipped */

#id_wishlist, #id_equipment {
 display: grid;
 grid-template-columns: repeat(7, 42px);
 grid-auto-rows: 42px;
 grid-column-gap: calc((100% - (7*42px)) / 6);
 grid-row-gap: 12px;
}
.premium_sparkle {display: none;}

#id_wishlist .item, #id_equipment .item {
 background: rgba(0,64,128,.3);
 border-radius: 50%;
 height: 30px;
 outline: 1px dotted #FFFFFF;
 outline-offset: -3px;
 padding: 6px;
 transition: all .5s ease-in-out;
 width: 30px;
}
#id_wishlist .item:hover, #id_equipment .item:hover {background: sandybrown;}

#id_wishlist .item img, #id_equipment .item img {transition: all .5s ease-in-out;}
#id_wishlist .item:hover img[src*='thumbnails'], #id_equipment .item:hover img[src*='thumbnails'] {transform: rotate(360deg);}

/* Interests */

#id_interests {text-align: center;}
#id_interests h3:nth-of-type(n+2) {margin-top: 10px;}
#id_interests li:nth-last-of-type(n+2)::after {content: ',';}
#id_interests li:last-of-type::before {content: 'and ';}
#id_interests a {font-weight: normal;}

/* Signature Hack */

#id_signature br + br {display: none;}
#id_signature h2 ~ p:first-of-type {margin-top: -30px;}

#id_signature img[style*='float'] {
 float: none !important;
 margin-bottom: 10px;
}

/* Responsive Sizing */

@media screen and (max-width: 1199px) {

  #columns {
    height: 980px;
    left: calc(50% - 215px);
    top: 0;
    width: 430px;
  }
  @media screen and (min-height: 980px) {#columns {top: calc(50% - 490px);}}

  #column_2 .panel:nth-of-type(n+2) {margin-bottom: 38px;}
  #column_2 .panel:nth-of-type(n+2):hover {margin-bottom: 48px;}
  #column_2 .panel:nth-of-type(n+2) h2 {margin-top: -38px;}
  #column_2 .panel:nth-of-type(n+2):hover h2 {margin-top: -58px;}
  .panel h2 {left: calc(50% - 85px);}

}

@media screen and (min-width: 1200px) {

  #columns {
    height: 560px;
    left: calc(50% - 610px);
    top: calc(50% - 230px);
    width: 1220px;
  }

  #column_2 {
    margin-left: 10px;
    overflow: visible;
    width: calc(100% - 20px);
  }

  #column_2 .panel:nth-of-type(n+2) {
    position: absolute;
    transition: all .5s ease-in-out;
  }
  #column_2 .panel:nth-of-type(n+3) {top: 259px;}
  #id_about, #id_interests, #id_signature {left: 0;}
  #id_equipment, #id_comments, #id_wishlist {right: 0;}

  #column_2 #id_details {
    background-position: -330px -300px;
    left: calc(50% - 130px);
    top: 140px;
    width: 260px;
  }
  #column_2 #id_details:hover {height: 120px;}

  #id_details h2 {
    left: calc(50% - 85px);
    top: 395px;
  }

  .panel:not(#id_details) h2 {
    top: 216px;
    width: 130px;
  }

  #id_about h2 {left: 0;}
  #id_interests h2 {left: 150px;}
  #id_signature h2 {left: 300px;}
  #id_equipment h2 {right: 300px;}
  #id_comments h2 {right: 150px;}
  #id_wishlist h2 {right: 0;}

}

/* Falling Petals */

@keyframes falling1 {
 from {transform: rotate(0deg); right: 0; top: -35px;}
 to {transform: rotate(90deg); right: 350px; top: 100%;}
}

@keyframes falling2 {
 from {transform: rotate(90deg); right: 0; top: -35px;}
 to {transform: rotate(0deg); right: 400px; top: 100%;}
}

@keyframes falling3 {
 from {transform: rotate(-20deg); right: 0; top: -35px;}
 to {transform: rotate(-70deg); right: 230px; top: 100%;}
}

.custom_panel, .custom_panel div[id*='content'] {
 height: 100% !important;
 width: 100% !important;
}

.custom_panel {
 left: 0;
 position: fixed;
 text-align: right;
 top: 0;
}
.custom_panel br {display: none;}

.custom_panel b {
 display: inline-block;
 height: 0;
 position: relative;
 top: -35px;
 width: 0;
}

.custom_panel b:nth-of-type(n) {animation: falling1 5s 0s infinite ease-in-out;}
.custom_panel b:nth-of-type(2n) {animation: falling2 5s 0s infinite ease-out;}
.custom_panel b:nth-of-type(3n) {animation: falling3 5s 0s infinite ease-out;}

.custom_panel b:nth-of-type(3n+1) {opacity: .75;}
.custom_panel b:nth-of-type(3n+2) {opacity: .5;}

.custom_panel b:nth-of-type(01) {animation-delay: 1.9s;}
.custom_panel b:nth-of-type(02) {animation-delay: 3.9s;}
.custom_panel b:nth-of-type(03) {animation-delay: 2.3s;}
.custom_panel b:nth-of-type(04) {animation-delay: 4.4s;}
.custom_panel b:nth-of-type(05) {animation-delay: 5.0s;}
.custom_panel b:nth-of-type(06) {animation-delay: 3.5s;}
.custom_panel b:nth-of-type(07) {animation-delay: 2.8s;}
.custom_panel b:nth-of-type(08) {animation-delay: 1.5s;}
.custom_panel b:nth-of-type(09) {animation-delay: 3.3s;}
.custom_panel b:nth-of-type(10) {animation-delay: 2.5s;}
.custom_panel b:nth-of-type(11) {animation-delay: 1.2s;}
.custom_panel b:nth-of-type(12) {animation-delay: 4.1s;}
.custom_panel b:nth-of-type(13) {animation-delay: 1.0s;}
.custom_panel b:nth-of-type(14) {animation-delay: 4.7s;}
.custom_panel b:nth-of-type(15) {animation-delay: 3.0s;}

.custom_panel b:nth-of-type(n) {
 background-position: -680px bottom;
 height: 31px;
 width: 24px;
}

.custom_panel b:nth-of-type(2n+2) {
 background-position: -704px bottom;
 height: 35px;
 width: 25px;
}

.custom_panel b:nth-of-type(4n+1) {
 background-position: bottom right;
 height: 26px;
 width: 30px;
}