Christmas Pro for BzztBzzt

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

:root {
 --blue-dark: #505A78;
 --blue-lite: #CAD8E0;
 --tree-lite: #7CA084;
}

::selection {
 background: var(--blue-dark);
 color: #FFFFFF;
}

html, body {
 background: url('https://i.imgur.com/l7NqOag.jpg') no-repeat top center / cover;
 min-height: 100vh;
 height: 1000px;
}
body {position: relative;}
body a {text-decoration: none !important;}

#columns, #id_contact li, #id_contact li a, #id_about, #id_wishlist, #column_2 .custom_panel .spoiler-control, #column_2 .custom_panel .spoiler-control span {background: url('https://images2.imgbox.com/61/e1/sys7GhUS_o.png');}
#id_contact li, #id_contact li a, #column_2 .custom_panel .spoiler-control, #column_2 .custom_panel .spoiler-control span {background-position-y: bottom;}
#columns {background-size: 1530px auto;}

/* Fonts */

@font-face {
 font-family: 'Cookie';
 font-style: normal;
 font-weight: 400;
 src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v11/syky-y18lb0tSbf9kgqS.woff2) format('woff2');
}

@font-face {
 font-family: 'Lora';
 font-style: normal;
 font-weight: 400;
 src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v14/0QIvMX1D_JOuMwr7Iw.woff2) format('woff2');
}

@font-face {
 font-family: 'Lora';
 font-style: normal;
 font-weight: 700;
 src: local('Lora Bold'), local('Lora-Bold'), url(https://fonts.gstatic.com/s/lora/v14/0QIgMX1D_JOuO7HeNtxumg.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: var(--blue-dark) !important;
 height: 30px !important;
 box-shadow: 0 1px 1px #00000040;
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none !important;
 font: 400 0/30px 'Cookie', cursive !important;
 padding: 0 8px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}
#gaia_header li.spacer {display: none !important;}

#header_left img {
 background: #FFFFFF;
 width: 0 !important;
 padding: 0 34px 0 0;
 mask: url('https://i.imgur.com/cGGVY2x.png') 0 1px no-repeat;
 transition: background .5s ease-in-out;
}
#header_left img {-webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 1px no-repeat;}
#header_left li:nth-of-type(2) a:hover img {background: var(--blue-lite);}

#gaia_header a, #header_left li::after, #header_right li::before {
 color: #FFFFFF !important;
 font-size: 16px !important;
}

#gaia_header a {
 font-weight: normal !important;
 transition: color .5s ease-in-out;
}
#gaia_header a:hover {color: var(--blue-lite) !important;}

#header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
 content: '●';
 margin: 0 5px;
 position: relative;
 top: -1px;
 opacity: .75;
}

/* Columns */

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

#columns {
 width: 1200px;
 height: 930px;
 top: 70px;
 left: calc(50% - 600px);
 transform: translateZ(0);
}

#column_1 {
 width: 100%;
 height: 100%;
}

#column_2 {
 width: 426px;
 height: 344px;
 top: 235px;
 left: calc(50% - 203px);
}

#column_3 {
 width: 1px;
 height: 1px;
 overflow: visible;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
 background: #00000010;
 width: 8px;
 border-radius: 4px;
}

#columns ::-webkit-scrollbar-thumb {
 background: var(--tree-lite) content-box;
 border: 1px solid transparent;
 border-radius: 4px;
}

.panel {
 scrollbar-color: var(--tree-lite) #00000010;
 scrollbar-width: thin;
}

/* Panels */

.panel {
 background: none;
 text-align: center;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 overflow: hidden;
}
.panel h2 {display: none;}
.panel img {max-width: 100% !important;}

#column_1 .panel, #column_3 .panel {position: absolute;}

.panel a {
 color: var(--blue-dark);
 transition: color .5s ease-in-out;
}
.panel a:hover {color: var(--tree-lite);}

#column_2 .panel {
 width: 100%;
 color: #404040;
 font: 11px/1.6 'Lora', serif;
 overflow-y: scroll;
}

#id_about, #id_wishlist {
 height: 100%;
 background-origin: border-box;
 border: 13px solid transparent;
 border-width: 60px 13px 17px 13px;
}
#id_wishlist {background-position: right -343px;}

#id_about {
 background-position: top right;
 padding-right: 10px;
}

/* Wish List Button */

#column_2 .custom_panel {margin-top: -344px;}
#column_2 .custom_panel .spoiler {height: 344px;}
#column_2 .custom_panel h2 {display: none;}

#column_2 .custom_panel .spoiler-title {
 width: 74px;
 height: 74px;
 position: fixed;
 top: 175px;
 left: 428px;
 border-radius: 50%;
 z-index: 9;
}

#column_2 .custom_panel * {
 padding: 0;
 border: none;
 outline: none;
}

#column_2 .custom_panel .spoiler-control, #column_2 .custom_panel span {
 width: 100%;
 height: 100%;
}

#column_2 .custom_panel span {
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}

#column_2 .custom_panel .spoiler-control-show {background-position-x: 0;}
#column_2 .custom_panel .spoiler-control-show span {background-position-x: -370px;}

#column_2 .custom_panel .spoiler-control-hide {background-position-x: -74px;}
#column_2 .custom_panel .spoiler-control-hide span {background-position-x: -444px;}

#column_2 .custom_panel span {
 filter: drop-shadow(0 0 10px var(--blue-lite));
 opacity: 0;
 transition: opacity .5s ease-in-out;
}
#column_2 .custom_panel:hover span {opacity: 1;}

/* Contact */

#id_contact {
 width: 254px;
 height: 110px;
 top: 138px;
 left: 518px;
}
#id_contact span {display: none;}

#id_contact li, #id_contact li a {
 width: 74px;
 height: 74px;
 position: absolute;
}
#id_contact li:nth-of-type(2) {left: 90px;}
#id_contact li:nth-of-type(3) {bottom: 0; right: 0;}

#id_contact li:nth-of-type(1) {background-position-x: -148px;}
#id_contact li:nth-of-type(2) {background-position-x: -222px;}
#id_contact li:nth-of-type(3) {background-position-x: -296px;}

#id_contact a {
 display: block;
 font-size: 0;
 top: 0;
 left: 0;
 border-radius: 50%;
 filter: drop-shadow(0 0 10px var(--blue-lite));
 opacity: 0;
 transition: opacity .5s ease-in-out;
}
#id_contact a:hover {opacity: 1;}

#id_contact li:nth-of-type(1) a {background-position-x: -518px;}
#id_contact li:nth-of-type(2) a {background-position-x: -592px;}
#id_contact li:nth-of-type(3) a {background-position-x: -666px;}

/* Wish List */

#id_wishlist .owner_checkmark {
 margin: 0;
 bottom: 5px;
 right: 5px;
 filter: brightness(75%) sepia(100%) drop-shadow(-1px 0 .5px #FFFFFF);
}
#id_wishlist .premium_sparkle {display: none;}

#id_wishlist .item {
 background: var(--blue-lite);
 width: 30px;
 height: 30px;
 padding: 5px;
 margin: 0 12px 10px 0;
 position: relative;
 border: 2px solid transparent;
 border-radius: 50%;
 box-shadow: 0 0 0 1px inset #FFFFFF;
 outline: 1px dotted var(--tree-lite);
 outline-offset: -5px;
 transition: all .5s ease-in-out;
}

#id_wishlist .item:hover {
 background: var(--tree-lite);
 box-shadow: 0 0 0 1px inset var(--blue-lite);
 outline-color: var(--blue-dark);
}

/* Media */

.media_panel {
 background: url('https://i.imgur.com/gqTTTvw.png') -27px -10px;
 width: 60px;
 height: 24px !important;
 top: 595px;
 left: 469px;
 filter: invert(50%) sepia(100%) hue-rotate(-10deg) drop-shadow(-1px 1px #FFF);
}

.media_panel iframe {
 width: 400px;
 height: 300px;
 position: absolute;
 bottom: -6px;
 left: -27px;
 opacity: .01;
}

/* Snow Animation */

@keyframes SnowX {
 from {background-position-x: 0;}
 to {background-position-x: 1500px;}
}

@keyframes SnowY {
 from {background-position-y: 0;}
 to {background-position-y: 1500px;}
}

#panel-details, #panel-details *, body::after {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

#panel-details *, body::after {
 animation: SnowX 60s linear infinite, SnowY 30s linear infinite;
 filter: blur(.5px);
}
#panel-details h2, #panel-details .bd, body::after {animation-direction: reverse, normal;}

#panel-details h2 {
 background: url('https://i.imgur.com/JsxDJBy.png') 0 0 / 150px 150px;
 animation-duration: 240s, 60s;
}

#panel-details .hd {
 background: url('https://i.imgur.com/hiymLjO.png') 0 0 / 300px 300px;
 animation-duration: 180s, 50s;
}

#panel-details .bd {
 background: url('https://i.imgur.com/MRo92zN.png') 0 0 / 300px 300px;
 animation-duration: 150s, 40s;
}

#panel-details .ft {
 background: url('https://i.imgur.com/yeYZHj7.png') 0 0 / 500px 500px;
 animation-duration: 120s, 30s;
}

body::after {
 content: '';
 background: url('https://i.imgur.com/S93KRrp.png') 0 0 / 750px 750px;
 animation-duration: 90s, 20s;
 mix-blend-mode: soft-light;
 pointer-events: none;
}

/* Lights Animation */

@keyframes BlinkLights {
 0% {opacity: 0;}
 45% {opacity: 0;}
 55% {opacity: 1;}
 100% {opacity: 1;}
}

#column_1 .custom_panel, #column_1 .custom_panel div {
 width: 100%;
 height: 100%;
}
#column_1 .clear, #column_1 br {display: none;}

#column_1 i, #column_1 b {
 display: block;
 background: radial-gradient(circle at center, #FFFFFF 10%, #FFB00040 40%, transparent 70%);
 width: 80px;
 height: 80px;
 position: absolute;
 border-radius: 50%;
 mix-blend-mode: overlay;
 animation: BlinkLights 2s linear infinite alternate;
}
#column_1 b {animation-delay: -2s;}

#column_1 b:nth-of-type(1) {top: 502px; left: 268px;}
#column_1 b:nth-of-type(2) {top: 279px; left: 270px;}
#column_1 b:nth-of-type(3) {top: 88px; left: 632px;}
#column_1 b:nth-of-type(4) {top: 185px; left: 796px;}
#column_1 b:nth-of-type(5) {top: 329px; left: 887px;}
#column_1 b:nth-of-type(6) {top: 529px; left: 870px;}
#column_1 i:nth-of-type(1) {top: 445px; left: 212px;}
#column_1 i:nth-of-type(2) {top: 323px; left: 216px;}
#column_1 i:nth-of-type(3) {top: 206px; left: 269px;}
#column_1 i:nth-of-type(4) {top: 113px; left: 361px;}
#column_1 i:nth-of-type(5) {top: 65px; left: 465px;}
#column_1 i:nth-of-type(6) {top: 43px; left: 567px;}
#column_1 i:nth-of-type(7) {top: 58px; left: 678px;}
#column_1 i:nth-of-type(8) {top: 113px; left: 730px;}
#column_1 i:nth-of-type(9) {top: 177px; left: 832px;}
#column_1 i:nth-of-type(10) {top: 278px; left: 905px;}
#column_1 i:nth-of-type(11) {top: 432px; left: 912px;}