Pro for JigglyBunz

/* Profile by AlthIndor */

html, body {
 background: url('https://i.imgur.com/ESYRnf2.jpg') #000 no-repeat fixed right center / contain;
 cursor: url('https://i.imgur.com/xUVME9U.png'), auto !important;
}
body a {text-decoration: none !important;}

html {
 --primary-color: #2D89EF;
 --secondary-color: #FFFFFF;
 --tertiary-color: #404040;
 --shadow-effect: 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.5);
}

/* Fonts */

@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/v7/ga6Law1J5X9T9RW6j9bNdOwzfReecQ.woff2) format('woff2');
}

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

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: var(--primary-color);
 height: 30px !important;
 box-shadow: var(--shadow-effect);
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 font-size: 0 !important;
 padding: 0 3px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}
#gaia_header .spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#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: 0;
 padding: 16px 34px 0 0;
 filter: drop-shadow(0 1px rgba(0,0,0,.5));
}

/* Text Control */

#gaia_header a, #id_contact li::after, .panel h2 {
 color: var(--secondary-color) !important;
 font: 700 11px/2.7em 'Noto Serif', serif;
 text-shadow: 0 1px 1px rgba(0,0,0,.25);
 text-transform: uppercase;
}
#id_contact li, .panel h2 {text-indent: 10px;}

.panel h2 {
 font-size: 14px;
 line-height: 2.1em;
}

/* Columns */

#columns, #column_1, #column_2 {
 float: none;
 display: block;
 overflow: visible;
}
#column_1, #column_2 {width: 100%;}
#column_3 {display: none;}

#columns {
 width: 390px;
 height: 270px;
 top: calc((100% - 270px + 30px) / 2);
 left: 52px;
}

#column_1 {
 height: 230px;
 margin: 0 0 10px 0;
 border-radius: 5px;
 box-shadow: var(--shadow-effect);
 transform: translateZ(0);
 overflow: hidden;
}

#column_2 {
 height: 30px;
 margin: 0;
}

/* Panels */

.panel, .panel h2 {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.panel a {color: var(--primary-color);}
.panel a:hover {color: inherit;}

.panel {
 color: var(--tertiary-color);
 font: 400 11px/1.6em 'Open Sans', sans-serif;
}

.panel h2 {width: 100%;}
#column_2 h2 {display: none;}

/* Button Effects */

#id_contact ul:not(.buttons) li, .media_panel, .panel h2 {
 background: var(--primary-color);
 height: 30px !important;
}

#id_contact ul:not(.buttons) li, .media_panel {
 border-radius: 5px;
 box-shadow: var(--shadow-effect);
}

/* About Me */

#id_about {
 background: var(--secondary-color);
 width: 100%;
 height: calc(100% - 30px);
 margin-top: 30px;
 padding-right: 10px;
 border: 10px solid var(--secondary-color);
 overflow-x: hidden;
 overflow-y: scroll;
}
#id_about img {max-width: 100%;}

#id_about h2 {
 position: fixed;
 top: 0;
 left: 0;
 border-bottom: 1px solid rgba(0,0,0,.75);
 box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* Buttons */

#id_contact {
 background: none;
 float: left;
}

.media_panel {
 float: right;
 width: 30px;
 overflow: hidden;
}

#id_contact ul:not(.buttons) li {
 float: left;
 width: 110px;
 font-size: 0;
 margin: 0 10px 0 0;
 position: relative;
}

#id_contact ul:not(.buttons) li::after {pointer-events: none;}
#id_contact ul:not(.buttons) li:nth-of-type(1)::after {content: 'Add as Friend';}
#id_contact ul:not(.buttons) li:nth-of-type(2)::after {content: 'Send Message';}
#id_contact ul:not(.buttons) li:nth-of-type(3)::after {content: 'Start a Trade';}

#id_contact ul:not(.buttons) li a {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

.media_panel object {
 position: absolute;
 bottom: 0;
 left: -8px;
 opacity: .01;
}

.media_panel:after {
 content: url('https://i.imgur.com/vcNz49l.png');
 position: absolute;
 top: -68px;
 left: 3px;
 transform-origin: top left;
 transform: scale(.185);
 filter: drop-shadow(0 2px 1px rgba(0,0,0,.5));
 pointer-events: none;
}

/* Effects */

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