Pro for Umi Uematsu

/* Design by Cassiel Socks, Code by AlthIndor */

body {background: url('https://i.imgur.com/wLAxPc5.png'), url('https://i.imgur.com/oKAOpEY.png');}
body a {text-decoration: none !important;}

#content {background: url('https://images2.imgbox.com/1e/18/rsIA1hBY_o.png') no-repeat;}

/* 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: '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'), url(https://fonts.gstatic.com/s/patrickhand/v12/LDI1apSQOAYtSuYWp8ZhfYe8XsLN.woff) format('woff');
}

/* Header */

#gaia_header {
 background: none;
 height: 30px;
 border-bottom: 2px solid #744E44;
 overflow: hidden;
}

#gaia_header #header_left, #gaia_header #header_right {
 background: #744E44;
 width: 50%;
 height: 28px;
 font: bold 0/26px 'Patrick Hand', sans-serif;
 padding: 0 7px;
 box-sizing: border-box;
}
#gaia_header .spacer {display: none;}

#header_left img {
 background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
 background-size: auto 200%;
 width: 0;
 height: 18px;
 padding: 0 42px 0 0;
}

#header_right .favorites_add {
 background: none !important;
 margin: 0;
}

#header_right .favorites_add::before {
 content: '❤';
 font-size: 14px;
 position: absolute;
 top: -4px;
 left: 3px;
}

#gaia_header a, #header_left li::after, #header_right li::before {
 color: #FFFFFF !important;
 font-size: 12px !important;
}

#gaia_header a {
 letter-spacing: .05em !important;
 text-decoration: none;
 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 5px;
 opacity: .75;
}
#header_left li:nth-of-type(2)::after {margin-left: 0;}

/* Remove Sections */

#header, #details, #comments, #friends, #journal, #signature {display: none;}
#profile .avatar, #profile .items, #about .links {display: none;}

/* Main */

#site, #content, #content #sidebar, #content #main {
 padding: 0;
 margin: 0;
 position: absolute;
 border: none;
}

#site {
 width: 1140px;
 height: 760px;
 top: 60px;
 left: calc(50% - (1140px / 2));
}

@media screen and (min-height: 800px) {
  #site {
    top: calc(50% - ((745px - 28px) / 2));
    height: 745px;
  }
}

#content, #content #sidebar, #content #main {
 height: 100%;
 top: 0;
}
#content {width: 100%;}

#content #sidebar, #content #main {
 width: 1px;
 top: 0;
 left: 0;
}

/* Sections */

.section {
 color: #4C342C;
 font: 12px/1.6em 'Open Sans', sans-serif;
 padding: 0;
 margin: 0;
 position: absolute;
 box-sizing: border-box;
}
.section h2 {display: none;}

#about ol, #wishlist {
 border: 10px solid transparent;
 border-radius: 10px;
}

/* About */

#about {
 background: none;
 width: 470px;
 height: 250px;
 text-align: justify;
 top: 125px;
 left: 286px;
}

#about a {
 color: #E85098;
 font-weight: bold;
}
#about a:visited {color: #660B66 !important;}
#about a:hover {color: #00C0FF !important;}

#about h2 ~ ol {
 padding-right: 10px;
 box-sizing: border-box;
 overflow-x: hidden;
 overflow-y: scroll;
}

#about h2 ~ ol li {
 list-style-type: none;
 margin: 0;
}

#about h2 ~ ol:nth-of-type(1) {
 background: rgba(255,222,232,.9);
 height: 100%;
}

#about h2 ~ ol:nth-of-type(2) {
 background: rgba(186,242,234,.6);
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-column-gap: 10px;
 grid-row-gap: 10px;
 width: 600px;
 height: 120px;
 justify-items: center;
 position: absolute;
 top: 405px;
 left: -130px;
}
#about h2 ~ ol:nth-of-type(2) br {display: none;}
#about h2 ~ ol:nth-of-type(2) * {box-sizing: border-box;}

/* Gallery */

#about h2 ~ ol:nth-of-type(2) li {
 background: #78CCD8;
 width: 100px;
 height: 100px;
 padding: 0;
 position: relative;
 border: 4px solid transparent;
 border-radius: 5px;
 transition: background .5s ease-in-out;
}
#about h2 ~ ol:nth-of-type(2) li:hover {background: #F6D474;}

#about h2 ~ ol:nth-of-type(2) .spoiler-wrapper {
 padding: 0;
 border: 1px solid #FFFFFF;
 border-radius: 3px;
 transform: scale(1);
 z-index: 1;
}
#about h2 ~ ol:nth-of-type(2) .spoiler-title {z-index: 2;}

#about h2 ~ ol:nth-of-type(2) [class*='spoiler'] {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

#about h2 ~ ol:nth-of-type(2) .spoiler-title button {
 background: none;
 border: none;
}
#about h2 ~ ol:nth-of-type(2) .spoiler-title span {display: none;}

#about h2 ~ ol:nth-of-type(2) .spoiler {
 display: flex;
 justify-content: center;
 overflow: hidden;
}

#about h2 ~ ol:nth-of-type(2) .spoiler img {
 max-height: 100%;
 max-width: 100%;
 object-fit: cover;
}

#about h2 ~ ol:nth-of-type(2) .spoiler-revealed {
 background: rgba(0,0,0,.8);
 position: fixed;
 border: none;
 z-index: 999;
}
#about h2 ~ ol:nth-of-type(2) .spoiler-revealed .spoiler {border: 50px solid transparent;}
#about h2 ~ ol:nth-of-type(2) .spoiler-revealed img {object-fit: scale-down;}

#about h2 ~ ol:nth-of-type(2) img[class*='bbcode-swap'] {
 align-self: center;
 position: fixed;
 z-index: 9;
}
.bbcode-swapping-image {background: url('https://i.imgur.com/2MbyLRf.png');}

/* Wish List */

#wishlist {
 background: rgba(246,212,116,.5);
 width: 600px;
 height: 60px;
 left: 156px;
 top: 421px;
}

#wishlist .items {
 display: flex;
 flex-flow: row wrap;
 width: 100%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: scroll;
}
#wishlist .item {background: none;}

#wishlist li {
 background: #F6D474;
 display: block;
 flex-grow: 1;
 width: 30px;
 height: 30px;
 padding: 5px;
 margin: 0 10px 10px 0;
 border-radius: 5px;
 transition: background .5s ease-in-out;
}
#wishlist li:hover {background: #E85098;}

#wishlist a {
 display: block;
 width: 100%;
 height: 100%;
 text-align: center;
}

/* Contact Buttons */

#profile {
 background: none;
 width: 60px;
 top: 421px;
 left:  25px;
}

#bar {
 background: none;
 height: auto;
 font: bold 0px/33px 'Patrick Hand', sans-serif;
 text-align: center;
 margin: 0;
}
#bar #onlineButton, #bar #offlineButton, #bar #ignoreButton {display: none !important;}

#bar li, #bar li::after, #bar li a {
 display: block;
 width: 100% !important;
}

#bar li::after, #bar li a {
 height: 100%;
 position: absolute;
 top: 0;
}

#bar li {
 float: none;
 height: 40px !important;
 color: #744E44;
 text-indent: -1px !important;
 position: relative;
 margin-bottom: 12px;
 border: 3px solid #660B66;
 border-radius: 10px;
 box-shadow: -2px 3px #DCF6D0;
 box-sizing: border-box;
 transition: all .5s ease-in-out;
}
#bar li:hover {color: #FFFFFF;}

#bar li a {
 background: none !important;
 padding: 0;
 z-index: 2;
}

#bar li::after {
 font-size: 21px;
 letter-spacing: .03em;
 z-index: 1;
}

#bar #addButton {background: #F8D6E0;}
#bar #addButton:hover {background: #E85098;}
#bar #addButton::after {content: 'ADD';}

#bar #msgButton {background: #FCF2A8;}
#bar #msgButton:hover {background: #F6D474;}
#bar #msgButton::after {content: 'MSG';}

#bar #tradeButton {background: #D8F8F2;}
#bar #tradeButton:hover {background: #78CCD8;}
#bar #tradeButton::after {content: 'TRD';}

/* Media */

#multimedia {
 background: url('https://i.imgur.com/43iYKtm.gif') center no-repeat #DCF6D0 !important;
 width: 38px;
 height: 38px;
 top: 337px;
 left: 156px;
 border: 2px solid #660B66;
 border-radius: 10px;
 overflow: hidden;
 transition: all .5s ease-in-out;
}
#multimedia:hover {background-color: #FFFFFF !important;}

#multimedia object {
 position: absolute;
 bottom: 0;
 left: -17px;
 opacity: .01;
}