Pro for fluutist

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

html, body {background: url('https://i.imgur.com/1oAlltT.jpg') fixed bottom center / cover;}
body a {text-decoration: none !important;}

#columns, #id_contact ul:not(.buttons) li, #id_comments h2 + div, #id_comments h2 ~ p {background: url('https://images2.imgbox.com/20/a5/5tR54vKc_o.png');}

/* 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: 'Shadows Into Light Two';
 font-style: normal;
 font-weight: 400;
 src: local('Shadows Into Light Two'), local('ShadowsIntoLightTwo-Regular'), url(https://fonts.gstatic.com/s/shadowsintolighttwo/v6/4iC86LVlZsRSjQhpWGedwyOoW-0A6_kpsyNmpAzHGQ.woff2) format('woff2'), url(https://fonts.gstatic.com/s/shadowsintolighttwo/v6/4iC86LVlZsRSjQhpWGedwyOoW-0A6_kpsyNmpAzHHw.woff) format('woff');
}

/* Header */

#viewer #gaia_header {
 background: #B05240;
 height: 28px !important;
 border-top: 2px solid #362626;
 box-shadow: 0 2px rgba(54,38,38,.2);
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 font: normal 0/16px 'Shadows Into Light Two', 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/xhv54JZ.png') 0 1px no-repeat;
 background-size: 100% auto;
 width: 0;
 height: 0;
 padding: 19px 36px 0 0;
 filter: brightness(110%) saturate(70%);
}

#gaia_header a {
 color: blanchedalmond !important;
 font-size: 12px !important;
 letter-spacing: .1em;
 text-transform: lowercase;
 transition: color .5s ease-in-out;
}
#gaia_header a:hover {color: #FFFFFF !important;}

#header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
 content: '•';
 color: sandybrown;
 font-size: 22px;
 margin: 0 5px;
 position: relative;
 top: 3px;
}

/* Scrollbars */

#columns {
 scrollbar-arrow-color: #FFFFFF;
 scrollbar-track-color: #9A4A3C;
 scrollbar-face-color: #FFFFFF;
 scrollbar-shadow-color: #9A4A3C;
}

#columns ::-webkit-scrollbar {
 background: #362626;
 width: 10px;
 border-radius: 5px;
}

#columns ::-webkit-scrollbar-thumb {
 background: #B05240;
 border: 1px solid #362626;
 border-radius: 5px;
}

/* Columns */

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

#columns {
 width: 760px;
 height: 650px;
 left: calc(50% - (760px / 2));
 top: calc(50% - 325px + 15px);
 opacity: .5;
 transition: opacity .5s ease-in-out;
}
#columns:hover {opacity: 1;}

#column_1, #column_2, #column_3 {
 width: 1px;
 height: 1px;
 position: absolute;
 top: 0;
 left: 0;
 overflow: visible;
}

/* Panels */

.panel {
 background: none;
 color: #FFFFFF;
 font: 12px/1.6em 'Open Sans', sans-serif;
 padding: 0;
 margin: 0;
 position: absolute;
 box-sizing: border-box;
}
.panel h2 {display: none;}
.panel a {color: sandybrown;}

#id_footprints, #id_wishlist {
 width: 300px;
 height: 218px;
 padding-right: 10px;
 top: 357px;
 border: 10px solid transparent;
 overflow-x: hidden;
 overflow-y: scroll;
}
#id_footprints {left: 390px;}
#id_wishlist {left: 70px;}

/* Details */

#id_details {
 background: url('https://a1cdn.gaiaonline.com/dress-up/avatar/ava/69/42/1c3aaa0a28f4269.png');
 width: 120px;
 height: 150px;
 top: 111px;
 left: 430px;
 filter: drop-shadow(3px 0 #B05240);
}
#id_details * {display: none;}

/* Wish List */

#id_wishlist {
 display: grid;
 grid-template-columns: repeat(5, 42px);
 grid-column-gap: calc((100% - (42px * 5)) / 4);
 grid-row-gap: 10px;
}
#id_wishlist .clear {display: none;}

#id_wishlist .item {
 background: sandybrown;
 width: 42px;
 height: 42px;
 text-align: center;
 position: relative;
 border-radius: 50%;
 transition: all .5s ease-in-out;
}
#id_wishlist .item:hover {background: #FFFFFF;}

#id_wishlist .item a {
 display: inline-block;
 width: 30px;
 height: 30px;
 padding: 2px;
 margin: 3px 0 0 0;
 border: 1px dotted #FFFFFF;
 transition: all .5s ease-in-out;
}

#id_wishlist .item a:hover {
 border-color: #800000;
 transform: rotate(360deg);
}

.owner_checkmark {
 margin: 0;
 top: 5px;
 left: 5px;
}
.premium_sparkle {display: none;}

/* Comments */

#id_comments {
 width: 60px;
 height: auto;
 top: 286px;
 left: 181px;
}
#id_comments #alerts_banner {display: none;}
#id_comments dl {display: none;}

/* Buttons */

#id_contact {
 width: 120px;
 top: 231px;
 left: 297px;
}

#id_contact ul:not(.buttons) li, #id_comments h2 + div, #id_comments h2 ~ p {
 background-position-x: -760px;
 display: block;
 float: left;
 font-size: 0;
 position: relative;
 opacity: .001;
 transition: opacity .5s ease-in-out;
}
#id_contact ul:not(.buttons) li:hover, #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {opacity: 1;}

#id_contact ul:not(.buttons) li {
 width: 30px;
 height: 30px;
 margin: 0 7px 0 0;
}
#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position-y: 0;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-y: -30px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-y: -60px;}

#id_comments h2 + div, #id_comments h2 ~ p {
 width: 20px;
 height: 20px;
 margin: 0 5px 0 0;
}
#id_comments h2 + div {background-position-y: -90px;}
#id_comments h2 ~ p {background-position-y: -110px;}
#id_comments h2 + div .clear {display: none;}

#id_contact ul:not(.buttons) li a, #id_comments h2 + div a, #id_comments h2 ~ p a {
 display: block;
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}

/* Media */

.media_panel {
 background: url('https://i.imgur.com/43iYKtm.gif') center no-repeat;
 width: 20px;
 height: 20px !important;
 top: 245px;
 left: 80px;
 filter: brightness(150%) sepia(100%);
 overflow: hidden;
}

.media_panel object {
 position: absolute;
 bottom: -4px;
 left: -12px;
 opacity: .01;
}

.media_panel .buttons {
position: fixed;
top: 40px;
left: 10px;
}
form .media_panel {filter: none;}

/* Pictures Container */

#pictures_container {
 width: 1px;
 height: 1px;
 position: absolute;
 top: 50%;
 left: 50%;
 overflow: visible;
}

.avatar_decoration {
 opacity: .5;
 transition: opacity .5s ease-in-out;
}
.avatar_decoration:hover {opacity: 1;}