Pro for Demacria

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

html, body {
 background: url('https://i.imgur.com/A6XJB7G.jpg') fixed no-repeat center / cover;
 cursor: url('https://i.imgur.com/ASpeBop.png'), default !important;
}
body a {text-decoration: none !important;}

html {
 --bar-bckgnd: linear-gradient(to bottom, #403A6A, #7058B4, #845090);
 --bar-shadow: 0 2px #FFFFFF20 inset, 0 -2px #00000020 inset, 0 1px 3px #00000040;
 --column-gap: 37px;
 --gold-color: #FFE490;
 --pink-color: #F088A8;
 --pheader-vh: 30px;
}

/* Fonts */

@font-face {
 font-family: 'Open Sans Condensed';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Condensed Bold'), local('OpenSansCondensed-Bold'), url(https://fonts.gstatic.com/s/opensanscondensed/v13/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2) format('woff2');
}

@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');
}

@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/v16/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
}

/* Header */

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

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

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

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 13px !important;
 text-transform: uppercase;
 filter: drop-shadow(0 1px 1px #00000080);
 transition: color .5s ease-in-out;
}
#gaia_header a:hover {color: var(--gold-color) !important;}

/* Columns */

#columns, #column_1, #column_2, #column_3 {
 float: none;
 margin: 0;
 position: absolute;
 box-sizing: border-box;
}

#columns, #column_1 {
 border: 3px solid transparent;
 border-image: linear-gradient(to right, #726CC0, #A03CA0, #F088A8) 1;
}

#columns {
 width: 400px;
 height: 400px;
 top: calc(50% - 200px);
 left: calc(50% - 200px);
 box-shadow: 0 2px 10px #00000080, 0 0 0 4px inset #00000080;
 transition: all .5s .5s ease-in-out;
 transform: translateZ(0);
}

#columns:hover {
 width: 860px;
 left: calc(50% - 430px);
 transition: all .5s ease-in-out;
}

#column_1 {
 background: url('https://images2.imgbox.com/22/a1/05smGXrp_o.png') no-repeat top right / cover, url('https://images2.imgbox.com/22/a1/05smGXrp_o.png') no-repeat top left / cover #40407060;
 width: calc(100% - 8px);
 height: calc(100% - 8px);
 margin: 4px 0 0 4px;
 border-width: 2px;
}

#column_2, #column_2::after {
 background: var(--bar-bckgnd);
 width: 420px;
 height: var(--pheader-vh);
 right: 390px;
 border-radius: 10px;
 box-shadow: var(--bar-shadow);
}

#column_2 {
 top: var(--column-gap);
 overflow: visible;
}

#column_2::after {
 content: '';
 position: fixed;
 bottom: var(--column-gap);
}

#column_3 {
 background: #A4227A40;
 width: 400px;
 height: 260px;
 top: calc(50% - 130px);
 right: 400px;
}

#column_2, #column_3 {
 opacity: 0;
 transition: opacity .5s 0s ease-in-out;
}

#columns:hover #column_2, #columns:hover #column_3 {
 opacity: 1;
 transition: opacity .5s .5s ease-in-out;
}

/* Animated Stars */

@keyframes StarsBlink {
 0% {opacity: 1;}
 50% {opacity: 0;}
 100% {opacity: 1;}
}

#columns::before, #columns::after, #column_1::before, #column_1::after {
 content: url('https://images2.imgbox.com/63/47/6HMZMBcO_o.png');
 position: fixed;
 transform: scale(.5);
 pointer-events: none;
 z-index: 9;
}
#columns:hover::before, #columns:hover::after, #columns:hover #column_1::before, #columns:hover #column_1::after {animation: StarsBlink 1s ease-in-out 1 both;}

#columns::before, #columns::after {top: -4px;}
#column_1::before, #column_1::after {bottom: -4px;}
#columns::before, #column_1::before {left: -4px;}
#columns::after, #column_1::after {right: -4px;}

/* Scrollbars */

.panel {
 scrollbar-width: thin;
 scrollbar-color: #FFFFFFB0 #00000080;
}

#columns ::-webkit-scrollbar {
 background: #00000080;
 width: 8px;
 border-radius: 2px;
}

#columns ::-webkit-scrollbar-thumb {
 background: #FFFFFFB0 content-box;
 border: 1px solid transparent;
 border-radius: 2px;
}

/* Panels */

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

.panel {
 background: none;
 color: #FFFFFF;
 font: 11px/1.6 'Open Sans', sans-serif;
 text-align: justify;
 position: absolute;
 overflow: hidden;
}

.panel img {max-width: 100% !important;}
.dropBox img {max-width: none !important;}

.panel a {
 color: var(--pink-color);
 font-weight: normal;
 transition: color .5s ease-in-out;
}
.panel a:hover {color: var(--gold-color);}

#column_2 .panel {top: 0;}
#column_2 .custom_panel {left: 350px;}
#id_contact {left: 24px;}
#id_store {left: 186px;}
.media_panel {left: 240px;}

#column_3 .panel {
 width: 100%;
 height: 100%;
 padding-right: 10px;
 left: 0;
 border: 10px solid transparent;
 overflow-y: scroll;
}

#column_3 .panel, #column_3 .panel:hover ~ #id_about {
 top: -100%;
 transition: top .5s ease-in-out;
}

#column_3 #id_about, #column_3 .panel:hover {
 top: 0;
 transition: top .5s .5s ease-in-out;
}

/* Panel Headers */

#column_3 h2 {
 background: none;
 width: 84px;
 height: 30px;
 font: 13px/2.3 'Open Sans Condensed', sans-serif;
 text-align: center;
 text-shadow: 0 0 3px #F8F0C080;
 position: fixed;
 top: 327px;
}
#column_2 h2 {display: none;}

#id_about h2 {right: 726px;}
#id_comments h2 {right: 642px;}
#id_wishlist h2 {right: 558px;}
#id_footprints h2 {right: 474px;}
#column_3 .custom_panel h2 {right: 390px;}

#column_2 .custom_panel h2 {
 background: #404040;
 padding: 4px;
 position: fixed;
 top: -18px;
 left: 50%;
 transform: translateX(-50%);
}
#column_2 .custom_panel:hover h2 {display: block;}

#column_2 .custom_panel h2::after {
 content: '';
 display: block;
 width: 0;
 height: 0;
 position: absolute;
 top: 100%;
 left: calc(50% - 11px);
 border: 10px solid transparent;
 border-top-color: #404040;
}

/* Buttons */

#id_comments h2 + div a, #id_contact ul:not(.buttons) li, #id_store, .media_panel, #column_2 .custom_panel {
 width: 30px;
 height: 30px !important;
 filter: drop-shadow(0 0 2px #F8F0C080);
}

#id_comments h2 + div a, #id_contact ul:not(.buttons) li, #id_store, .media_panel {
 background: url('https://i.imgur.com/vcNz49l.png');
 background-size: 30px auto;
}

#id_contact ul:not(.buttons) li {
 float: left;
 margin-right: 24px;
 position: relative;
}
#id_contact ul:not(.buttons) span {display: none;}

#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 0;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: 0 -30px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: 0 -59px;}
.media_panel {background-position: 0 -90px;}

#id_store {
 background-position: 0 -120px;
 font-size: 0;
}
#id_store p {margin: 0;}
#id_store h3, #id_store div {display: none;}

#id_store a[href*='marketplace'], #id_contact a {
 display: block;
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}

#id_comments h2 + div a {
 background-position: 0 -179px;
 font-size: 0;
 position: fixed;
 top: var(--column-gap);
 right: 486px;
}

#column_2 .custom_panel {
 background: url('https://i.imgur.com/6blI5B4.png') -5px -5px;
 background-size: 40px auto;
 overflow: visible;
}

/* Details */

#column_2 #id_details {
 display: flex;
 flex-flow: row wrap;
 align-content: center;
 background: var(--bar-bckgnd);
 text-align: center;
 width: 31px;
 height: 30px;
 position: fixed;
 right: 44px;
 top: auto;
 bottom: var(--column-gap);
 border-radius: 10px;
 box-shadow: var(--bar-shadow);
 transition: all .5s ease-in-out;
}

#id_details .forum_userstatus {display: none;}
#id_details p:nth-of-type(n+2) {margin-bottom: 5px;}
#id_details p {width: 100%;}

#column_2 #id_details:hover {
 width: 300px;
 height: calc(100% - 74px);
}

#id_details :not(h2) {
 opacity: 0;
 transition: all .5s ease-in-out;
}
#column_2 #id_details:hover * {opacity: 1;}

#id_details h2 {
 display: block !important;
 background: url('https://i.imgur.com/vcNz49l.png') 0 -210px;
 background-size: 30px auto;;
 width: 30px;
 height: 30px;
 font-size: 0;
 position: absolute;
 bottom: 0;
 right: 0;
}

/* Comments */

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

#id_comments dt {
 border-bottom: 1px solid #FFFFFF60;
 height: auto;
 line-height: normal;
 margin: 0 0 3px 0;
 padding: 0 0 4px 0;
}
#id_comments .date {font: 85% monospace;}

#id_comments .dropBox {
 width: 48px;
 height: 60px;
 margin: 4px 8px 0px 0px;
 border: 1px solid #FFFFFF60;
 overflow: hidden;
}

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

/* Wish List */

#id_wishlist {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 grid-auto-rows: max-content;
 grid-gap: 10px 10px;
}
.premium_sparkle {display: none;}

#id_wishlist .item {
 background: #F088A840;
 width: 100%;
 height: 40px;
 text-align: center;
 padding: 5px;
 position: relative;
 border-radius: 5px;
 box-sizing: border-box;
 transition: background .5s ease-in-out;
}
#id_wishlist .item:hover {background: #FFFFFF;}

#id_wishlist .owner_checkmark {
 margin: 0;
 top: calc(50% + 4px);
 left: calc(50% - 16px);
}

/* Media */

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