Pro for Woeic

/* Concept by SugaSharra, Code by AlthIndor */

html, body {background: #000;}
body a {text-decoration: none !important;}

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

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

/* Header */

#viewer #gaia_header {
 background: linear-gradient(to bottom, #00000060, transparent);
 height: 40px !important;
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none !important;
 font: 400 0/31px 'Open Sans', sans-serif !important;
 padding: 0 2px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}
#gaia_header .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: 100% auto;
 width: 0;
 height: 18px;
 padding: 0 38px 0 0;
 margin: 0 -1px 0 0;
 filter: invert(50%) drop-shadow(0 1px .1px #F0F0F0);
}

#gaia_header a {
 background: #FFFFFFC0;
 color: #7B7579 !important;
 font-size: 9px !important;
 font-weight: normal !important;
 letter-spacing: .1em !important;
 text-shadow: 0 1px 1px #F0F0F0;
 text-transform: uppercase;
 padding: 1px 4px;
 border: 1px solid #4080FF;
 border-radius: 3px;
 box-shadow: 0 0 0 1px #FFFFFFC0;
 opacity: .5;
 transition: opacity .5s ease-in-out;
}
#gaia_header a:hover {opacity: 1;}

/* Columns */

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

#columns {
 top: 0;
 left: 0;
}

#column_1 {
 background: url('https://i.imgur.com/hpY2ubo.jpg') center / cover;
 height: 100vh;
 transform: translateZ(0);
}

#column_2 {
 width: 50%;
 font-size: 0;
 border: 20px solid transparent;
 box-sizing: border-box;
}

#columns ::-webkit-scrollbar {width: 8px;}
#columns ::-webkit-scrollbar-thumb {border: 1px solid transparent;}
#column_1 ::-webkit-scrollbar {background: #FFFFFF;}
#column_1 ::-webkit-scrollbar-thumb {background: #E0E0E0 content-box;}
#column_2 ::-webkit-scrollbar {background: #404040;}
#column_2 ::-webkit-scrollbar-thumb {background: #808080 content-box;}

/* Panels */

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

#column_1 .panel a {color: #804080;}
#column_2 .panel a {color: #FFFFFF;}

#column_1 .panel {
 color: #202020;
 font-size: 12px;
}
#column_1 .panel:not(.custom_panel) {position: fixed;}

#id_about, .media_panel {
 background: #FFFFFFC0;
 width: 370px;
 bottom: 10%;
 border-radius: 5px;
 opacity: .5;
 transition: opacity .5s ease-in-out;
}
#id_about:hover, .media_panel:hover {opacity: 1;}

#id_about, #id_comments dl {
 padding-right: 10px;
 overscroll-behavior-y: contain;
 scrollbar-width: thin;
}
#id_about img, .postcontent img {max-width: 100% !important;}

#id_footprints {
 max-height: 110px;
 margin-bottom: 20px;
 overflow: hidden auto;
}

/* About Me */

#id_about {
 max-height: 80%;
 height: 520px;
 right: 140px;
 border: 10px solid transparent;
 overflow: hidden auto;
 scrollbar-color: #E0E0E0 #FFFFFF;
}

/* Comments */

#id_comments dl {
 width: 100%;
 max-height: 100px;
 box-sizing: border-box;
 overflow: hidden auto;
 scrollbar-color: #808080 #404040;
}

#id_comments dt {
 height: auto;
 line-height: inherit;
 padding: 0 0 2px 0;
 margin: 0 0 3px 0;
 border-bottom: 1px solid #FFFFFF40;
}

#id_comments dd {margin: 0 0 15px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments .dropBox {
 background: #FFFFFF80;
 width: 48px;
 height: 48px;
 margin: 5px 8px 0 0;
 border: 1px solid #FFFFFF;
 overflow: hidden;
}

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

/* Contact */

#id_contact {
 top: 40px;
 left: 50%;
 transform: translateX(-50%) scale(.8);
 transform-origin: top center;
}
#id_contact span {display: none;}

#id_contact ul:not(.buttons) li {
 background: url('https://i.imgur.com/R9wla40.png');
 float: left;
 width: 40px;
 height: 40px !important;
 margin: 0 5px;
 position: relative;
 border-radius: 5px;
 opacity: .5;
 transition: opacity .5s ease-in-out;
}
#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 -40px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: 0 -80px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: 0 -120px;}
#id_contact ul:not(.buttons) li:hover {opacity: 1;}

#id_contact a {
 display: block;
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}

/* Media */

.media_panel {
 height: 260px !important;
 left: 140px;
 border: 5px solid transparent;
}

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

/* Animation Layer */

.custom_panel, .custom_panel h2 + div {height: 100% !important;}
.custom_panel {pointer-events: none;}
.custom_panel br {display: none;}

.custom_panel i, .custom_panel b, .custom_panel ul, .custom_panel span {
 display: block;
 box-sizing: border-box;
}
.custom_panel i, .custom_panel b, .custom_panel span {position: fixed;}

.custom_panel i {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 transform-origin: 0 0;
}

.custom_panel ul {
 background: url('https://images2.imgbox.com/76/9a/EBPuC4DO_o.png') center no-repeat;
 width: 90px;
 height: 100px;
 margin: 0 !important;
 position: absolute;
}

.custom_panel i:first-of-type {z-index: 1;}
.custom_panel b {z-index: 2;}
#id_about, .media_panel {z-index: 3;}
.custom_panel i:nth-of-type(n+2) {z-index: 4;}
.custom_panel ul, .custom_panel span {z-index: 5;}
#id_contact {z-index: 6;}

/* Sun */

@keyframes SunRaysRotate {
 0% {transform: rotate(0deg) translate(-50%, -50%);}
 100% {transform: rotate(360deg) translate(-50%, -50%);}
}

@keyframes SunRaysFlicker {
 0% {opacity: 0;}
 5.5% {opacity: .8;}
 11% {opacity: 1;}
 16.5% {opacity: .7;}
 22% {opacity: .9;}
 27.5% {opacity: 1;}
 33% {opacity: 0;}
 100% {opacity: 0;}
}

i:nth-of-type(1) {
 background: url('https://images2.imgbox.com/b9/c8/yCu1BUAo_o.png') no-repeat center / contain, radial-gradient(circle at center, #FFFFFF 10px, pink 40px, #FF600020 100px, transparent 150px);
 background-blend-mode: hard-light, normal;
 width: 300px;
 height: 300px;
 animation: SunRaysRotate 300s linear infinite;
 mix-blend-mode: screen;
}

i:nth-of-type(2) {
 background: url('https://images2.imgbox.com/2e/0b/pbHyPD78_o.png') no-repeat center / contain;
 width: 600px;
 height: 600px;
 mix-blend-mode: soft-light;
 animation: SunRaysRotate 120s linear infinite, SunRaysFlicker 30s linear infinite;
}

/* Hexagons */

@keyframes HexagonProceedRight {
 0% {left: -240%;}
 33% {left: 240%;}
 100% {left: 240%;}
}

@keyframes HexagonProceedLeft {
 0% {left: 120%;}
 33% {left: -120%;}
 100% {left: -120%;}
}

@keyframes HexagonsShine {
 0% {opacity: 0;}
 3% {opacity: 1;}
 30% {opacity: 1;}
 33% {opacity: 0;}
 100% {opacity: 0;}
}

.custom_panel b ~ ul {
 position: fixed;
 top: calc(50% - 50px);
 left: calc(50% - 45px);
 transform: scale(.4);
 filter: blur(5px);
 mix-blend-mode: soft-light;
}

.custom_panel ul ul {
 top: 60%;
 left: 120%;
 transform: scale(1.25);
 animation: HexagonProceedLeft 30s linear infinite, HexagonsShine 30s linear infinite;
}

.custom_panel ul:nth-of-type(2), .custom_panel ul:nth-of-type(2) ul {
 top: -120%;
 left: -240%;
 transform: scale(2);
 animation: HexagonProceedRight 30s linear infinite, HexagonsShine 30s linear infinite;
}

/* Clouds */

@keyframes MoveClouds {
 from {background-position-x: 0;}
 to {background-position-x: 2400px;}
}

.custom_panel b {
 width: 100%;
 height: 100%;
}

.custom_panel b:nth-last-of-type(n+2) {
 animation: MoveClouds 100s linear infinite;
 background-size: 2400px auto !important;
}

.custom_panel b:nth-of-type(1) {
 background: url('https://images2.imgbox.com/c4/a2/bmMBWrAY_o.png') bottom left repeat-x;
 animation-duration: 225s;
}

.custom_panel b:nth-of-type(2) {
 background: url('https://images2.imgbox.com/5a/92/T9fJJhvj_o.png') bottom left repeat-x;
 animation-duration: 280s;
 filter: blur(0.5px);
 opacity: .8;
}

.custom_panel b:nth-of-type(3) {
 background: url('https://images2.imgbox.com/f0/87/9ItiEDTn_o.png') bottom left repeat-x;
 animation-duration: 240s;
 filter: blur(1.0px);
}

.custom_panel b:nth-of-type(4) {
 background: url('https://images2.imgbox.com/0c/5d/kzKhwhKd_o.png') top -100px left 0 repeat-x;
 animation-duration: 187s;
 filter: blur(1.0px);
}

.custom_panel b:nth-of-type(5) {
 background: url('https://images2.imgbox.com/99/65/atygqOpk_o.png') 0 45% repeat-x;
 animation-duration: 180s;
 filter: blur(1.5px);
 opacity: .8;
}

@media screen and (max-height: 900px) {

  @keyframes MoveClouds {
   from {background-position-x: 0;}
   to {background-position-x: 1900px;}
  }
  .custom_panel b:nth-last-of-type(n+2) {background-size: 1900px auto !important;}
  .custom_panel b:nth-of-type(4) {background-position: top -50px left 0;}
  .custom_panel b:nth-of-type(5) {background-position: 0 50%;}

}

@keyframes MoveWisps {
 from {background-position-x: 0;}
 to {background-position-x: 4096px;}
}

.custom_panel b:nth-of-type(6) {
 background: url('https://images2.imgbox.com/69/e6/iEX4goFd_o.jpg') bottom left repeat-x;
 animation: MoveWisps 160s linear infinite;
 mix-blend-mode: screen;
}

/* Light Rings */

.custom_panel i:nth-of-type(n+3) {
 border-radius: 50%;
 mix-blend-mode: screen;
 opacity: .5;
}

.custom_panel i:nth-of-type(3) {
 background: #FFFFFF50;
 width: 30vw;
 height: 30vw;
 border: 2px solid #FF8040;
 filter: blur(3px);
 box-shadow: 0 0 5px #FFFFFF inset, 0 0 10px #FF8040, 0 0 20px #FFFFFF, 0 0 100px #FFFFFF;
}

.custom_panel i:nth-of-type(4) {
 width: 94vw;
 height: 94vw;
 border: 5px solid #FF4040;
 box-shadow: 0 0 20px 5px #FFA000, 0 0 30px 20px #FFFFFF, 0 0 40px #00FFFF, 0 0 100px 30px #FFFFFF;
 filter: blur(5px);
}

/* Birds */

@keyframes BirdFlap {
 from {background-position: 0 0;}
 to {background-position: 0 -1190px;}
}

@keyframes BirdsFly {
 0% {top: 100%; left: 100%;}
 15% {top: 0%; left: -500px;}
 100% {top: 0%; left: -500px;}
}

.custom_panel span {
 background: url('https://images2.imgbox.com/3e/20/I25V3Iy0_o.png');
 width: 205px;
 height: 170px;
 top: 0;
 left: 0;
 transform-origin: 0 0;
 animation: BirdFlap .5s steps(7, start) infinite alternate, BirdsFly 60s linear infinite both;
}

.custom_panel span:nth-of-type(1) {
 animation-delay: 0.0s, 0s;
 transform: scale(.3);
}

.custom_panel span:nth-of-type(2) {
 animation-delay: 0.3s, 0s;
 transform: scale(.3) translate(200px, 70px);
}

.custom_panel span:nth-of-type(3) {
 animation-delay: 0.1s, 0s;
 transform: scale(.3) translate(380px, 200px);
}

.custom_panel span:nth-of-type(4) {
 animation-delay: 0.25s, 0s;
 transform: scale(.3) translate(600px, 260px);
}

.custom_panel span:nth-of-type(5) {
 animation-delay: 0.0s, 0s;
 transform: scale(.3) translate(800px, 400px);
}

.custom_panel span:nth-of-type(6) {
 animation-delay: 0.15s, 0s;
 transform: scale(.3) translate(50px, 200px);
}

.custom_panel span:nth-of-type(7) {
 animation-delay: 0.3s, 0s;
 transform: scale(.3) translate(150px, 380px);
}