Pro for Sir Alonne

/* Designed by Visual Light, Coded by AlthIndor */

html, body {
 background: #060620;
 height: 100vh;
 min-height: 780px;
}
html {--green: #048204;}
body {transform: translateZ(0);}
body a {text-decoration: none !important;}

#gaia_header, #panel-details div, #id_store, #id_contact li, #id_details h2, #id_comments h2 + div, #id_comments h2 ~ p {background: url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png');}
#columns {background: url('https://i.imgur.com/Qr05eCL.png') 219px 64px no-repeat, url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png');}
#column_2 .panel {background: url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png') border-box, url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png') border-box;}

::selection {
 background: #000;
 color: var(--green);
}

/* Fonts */

@font-face {
 font-family: 'Press Start 2P';
 font-style: normal;
 font-weight: 400;
 src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}

/* User Picture */

#panel-details .hd {
 background: url('https://i.imgur.com/AQxAWpt.png') center / cover;
 width: 127px;
 height: 122px;
 left: calc(50% - 466px);
 top: 60px;
}
#panel-details h2 {display: none;}

/* Wallpaper */

#panel-details, #columns, #column_1 {height: 660px;}
#panel-details, #columns {top: calc(50% - 330px + 20px);}
#panel-details, #panel-details div {position: absolute;}
#panel-details {width: 100%;}

#panel-details .bd {
 background-position: 0 -1125px;
 width: calc(50% - 480px);
 height: 155px;
}

#panel-details .ft {
 background-position: 0 -1275px;
 width: calc(50% - 200px);
 height: 55px;
 right: 0;
 bottom: 13px;
}

/* Header */

#viewer #gaia_header {
 background-position: bottom left;
 height: 32px !important;
 box-shadow: 0 -1px #00000040 inset, 0 1px 3px #00000060;
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 3px;}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 width: 50% !important;
 font: 0px/32px 'Press Start 2P', sans-serif !important;
 padding: 0 3px !important;
 box-sizing: border-box;
}

#gaia_header img {
 background: #606460;
-webkit-mask: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 / 100% auto;
 mask: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 / 100% auto;
 width: 0 !important;
 height: 0 !important;
 padding: 16px 33px 0 0 !important;
}
#header_left li:nth-of-type(2) a:hover img {background: #C06868;}

#gaia_header a {
 background: #000;
 color: #606060 !important;
 font-size: 7px !important;
 font-weight: normal;
 text-transform: uppercase;
 padding: 6px 5px 5px 5px;
 border-radius: 3px;
 box-shadow: 1px 1px #FFFFFF40, -1px -1px #00000040;
}

#gaia_header a:hover {
 background: #281010;
 color: #C06868 !important;
}

/* Columns */

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

#columns {
 left: calc(50% - 506px);
 transform: translateZ(0);
}

#column_2 {
 width: 670px;
 height: 285px;
 top: 181px;
 left: 31px;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
 background: #000000;
 width: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: var(--green);}

#columns * {
 scrollbar-color: var(--green) #000000;
 scrollbar-width: thin;
}

/* Panels */

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

.panel {
 position: absolute;
 overflow: hidden;
}
.panel:not(#id_details) {text-align: justify;}
.panel img {max-width: 100% !important;}
.panel a {color: #048204;}
.panel a:hover {color: inherit;}

#id_contact, .media_panel {background: none;}
#column_1 h2 {display: none;}

#column_2 .panel {
 background-position: 0 -795px, right -675px;
 width: 100%;
 height: 100%;
 font: 7px/2.4 'Press Start 2P', sans-serif;
 top: -110%;
 left: 0;
 border: 20px solid transparent;
 border-width: 40px 20px 20px 20px;
}
#column_2 .panel:hover {top: 0;}

#column_2 .panel:not(#id_details) {
 padding-right: 10px;
 overflow-y: scroll;
}

#column_2 #id_about {background-position-y: -795px, -705px;}
#column_2 .custom_panel {background-position-y: -795px, -735px;}
#column_2 #id_comments {background-position-y: -795px, -765px;}
#column_2 #id_footprints {background-position-y: -795px, -795px;}

/* Panel Headers */

.panel h2 {
 font-size: 0;
 position: fixed;
 opacity: .01;
}
.panel:hover h2 {opacity: 1;}

.panel:not(#id_details) h2 {
 background: none;
 height: 90px;
 left: 721px;
 box-shadow: 0 0 1px 2px #800040, 0 0 1px 2px #800040 inset;
}

#id_about h2, #id_footprints h2, .custom_panel h2 {width: 130px;}
#id_about h2 {top: 281px;}
.custom_panel h2 {top: 371px;}
#id_footprints h2 {top: 461px;}

#id_comments h2 {
 width: 260px;
 top: 191px;
}

.panel h2::after {
 content: '';
 display: none;
}
.panel:hover h2::after {display: block;}

.panel:not(#id_details) h2::after {
 width: 40px;
 height: 360px;
 position: fixed;
 top: 190px;
 right: 288px;
}

#id_details h2::after {
 width: 145px;
 height: 200px;
}

/* Details */

#id_details p {margin: 14px 0;}
#id_details p:nth-of-type(n+2), .forum_userstatus .pushBox {display: none;}
#id_details .forum_userstatus, #id_details .forum_userstatus span {padding: 0;}

.forum_userstatus .statuslinks, .forum_userstatus span {
 background: none !important;
 width: 100% !important;
 height: 100% !important;
}

#id_details .forum_userstatus {
 background: #0E0000;
 width: 120px;
 height: 30px;
 border: 1px solid #808080;
 box-shadow: 0 0 0 1px #606060 inset;
 box-sizing: border-box !important;
}

#id_details .forum_userstatus span {
 color: var(--green);
 font: bold 14px/28px sans-serif;
 text-align: center;
 text-shadow: 2px 2px 1px #18421C;
 text-indent: -2px;
}

/* Comments */

#id_comments #alerts_banner, #id_comments .dropBox {display: none;}
#id_comments dd {margin: 0 0 20px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dl {
 clear: both;
 margin-top: 45px;
}

#id_comments dt {
 height: auto;
 line-height: normal;
 padding: 0 0 5px 0;
 border: none;
}
#id_comments .date {color: #808080;}

/* Comments Buttons */

#id_comments h2 + div, #id_comments h2 ~ p {
 background-position: bottom left;
 width: calc(50% - 5px);
 height: 26px;
 line-height: 26px;
 text-align: center;
 position: relative;
 box-shadow: 1px 1px #FFFFFF40 inset, -1px -1px #00000040 inset, 0 1px 3px #00000080;
}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
 width: 100%;
 height: 100%;
 color: #22281C;
 font-weight: normal;
 text-shadow: 1px 1px #FFFFFF40, -1px -1px #00000020, 0 0 5px #00800080;
 text-transform: uppercase;
 position: absolute;
 top: 0;
 left: 0;
}

#id_comments h2 + div:hover, #id_comments h2 ~ p:hover {filter: brightness(125%);}
#id_comments h2 + div:hover a, #id_comments h2 ~ p:hover a {color: #E0E0E0;}

#id_comments h2 + div a {font-size: 0;}
#id_comments h2 + div a::after {content: 'Leave New Comment'; font-size: 7px;}

/* Contact and Store */

#id_contact, #id_store, #id_details h2 {
 top: 10px;
 opacity: .01;
}
#id_contact:hover, #id_store:hover, #id_details:hover h2 {opacity: 1;}
#id_contact {left: 526px;}
#id_details h2 {left: 371px;}

#id_contact li, #id_store, #id_details h2 {
 background-position-y: -1090px;
 width: 145px;
 height: 31px;
}
#id_contact li:nth-of-type(1) {background-position-x: -155px;}
#id_contact li:nth-of-type(n+2) {display: none;}
#id_contact span {display: none;}

#id_store {
 background-position-x: -310px;
 left: 681px;
}
#id_store *:nth-last-child(n+2) {display: none;}

#id_contact li a, #id_store a {
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}

/* Media */

.media_panel {
 width: 640px;
 height: 140px !important;
 top: 491px;
 left: 46px;
}

.media_panel iframe {
 width: 100%;
 height: 100%;
}

/* Enter Button */

#texts_container .spoiler-wrapper, #texts_container .spoiler-title, #texts_container .spoiler-control-show, #texts_container .spoiler {height: 100%;}
#texts_container .spoiler-wrapper, #texts_container .spoiler-title, #texts_container .spoiler-control-show {width: 100%;}
#texts_container .spoiler-title, #texts_container .spoiler-control-show, #texts_container .spoiler {position: absolute;}
#texts_container .spoiler-wrapper, #texts_container .spoiler-control-show {border: none;}
#texts_container .spoiler-control-hide, #texts_container .spoiler-control span {display: none !important;}

#texts_container .spoiler-wrapper {
 background: #000;
 padding: 0;
 position: fixed;
 top: 0;
 left: 0;
 perspective: 1000px;
 overflow: hidden;
}
#texts_container .spoiler-wrapper * {transform-style: preserve-3d;}

#texts_container .spoiler-title, #texts_container .spoiler {
 width: 460px;
 height: 480px;
 top: calc(50% - 240px);
 left: calc(50% - 230px);
}
#texts_container .spoiler-title {z-index: 9;}

#texts_container .spoiler-control-show {
 background: none;
 outline: none;
}

#texts_container .spoiler {
 display: block !important;
 opacity: .5;
 transition: opacity 1s ease-in-out;
}
#texts_container .spoiler-title:hover + .spoiler, #texts_container .spoiler-revealed .spoiler {opacity: 1;}

@keyframes HideDoor {
 0% {opacity: 1;}
 99.99% {height: 100%;}
 100% {opacity: 0; height: 0;}
}

@keyframes ZoomDoor {
 from {transform: translateZ(0);}
 to {transform: translateZ(500px);}
}

@keyframes OpenDoor {
 from {transform: rotateY(0deg);}
 to {transform: rotateY(80deg);}
}

@keyframes RotateHandle {
 from {transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-30deg) rotateX(90deg);}
 to {transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-70deg) rotateX(90deg);}
}

@keyframes MoveShadow {
 from {transform: translateX(0) rotate(35deg);}
 to {transform: translateX(4px) rotate(-50deg);}
}

#texts_container .spoiler-revealed span[style*='color']:nth-of-type(1) {animation: OpenDoor 5s 1s cubic-bezier(.2, 1.6, .5, -.4) 1 both;}
#texts_container .spoiler-revealed span[style*='color']:nth-of-type(1) b ~ span {animation: RotateHandle .5s 0s ease-in-out 1 both;}
#texts_container .spoiler-revealed span[style*='color']:nth-of-type(1) b:nth-of-type(4) {animation: MoveShadow 5s 1s cubic-bezier(.2, 1.6, .5, -.4) 1 both;}
#texts_container .spoiler-revealed .spoiler {animation: ZoomDoor 3s 6s ease-in-out 1 both;}
#texts_container .spoiler-revealed {animation: HideDoor 3s 6s ease-in 1 both;}

/* Build a Door */

#texts_container .spoiler * {
 display: block;
 position: absolute;
}
#texts_container .spoiler br {display: none;}

#texts_container .spoiler span[style*='color'] {
 width: 230px;
 height: 100%;
 transform-origin: left center -10px;
}

#texts_container .spoiler b ~ span, #texts_container .spoiler span ~ i {transform-origin: center top -60px;}
#texts_container .spoiler b, #texts_container .spoiler span ~ i, #texts_container .spoiler span span {background: url(https://i.imgur.com/65utERE.jpg);}

#texts_container .spoiler b {
 background-size: auto 100%;
 height: 100%;
 box-shadow: 0 0 4px #000 inset;
}
#texts_container .spoiler b:nth-of-type(1) {width: 100%;}

#texts_container .spoiler b:nth-of-type(2), #texts_container .spoiler b:nth-of-type(3) {
 width: 10px;
 transform-origin: left center;
 filter: brightness(50%);
}
#texts_container .spoiler b:nth-of-type(2) {transform: rotateY(90deg);}
#texts_container .spoiler b:nth-of-type(3) {transform: translateX(230px) rotateY(90deg);}

#texts_container .spoiler b:nth-of-type(4) {
 background: #000000C0;
 width: 16px;
 height: 25px;
 top: 239px;
 border-radius: 8px;
 box-shadow: 0 -5px 5px #FFE0A0A0;
 filter: blur(1px);
 transform-origin: center 8px;
}

#texts_container .spoiler b ~ span {
 width: 32px;
 height: 0px;
 top: 244px;
}

#texts_container .spoiler span ~ i:nth-of-type(1) {background-position: -472px 0;}
#texts_container .spoiler span ~ i:nth-of-type(2) {background-position: -526px 0; transform: rotateY(30deg);}
#texts_container .spoiler span ~ i:nth-of-type(3) {background-position: -580px 0; transform: rotateY(60deg);}
#texts_container .spoiler span ~ i:nth-of-type(4) {background-position: -634px 0; transform: rotateY(90deg);}
#texts_container .spoiler span ~ i:nth-of-type(5) {background-position: -688px 0; transform: rotateY(120deg);}
#texts_container .spoiler span ~ i:nth-of-type(6) {background-position: -742px 0; transform: rotateY(150deg);}
#texts_container .spoiler span ~ i:nth-of-type(7) {background-position: -796px 0; transform: rotateY(180deg);}
#texts_container .spoiler span ~ i:nth-of-type(8) {background-position: -850px 0; transform: rotateY(210deg);}
#texts_container .spoiler span ~ i:nth-of-type(9) {background-position: -904px 0; transform: rotateY(240deg);}
#texts_container .spoiler span ~ i:nth-of-type(10) {background-position: -958px 0; transform: rotateY(270deg);}
#texts_container .spoiler span ~ i:nth-of-type(11) {background-position: -1012px 0; transform: rotateY(300deg);}
#texts_container .spoiler span ~ i:nth-of-type(12) {background-position: -1066px 0; transform: rotateY(330deg);}

#texts_container .spoiler i {
 background: inherit;
 width: 32px;
 height: 60px;
 top: 100%;
}

#texts_container .spoiler i i {
 background-position-y: -60px;
 width: 46px;
 height: 27px;
 left: -7px;
 transform: rotateX(90deg);
 transform-origin: center top;
}

#texts_container .spoiler i i i, #texts_container .spoiler i i i i, #texts_container .spoiler i i i i i i, #texts_container .spoiler i i i i i i i {height: 8px;}
#texts_container .spoiler i i i, #texts_container .spoiler i i i i {left: -2px;}
#texts_container .spoiler i i i , #texts_container .spoiler i i i i i i {transform: rotateX(-22.5deg);}
#texts_container .spoiler i i i i i i {background-position-y: -253px;}

#texts_container .spoiler i i i {
 background-position-y: -87px;
 width: 50px;
}

#texts_container .spoiler i i i i {
 background-position-y: -95px;
 width: 54px;
}

#texts_container .spoiler i i i i i {
 background-position-y: -103px;
 height: 150px;
 left: 0;
 transform: rotateX(-45deg);
}

#texts_container .spoiler i i i i i i i {
 background-position-y: -261px;
 width: 52px;
 left: 1px;
}

#texts_container .spoiler b ~ span span {
 background-position: -480px -456px;
 width: 184px;
 height: 184px;
 left: calc(50% - 92px);
 transform: translateZ(-60px) translateY(140px) rotateX(90deg);
 clip-path: polygon(37% 0%, 63% 0%, 87% 14%, 100% 37%, 100% 63%, 87% 87%, 63% 100%, 37% 100%, 14% 87%, 0% 63%, 0% 37%, 13% 13%);
}

/* Double Doors */

#texts_container .spoiler span[style*='color']:nth-of-type(1) {left: 0;}
#texts_container .spoiler span[style*='color']:nth-of-type(2) {left: 230px;}
#texts_container .spoiler span[style*='color']:nth-of-type(2) b:nth-of-type(1) {transform: rotateY(180deg);}

#texts_container .spoiler span[style*='color']:nth-of-type(1) b:nth-of-type(4) {
 right: 12px;
 transform: rotate(35deg);
}

#texts_container .spoiler span[style*='color']:nth-of-type(2) b:nth-of-type(4) {
 left: 12px;
 transform: rotate(-35deg);
}

#texts_container .spoiler span[style*='color']:nth-of-type(1) b ~ span {
 right: 1px;
 transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-30deg) rotateX(90deg);
}

#texts_container .spoiler span[style*='color']:nth-of-type(2) b ~ span {
 left: 1px;
 transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-90deg) rotateX(90deg);
}