Pro for Mz Epic

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

html, body {background: url('https://images2.imgbox.com/57/df/FbZuWjGC_o.png') fixed center / cover;}
body a {text-decoration: none !important;}

#column_1, #column_2 .panel, #column_2 .panel h2, #column_2 .panel h2::after, #id_contact ul:not(.buttons) li {background: url('https://images2.imgbox.com/f4/aa/AEb1uF40_o.png') border-box;}

/* Fonts */

@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 500;
 src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
}

@font-face {
 font-family: 'Rosario';
 font-style: normal;
 font-weight: 700;
 src: local('Rosario Bold'), local('Rosario-Bold'), url(https://fonts.gstatic.com/s/rosario/v13/xfu00WDhWW_fOEoY0OjY2AHiuQ.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: none !important;
 width: calc(100% - 40px) !important;
 height: 42px !important;
 position: fixed !important;
 top: 10px !important;
 left: 20px !important;
 border: 10px solid transparent;
 border-image: url('https://images2.imgbox.com/1c/73/PA5zORvF_o.png') 10 fill repeat;
 box-sizing: border-box;
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 width: 50% !important;
 font-size: 0 !important;
 box-sizing: border-box;
}
#header_right .spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#header_left img {
 background: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
 background-size: auto 200%;
 width: 0;
 height: 19px;
 padding: 0 42px 0 0;
 margin: 3px -3px 0 0;
 filter: drop-shadow(0 1px #000);
}

#gaia_header a, #header_left .spacer::after {
 color: #FFFFFF !important;
 font: 700 14px/20px 'Rosario', serif !important;
 letter-spacing: .03em;
 text-shadow: 0 1px 1px #000;
}

/* Credits */

#gaia_header #header_left {
 display: grid !important;
 grid-auto-flow: column;
 grid-auto-columns: max-content;
}

#header_left .spacer {
 grid-column: 7 / span 1;
 padding: 0;
}
#header_left .spacer::after {content: 'Credits';}
#header_left .spacer:hover::after {content: 'Credits: Layout by Cassiel Socks and AlthIndor';}

/* Columns */

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

#columns {
 width: 572px;
 height: 510px;
 top: calc((100% - 525px + 40px) / 2);
 left: 20px;
}

#column_1, #column_2 {
 height: 100%;
 top: 0;
}

#column_1 {
 width: 152px;
 left: 0;
}

#column_2 {
 width: 412px;
 right: 0;
 transform: scale(1);
 overflow: visible;
}

/* Scrollbars */

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

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

/* Panels */

.panel, .panel h2 {
 color: #FFFFFF;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.panel {position: absolute;}

.panel a {color: pink;}
.panel a:hover {color: lavender;}

#column_1 .panel {background: none;}
#column_1 .panel h2 {display: none;}

#column_2 .panel {
 background-position: -160px 0px;
 width: 100%;
 height: 100%;
 font: 500 11px/1.5 'Roboto', sans-serif;
 letter-spacing: .03em;
 text-shadow: 0 1px 1px #000;
 top: -100%;
 left: 0;
 border: 16px solid transparent;
 border-width: 60px 16px 16px 16px;
}
#column_2 .panel:hover {top: 0;}

#id_about, #id_wishlist {
 text-align: justify;
 padding-right: 10px;
 overflow: hidden scroll;
}

#id_details, #id_footprints {
 text-align: center;
 overflow: hidden;
}
#id_footprints .item {margin-top: 2px;}

/* Panel Headers */

#column_2 .panel h2 {
 width: 152px;
 height: 42px;
 font-size: 0;
 position: fixed;
 left: -160px;
}

#id_about h2 {
 background-position: -580px -17px !important;
 top: 317px;
}

#id_wishlist h2  {
 background-position: -580px -67px !important;
 top: 367px;
}

#id_details h2 {
 background-position: -580px -117px !important;
 top: 417px;
}

#id_footprints h2 {
 background-position: -580px -167px !important;
 top: 467px;
}

#column_2 .panel h2::after {
 content: '';
 display: none;
 background-position: -580px -303px;
 width: 30px;
 height: 38px;
 position: absolute;
 top: 0;
 right: -18px;
}
#column_2 .panel:hover h2::after {display: block;}

/* Details */

#id_details p {margin-bottom: 5px;}

#id_details img {
 position: fixed;
 top: 56px;
 left: -144px;
 pointer-events: none;
}

#id_details .forum_userstatus, #avatar_menu {
 width: 120px;
 border: 1px solid #D8D8D8;
 box-sizing: border-box;
}

#id_details .forum_userstatus {
 height: 23px;
 margin: 0;
 position: fixed;
 top: 233px;
 left: -144px;
}

.forum_userstatus .statuslinks, .forum_userstatus span {
 height: 100% !important;
 color: #444 !important;
 font: 12px/16px 'Rosario', sans-serif !important;
 text-shadow: none;
}

#avatar_menu a {color: #444;}
#avatar_menu a:hover {background: palegreen;}

#avatar_menu .menu_seperator {
 width: 112px !important;
 margin: 1px 3px !important;
}

/* Contact */

#id_contact {
 background: blue !important width: 129px;
 top: 277px;
 left: 13px;
}

#id_contact ul:not(.buttons) li {
 display: block;
 float: left;
 width: 40px;
 height: 35px;
}

#id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a {
 display: block;
 font-size: 0;
}

#id_contact ul:not(.buttons) li {
 position: relative;
 margin: 0 3px 0 0;
}

#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: -580px -218px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -623px -218px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -666px -218px;}
#id_contact ul:not(.buttons) li:hover {background-position-y: -260px;}

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

/* Wish List */

#id_wishlist {
 display: grid;
 grid-template-columns: repeat(7, 42px);
 grid-auto-rows: 42px;
 grid-gap: 10px calc((100% - (7 * 42px)) / 6);
}

#id_wishlist .item {
 background: rgba(0,0,0,.5);
 width: 30px;
 height: 30px;
 padding: 6px;
 border-radius: 3px;
 outline: 1px dotted #D8D8D8;
 outline-offset: -3px;
}

#id_wishlist .item:hover {
 background: #FFFFFF;
 outline-color: hotpink;
}

/* Media */

.media_panel {
 width: 42px;
 height: 42px !important;
 position: fixed;
 top: 60px;
 right: 20px;
 border: 10px solid transparent;
 border-image: url('https://images2.imgbox.com/1c/73/PA5zORvF_o.png') 10 fill repeat;
 overflow: hidden;
}

.media_panel::after {
 content: url('https://i.imgur.com/MWTKBXK.gif');
 filter: drop-shadow(0 1px #000);
 position: relative;
 top: 5px;
 pointer-events: none;
}

.media_panel iframe {
 position: absolute;
 bottom: -3px;
 left: -12px;
 opacity: .01;
}

.media_panel .buttons {
 position: fixed;
 top: 60px;
 right: 65px;
}

/* Decorations */

#pictures_container, #texts_container {
 width: 1px;
 height: 1px;
 position: absolute;
 top: calc((100% - 525px + 40px) / 2);
 left: 20px;
 overflow: visible;
}