Pro for TechnicalAo

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

html, body {background: url('https://i.pinimg.com/originals/e9/30/05/e93005f53e3d83298b6d7d1299f03a35.jpg') fixed top center / cover;}
#columns, #column_1, #columns::before, .custom_panel .spoiler-control {background: url('https://images2.imgbox.com/20/d1/aoZp21wA_o.png');}

body a {
 text-decoration: none !important;
 transition: all .5s ease-in-out;
}

/* Fonts */

@font-face {
 font-family: 'Balsamiq Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Balsamiq Sans Regular'), local('BalsamiqSans-Regular'), url(https://fonts.gstatic.com/s/balsamiqsans/v1/P5sEzZiAbNrN8SB3lQQX7Pncwd4XIA.woff2) format('woff2');
}

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/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 */

#gaia_header {
 background: none;
 filter: drop-shadow(0 0 5px #FFFFFF);
}
#gaia_header li.spacer {display: none !important;}

#gaia_header #header_left, #gaia_header #header_right {
 width: 500px !important;
 height: 30px !important;
 font: 400 0px/26px 'Balsamiq Sans', sans-serif !important;
 border-bottom: 2px solid #F8F0C0;
 box-sizing: border-box;
 overflow: hidden;
}

#gaia_header #header_left {
 background: linear-gradient(-60deg, #F8F0C0 17px, #C888E8 18px) border-box;
 clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
}

#gaia_header #header_right {
 background: linear-gradient(60deg, #F8F0C0 17px, #C888E8 18px) border-box;
 clip-path: polygon(0 0, 100% 0, 100% 100%, 17px 100%);
 float: right;
}

#header_left img {
 background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
 width: 0 !important;
 padding: 0 34px 0 0;
 filter: invert(100%);
}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 12px !important;
 font-weight: 400 !important;
 padding: 10px 5px;
}
#gaia_header a:hover {background: #FFFFFF40;}

/* Columns */

#columns, #columns .column {
 float: none;
 margin: 0;
 position: absolute;
}

#columns, #column_1 {
 width: 800px;
 height: 890px;
 top: 0;
}
#column_1 {background-position: -800px 0;}

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

#column_2, #column_3 {
 width: 209px;
 height: 369px;
 top: 476px;
 border: 10px solid transparent;
 box-sizing: border-box;
}
#column_2 {left: 173px;}
#column_3 {left: 417px;}

#columns ::-webkit-scrollbar {width: 0;}
#columns * {scrollbar-width: none;}

/* Panels */

.panel {
 background: none;
 color: #404040;
 font: 10px/1.6 'Open Sans', sans-serif;
 text-align: center;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 overflow: hidden;
}

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

.panel a {color: #FFFFFF;}
.panel a:hover {color: inherit;}

#id_about, #id_footprints, #id_comments, #id_wishlist {
 width: 100%;
 height: 100%;
 overflow-y: scroll;
}

/* Comments */

#id_comments #alerts_banner, #id_comments .date a, #id_comments .dropBox {display: none;}
#id_comments #alert_container, #id_comments dt {padding: 0;}
#id_comments #alert_container {float: none;}

#id_comments dt {
 height: auto;
 line-height: 1.8;
 text-align: inherit;
 margin: 0 0 4px 0;
 border-bottom: 1px dotted pink;
}
#id_comments .username {float: none;}

#id_comments .date {
 display: inline-block;
 color: #FFFFFF;
 font: 9px monospace;
 text-indent: -1em;
 text-transform: uppercase;
 overflow: hidden;
}

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

#id_comments .deletecomment {
 float: none;
 margin: 0;
 grid-row: 2 / span 1;
}
#id_comments .deletecomment br {display: none;}

#id_comments .deletecomment a:first-of-type::after {
 content: '-';
 margin: 0 3px 0 5px;
}

/* Wish List */

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

#id_wishlist .item {
 background: #FFFFFF40;
 width: 100%;
 height: 30px;
 padding: 5px 0;
 position: relative;
 border-radius: 5px;
}
#id_wishlist .item:hover {background: #FFFFFF;}

.owner_checkmark {
 margin: 0;
 bottom: 5px;
 left: 5px;
}

/* Visitors */

#id_footprints .item {
 display: flex;
 flex-flow: row-reverse wrap;
 justify-content: center;
}
#id_footprints .item:nth-of-type(n+2) {margin-top: 5px;}

#id_footprints .item a {
 display: block;
 width: 100%;
}

#id_footprints .item::after {
 content: 'Visited ';
 white-space: pre;
}

/* Media */

.media_panel {
 background: url('https://i.imgur.com/gqTTTvw.png') -21px -6px;
 width: 70px;
 height: 32px !important;
 top: 90px;
 left: 534px;
 transform: rotate(20deg);
 filter: drop-shadow(0 1px .5px rebeccapurple);
}

.media_panel iframe {
 width: 400px;
 height: 300px;
 position: absolute;
 bottom: -2px;
 left: -21px;
 opacity: .001;
}

/* Swap Buttons */

.custom_panel .spoiler-wrapper, .custom_panel .spoiler-control {border: none;}
.custom_panel .spoiler-wrapper {padding: 0;}
.custom_panel .spoiler-revealed .spoiler {height: 349px;}
.custom_panel {margin-top: -349px;}

.custom_panel .spoiler-title {
 display: flex;
 flex-flow: row-reverse nowrap;
 justify-content: space-between;
 width: 150px;
 position: fixed;
 top: 400px;
}

.custom_panel .spoiler-control {
 display: flex !important;
 justify-content: center;
 align-items: center;
 background-position-y: bottom;
 width: 68px;
 height: 65px;
 outline: none;
 opacity: .5;
}

#column_2 .custom_panel .spoiler-title {left: calc((209px - 150px) / 2 + 173px);}
#column_3 .custom_panel .spoiler-title {left: calc((209px - 150px) / 2 + 417px);}

.custom_panel .spoiler-control span {
 display: block;
 background: url('https://i.imgur.com/vcNz49l.png') no-repeat center / 100% auto;
 width: 40px;
 height: 40px;
 font-size: 0;
 margin-top: 6px;
}

#column_2 .custom_panel .spoiler-control {background-position-x: -800px;}
#column_2 .custom_panel .spoiler-control-show span {background-position-y: -440px;}
#column_2 .custom_panel .spoiler-control-hide span {background-position-y: -281px;}

#column_3 .custom_panel .spoiler-control {background-position-x: -871px;}
#column_3 .custom_panel .spoiler-control-show span {background-position-y: -361px;}
#column_3 .custom_panel .spoiler-control-hide span {background-position-y: -239px;}

.custom_panel .spoiler-hidden .spoiler-control-hide, .custom_panel .spoiler-revealed .spoiler-control-show, .custom_panel .spoiler-control:hover {opacity: 1;}
.custom_panel .spoiler-hidden .spoiler-control-hide, .custom_panel .spoiler-revealed .spoiler-control-show {pointer-events: none;}

/* Cow */

@keyframes FlipCow {
 0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 68%, 72%, 76%, 80%, 84%, 88%, 92%, 96%, 100% {transform: rotate(10deg);}
 2%, 6%, 10%, 14%, 18%, 22%, 26%, 30%, 66%, 70%, 74%, 78%, 82%, 86%, 90%, 94%, 98% {transform: rotate(-10deg);}
}

@keyframes AbductCow {
 0% {bottom: 30px;}
 5% {bottom: 90px;}
 10% {bottom: 150px;}
 15% {bottom: 540px;}
 40% {bottom: 540px;}
 50% {bottom: 30px;}
 100% {bottom: 30px;}
}

#columns::before {
 content: '';
 background-position: bottom right;
 width: 107px;
 height: 92px;
 position: absolute;
 left: calc(50% - 55px);
 animation: FlipCow 50s steps(2, jump-none) infinite, AbductCow 50s 5s ease-in-out infinite both;
}