Pro for Hips Do Not Lie

/* Design by SugaSharra, Code by AlthIndor */

html, body {background: url('https://images2.imgbox.com/7b/d8/DkIXFa7t_o.png');}

html {
 --azure-color: #BEFBF5;
 --green-color: #708854;
 --brown-color: #482012;
 --yellw-color: #C4C084;
 --ornge-color: #E03A1C;
}

@keyframes RotateDisc {
 from {transform: rotate(0deg);}
 to {transform: rotate(360deg);}
}

@keyframes OpaqueDisc {
 from {opacity: 75;}
 to {opacity: .25;}
}

/* Fonts */

@font-face {
 font-family: 'Pacifico';
 font-style: normal;
 font-weight: 400;
 src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v13/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');
}

@font-face {
 font-family: 'PT Sans';
 font-style: normal;
 font-weight: 400;
 src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v10/jizaRExUiTo99u79D0KExQ.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: #181818;
 width: calc(100% - 20px) !important;
 height: 30px !important;
 position: absolute !important;
 top: 10px !important;
 left: 10px !important;
 border-bottom: 3px solid var(--yellw-color);
 box-shadow: 0 1px 5px rgba(0,0,0,.5), 0 0 3px 2px #304050;
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#gaia_header #header_left, #gaia_header #header_right {
 background: none !important;
 font-size: 0 !important;
 padding: 0 6px 0 4px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right !important;}

#gaia_header #header_left img {
 background: var(--yellw-color);
 width: 0;
 height: 16px;
 padding: 0 36px 0 0;
 transition: background .5s ease-in-out;
 mask-image: url('https://i.imgur.com/5FTB40o.png');
 -webkit-mask-image: url('https://i.imgur.com/5FTB40o.png');
}
#gaia_header #header_left img:hover {background: #FFFFFF;}

#gaia_header a {
 color: var(--yellw-color) !important;
 font: normal 12px/28px 'Pacifico', cursive !important;
 transition: color .5s ease-in-out;
 text-decoration: dotted underline !important;
}
#gaia_header a:hover {color: #FFFFFF !important;}

/* Columns */

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

#columns {
 background: url('https://images2.imgbox.com/36/e0/juHFw72e_o.png') no-repeat top left / contain;
 width: 1050px;
 height: 1000px;
 left: calc(50% - 525px);
 top: 60px;
 transform: translateZ(0);
}
@media screen and (min-height: 1070px) {#columns {top: calc(50% - 500px + 30px);}}
@media screen and (min-height: 1400px) {#columns {top: calc(50% - 500px);}}

#column_1, #column_2, #column_2::after {
 top: 0;
 left: 0;
}

#column_1, #column_2 {
 width: 100%;
 height: 100%;
}
#column_2 {background: url('https://images2.imgbox.com/fd/0f/g8R0rK4z_o.png') no-repeat top left / contain;}

#column_2::after {
 content: url('https://images2.imgbox.com/f0/b7/nSIMDNfo_o.png');
 position: absolute;
 transform-origin: 0 0;
 transform: scale(.5);
 pointer-events: none;
}

#column_3 {
 width: 410px;
 height: 410px;
 top: 197px;
 left: 191px;
}

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

#columns ::-webkit-scrollbar-thumb {
 background: rgba(254,244,234,.4) content-box;
 border: 1px solid transparent;
 border-radius: 3px;
}

/* Column 1 is Animation Layer */

#column_1 .custom_panel, #column_1 .custom_panel div {
 width: 100%;
 height: 100%;
 position: absolute;
}
#column_1 .custom_panel b, #column_1 .custom_panel b::after {position: absolute;}
#column_1 .custom_panel br {display: none;}

#column_1 .custom_panel b:nth-of-type(1)::after, #column_1 .custom_panel b:nth-of-type(2)::after {
 top: -97px;
 left: -97px;
}

#column_1 .custom_panel b:nth-of-type(1)::after {
 content: url('https://images2.imgbox.com/f4/37/yjFo4y8i_o.png');
 animation: RotateDisc 180s linear infinite, OpaqueDisc 10s 3.3s linear infinite alternate;
}

#column_1 .custom_panel b:nth-of-type(2)::after {
 content: url('https://images2.imgbox.com/2e/0b/pbHyPD78_o.png');
 animation: RotateDisc 140s linear infinite reverse, OpaqueDisc 10s linear infinite alternate;
}

#column_1 .custom_panel b:nth-of-type(3):after {
 content: url('https://images2.imgbox.com/03/06/o0Z76iAK_o.png');
 top: 73px;
 left: 66px;
}

#column_1 .custom_panel b:nth-of-type(4)::after {
 content: url('https://images2.imgbox.com/f7/5b/XiNm847u_o.png');
 top: 642px;
 left: 502px;
 animation: RotateDisc 120s linear infinite;
}

/* Panels */

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

.panel a {
 color: var(--azure-color);
 font-weight: normal;
 text-decoration: none;
 transition: color .5s ease-in-out;
}
.panel a:hover {color: var(--yellw-color);}

.panel {
 background: none;
 color: #FFFFFF;
 font: 12px/1.5 'PT Sans', sans-serif;
 position: absolute;
 overflow: hidden;
 overscroll-behavior-y: contain;
}

#column_3 .panel {
 width: 100%;
 height: 100%;
 top: -100%;
 left: 0;
}
#column_3 .panel:hover {top: 0%;}
#id_about img, #id_comments .postcontent img, #id_signature img {max-width: 100%;}

#id_about, #id_comments, #id_interests {
 text-align: justify;
 padding-right: 10px;
 overflow-y: scroll;
}
#id_friends, #id_signature {text-align: center;}
#id_wishlist, #id_signature {overflow-y: auto;}

/* Headers */

#column_3 .panel::after {
 display: none;
 color: #000;
 font: 30px/0px 'Pacifico', cursive;
 letter-spacing: .01em;
 text-shadow: -1px 0 var(--yellw-color), 1px 0 var(--yellw-color), 0 1px var(--yellw-color), 0 -1px var(--yellw-color), 0 1px 5px var(--azure-color);
 position: fixed;
 top: 629px;
 left: 186px;
 transform: scaleY(1.15);
 pointer-events: none;
}
#column_3 .panel:hover::after, #column_3 #id_about::after {display: block;}

@-moz-document url-prefix() {
 .panel::after {
   paint-order: stroke fill;
   text-shadow: 0 1px 10px var(--azure-color);
   -webkit-text-stroke: 3px var(--yellw-color);
 }
}

#id_about::after {content: 'About Me';}
#id_comments::after {content: 'Comments';}
#id_wishlist::after {content: 'Wish List';}
#id_interests::after {content: 'Interests';}
#id_friends::after {content: 'Friends List';}
#id_footprints::after {content: 'Recent Visitors';}
#id_signature::after {content: 'Signature';}

#column_3 .panel h2 {
 background: linear-gradient(135deg, rgba(255,255,255,.2) 40%, transparent 40%) var(--ornge-color);
 width: 60px;
 height: 30px;
 color: #FFFFFF;
 font: 0/30px 'Pacifico', sans-serif;
 text-transform: capitalize;
 text-align: center;
 position: fixed;
 top: 142px;
 border-radius: 5px;
 box-shadow: 0 0 0 2px var(--brown-color) inset, 1px 2px 8px var(--azure-color);
 transition: all .5s ease-in-out;
}
#column_3 .panel h2::before {font-size: 12px;}
#column_1 h2, #column_2 h2 {display: none;}

#column_3 .panel:hover h2 {
 background-color: var(--azure-color);
 color: var(--ornge-color);
 text-shadow: 0 0 2px #FFFFFF;
 box-shadow: 0 0 0 2px #FFFFFF inset, 0 0 0 4px rgba(0,0,0,.1) inset, 1px 2px 10px var(--azure-color);
}

#id_about h2 {display: none;}
#id_comments h2 {left: 191px;}
#id_wishlist h2 {left: 261px;}
#id_interests h2 {left: 331px;}
#id_friends h2 {left: 401px;}
#id_footprints h2 {left: 471px;}
#id_signature h2 {left: 541px;}

#id_comments h2::before {content: 'Notes';}
#id_wishlist h2::before {content: 'Wishes';}
#id_interests h2::before {content: 'Likes';}
#id_friends h2::before {content: 'Friends';}
#id_footprints h2::before {content: 'Guests';}
#id_signature h2::before {content: 'Mark';}

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

/* Default Panel */

#id_about {top: 0 !important;}
#column_3 .panel:hover ~ #id_about {top: -100% !important;}
#column_3 .panel:hover ~ #id_about::after {display: none !important;}

/* Buttons */

#id_contact, #id_store {bottom: 258px;}
#id_contact *, #id_store * {font-size: 0;}
#id_contact {right: 71px;}
#id_store {right: 35px;}
#id_store h3 + div {display: none;}

#id_contact ul:not(.buttons) li, #id_store, #id_contact ul:not(.buttons) a, #id_store a[href*='userstore'], #id_comments h2 + div, #id_comments h2 ~ p, #id_comments h2 + div a, #id_comments h2 ~ p a {
 background: url('https://images2.imgbox.com/1f/ba/Did5Vp7s_o.png');
 width: 36px;
 height: 36px;
}
#id_contact ul:not(.buttons) li, #id_store, #id_comments h2 + div, #id_comments h2 ~ p {border-radius: 5px;}

#id_contact ul:not(.buttons) li {
 float: left;
 margin: 0 6px 0 0;
 position: relative;
 overflow: hidden;
}
#id_contact ul:not(.buttons) li:nth-of-type(1), #id_contact ul:not(.buttons) li:nth-of-type(1) a {background-position: 0 0;}
#id_contact ul:not(.buttons) li:nth-of-type(2), #id_contact ul:not(.buttons) li:nth-of-type(2) a {background-position: -36px 0;}
#id_contact ul:not(.buttons) li:nth-of-type(3), #id_contact ul:not(.buttons) li:nth-of-type(3) a {background-position: -72px 0;}
#id_store, #id_store a[href*='userstore'] {background-position: -108px 0;}

#id_comments h2 + div, #id_comments h2 + div a {background-position: -180px 0;}
#id_comments h2 ~ p, #id_comments h2 ~ p a {background-position: -144px 0;}

#id_contact ul:not(.buttons) li a, #id_store a[href*='userstore'], #id_comments h2 + div a, #id_comments h2 ~ p a {
 display: block;
 background-position-y: -36px !important;
 opacity: 0;
 transition: opacity .5s ease-in-out;
}
#id_contact ul:not(.buttons) a:hover, #id_store a[href*='userstore']:hover, #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {opacity: 1;}

#id_contact ul:not(.buttons) a, #id_store a[href*='userstore'] {
 position: absolute;
 top: 0;
 left: 0;
}

#id_comments h2 + div, #id_comments h2 ~ p {
 display: block;
 font-size: 0;
 position: fixed;
 left: 643px;
 overflow: hidden;
}
#id_comments h2 + div {top: 300px;}
#id_comments h2 ~ p {top: 348px;}

/* Details */

#id_details {
 width: 120px;
 height: 150px;
 top: 530px;
 right: 35px;
}
#id_details .forum_userstatus {display: none;}

/* Comments */

#id_comments #alert_container {padding: 0;}
#id_comments #alerts_banner {display: none;}
#id_comments .date {font: 85% monospace;}
#id_comments .deletecomment {margin: 0 0 0 10px;}
#id_comments dd {margin-bottom: 15px;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dt {
 line-height: normal;
 margin: 0 0 3px 0;
 padding: 0;
 border-bottom: 1px dotted rgba(255,255,255,.3);
}

#id_comments .dropBox {
 background: var(--brown-color) content-box;
 width: 48px;
 height: 48px;
 margin: 3px 7px 0px 0px;
 border: 1px dotted rgba(255,255,255,.3);
 overflow: hidden;
 transition: background .5s ease-in-out;
}
#id_comments dd:hover .dropBox {background: #FFFFFF;}

#id_comments .dropBox img {
 width: 120px;
 height: 150px;
 margin: -26px 0 0 -46px;
}

/* Wish and Equipped List */

#id_wishlist, #id_equipment {
 display: grid;
 grid-auto-rows: max-content;
 gap: 10px 0;
 justify-items: center;
}
#id_equipment {grid-template-columns: repeat(4, 1fr);}

#id_wishlist {
 grid-template-columns: repeat(7, 1fr);
 padding-right: 5px;
}

#id_wishlist .item, #id_equipment .item {
 background: var(--green-color);
 background-clip: padding-box;
 width: 30px;
 height: 30px;
 padding: 5px;
 border: 1px solid rgba(255,255,255,.5);
 border-radius: 50%;
 outline: 1px dotted rgba(255,255,255,.5);
 outline-offset: -4px;
 transition: all .5s ease-in-out;
}
.premium_sparkle {display: none;}

#id_wishlist .item:hover, #id_equipment .item:hover {
 background: #FFFFFF;
 border-color: var(--azure-color);
 outline-color: var(--azure-color);
}

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

/* Equipped List */

#id_equipment {
 width: 215px;
 height: 146px;
 bottom: 120px;
 right: 290px;
 opacity: .5;
 transition: all .5s ease-in-out;
}

#id_equipment:hover {
 width: 225px;
 right: 285px;
 overflow-y: auto;
 opacity: 1;
}

/* Friends */

#id_friends h2 ~ div {display: none;}
#id_friends h2 ~ p {display: none;}
#id_friends .style1 p {margin-bottom: 15px;}

#id_friends .style1 li {
 background: linear-gradient(135deg, rgba(0,0,0,.1) 30%, transparent 30%) var(--green-color);
 width: 74px;
 height: 84px;
 margin: 0 10px 10px 0;
 padding: 10px;
 position: relative;
 border: 2px solid var(--yellw-color);
 border-radius: 5px;
 box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;
 box-sizing: border-box;
 transition: all .5s ease-in-out;
}
#id_friends .style1 li:nth-of-type(5n) {margin-right: 0;}

#id_friends .style1 li:hover {
 background: #FFFFFF;
 outline-color: var(--brown-color);
}

#id_friends .style1 a {
 display: block;
 width: 100%;
 height: 100%;
 line-height: 2em;
 position: absolute;
 top: 0;
 left: 0;
}

/* Interests */

#id_interests h3 {margin-bottom: 2px;}
#id_interests h3::after {content: ':';}
#id_interests h3:nth-of-type(n+2) {margin-top: 10px;}
#id_interests .interest_tags li:nth-last-of-type(n+2)::after {content: ',';}

/* Media */

.media_panel {
 background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat var(--ornge-color);
 width: 27px;
 height: 28px !important;
 top: 709px;
 right: 252px;
 border-radius: 2px;
 transform: rotate(-3deg);
 transition: filter .5s ease-in-out;
}
.media_panel:hover {filter: brightness(200%) saturate(65%);}

.media_panel iframe {
 position: absolute;
 bottom: 0;
 left: 0;
 opacity: .01;
}