Code for Janimals Yogurt

/* Profile By AlthIndor */

@keyframes RotateBackground {
 from {transform: rotate(0deg);}
 to {transform: rotate(360deg);}
}

@keyframes MoveAvatar {
 from {margin-top: 0;}
 to {margin-top: 20px;}
}

html, body {background: url('') #202020 fixed center / cover;}
#column_2, #column_2::before, #column_2 h2, #id_store, #id_contact ul:not(.buttons) li, #texts_container .spoiler-control-show {background: url('https://i.imgur.com/cxVlzMB.png');}

/* Fonts */

@font-face {
 font-family: 'Varela Round';
 font-style: normal;
 font-weight: 400;
 src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v9/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2'), url(https://fonts.gstatic.com/s/varelaround/v9/APH4jr0uSos5wiut5cpjrnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
 font-family: 'PT Sans';
 font-style: normal;
 font-weight: 400;
 src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0KExQ.woff2) format('woff2'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0KEww.woff) format('woff');
}

/* Header */

#gaia_header {border-bottom: 10px solid transparent;}

#gaia_header #header_left, #gaia_header #header_right {
 color: transparent;
 font-family: 'Varela Round', sans-serif;
 line-height: 34px !important;
 padding: 0 10px 0 8px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right !important;}
#gaia_header li.spacer {display: none !important;}

#gaia_header #header_left img {
 background: url('https://i.imgur.com/s0NkOhU.png') 0 1px no-repeat;
 width: 0;
 padding: 0 47px 0 0;
}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 10px;
 letter-spacing: .02em;
 text-decoration: none;
 text-transform: uppercase;
 opacity: .8;
}
#gaia_header a:hover {opacity: 1;}

/* Columns */

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

#columns, #column_1 {
 width: 100%;
 left: 0;
}

#columns {
 height: calc(100% - 30px);
 top: 30px;
}
#columns ::-webkit-scrollbar {display: none;}

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

#column_2, #column_3, #texts_container .spoiler-wrapper {
 height: 550px;
 top: calc(50% - 275px);
}

#column_2, #texts_container .spoiler-wrapper {
 width: 680px;
 left: calc(50% - 340px);
}

#column_2 {
 opacity: 0;
 transition: opacity 0s linear 43200s;
}

#column_2:hover {
 opacity: 1;
 transition: opacity 0s linear 0s;
}

#column_3 {
 width: 170px;
 right: calc(50% - 340px);
}

#column_2::before {
 content: '';
 display: block;
 background-position: -680px 0;
 width: 550px;
 height: 550px;
 position: absolute;
 top: 0;
 left: calc(50% - 275px);
 animation: RotateBackground 30s linear infinite;
 pointer-events: none;
}

/* Panels */

.panel {
 font-family: 'PT Sans', sans-serif;
 font-size: 12px;
 padding: 0;
 margin: 0;
 position: absolute;
 box-sizing: border-box;
}

.panel a {
 color: #D0D0D0;
 text-decoration: none;
}

#column_1 h2, #column_3 h2 {display: none;}

/* Panels */

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

/* Details */

#id_details {
 background: none;
 width: 120px;
 height: 150px;
 top: 270px;
 left: calc(50% - 60px);
 z-index: 1;
 animation: MoveAvatar 3s 0s ease-in-out infinite alternate;
}
#id_details h2 {display: none;}
#id_details p:nth-of-type(n+2) {display: none;}
.forum_userstatus {display: none;}

#id_details img {filter: grayscale(100%) drop-shadow(0 0 10px #D0D0D0);}
#id_details:hover img {filter: drop-shadow(0 0 10px #D0D0D0);}

/* Comments */

#id_comments #alerts_banner {display: none;}
#id_comments .deletecomment {display: none;}
#id_comments .dropBox {display: none;}
#id_comments dl {margin-top: 40px;}
#id_comments dd {padding-bottom: 7px;}
#id_comments dd:last-of-type {margin-bottom: 0;}

#id_comments dt {
 height: auto;
 line-height: inherit;
 text-align: left;
 padding: 0 0 5px 0;
 margin: 0 0 3px 0;
 border-bottom: 2px solid #808080;
}

#id_comments .username {
 float: none;
 text-transform: uppercase;
}

/* Comments Buttons */

#id_comments h2 ~ div:not(.clear), #id_comments h2 ~ div span,  #id_comments h2 ~ p {
 display: block;
 font-family: 'Varela Round', sans-serif;
 font-size: 10px;
 text-align: center;
 text-transform: uppercase;
 padding: 0;
 border-radius: 10px;
}

#id_comments h2 ~ div:not(.clear), #id_comments h2 ~ p {
 float: left;
 background: #404040;
 width: calc(50% - 5px);
 height: 30px;
 line-height: 30px;
 margin: 0;
}
#id_comments h2 ~ div span {width: 100%;}
#id_comments h2 ~ p {margin-left: 10px;}

#id_comments h2 ~ div:not(.clear):hover, #id_comments h2 ~ p:hover {background: #FFFFFF;}
#id_comments h2 ~ div:not(.clear):hover a, #id_comments h2 ~ p:hover a {color: #000000;}

/* Tabbed Panels */

#column_2 .panel img {max-width: 100% !important;}
#column_2:hover .panel:not(#id_details) {transition: top 0s linear 0s, z-index 0s linear 0s;}

#column_2 .panel:not(#id_details) {
 background: #000000;
 width: 340px;
 height: 340px;
 color: #FFFFFF;
 padding: 0 10px 0 0;
 top: 600px;
 left: 170px;
 border: 10px solid transparent;
 transition: top 0s linear 43200s, z-index 0s linear 43200s;
 z-index: 8;
 overflow-x: hidden;
 overflow-y: scroll;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {#column_2 .panel:not(#id_details) {padding: 0;}}
#id_about, #id_comments, .custom_panel {text-align: justify;}
#id_footprints {text-align: center;}

#column_2 .panel:not(#id_details):hover {
 top: 105px;
 transition: top 0s linear 0s, z-index 0s linear 0s;
 z-index: 99;
}

/* Transparent Bridge */

#columns::before, #column_2 h2::before {
 content: '';
 display: block;
 height: 550px;
 position: fixed;
 top: calc(50% - 275px + 15px);
 left: calc((50% - 340px) + 50px);
}

#columns::before {
 width: 120px;
 z-index: 9;
}

#column_2 h2::before {
 width: 5px;
 z-index: -1;
}

/* Panel Headers */

#column_2:hover h2 {transition: opacity 0s linear 0s;}

#column_2 h2, #id_contact ul:not(.buttons) li, #id_store {
 width: 50px;
 height: 50px;
 font-size: 0;
 padding: 0;
 margin: 0;
 opacity: 0;
 box-sizing: border-box;
}
#column_2 h2 {transition: opacity 0s linear 43200s;}
#column_2 h2:hover, #id_contact ul:not(.buttons) li:hover, #id_store:hover {opacity: 1;}
#column_2 h2:hover {transition: opacity 0s linear 0s;}

#column_2 h2 {
 position: fixed;
 left: calc(50% - 340px);
 z-index: 999;
}

#id_about h2 {
 background-position: -1235px -200px;
 top: calc((50% - 275px + 15px) + 160px);
}

#id_comments h2 {
 background-position: -1235px -250px;
 top: calc((50% - 275px + 15px) + 220px);
}

#column_2 .custom_panel h2 {
 background-position: -1235px -300px;
 top: calc((50% - 275px + 15px) + 280px);
}

#id_footprints h2 {
 background-position: -1235px -350px;
 top: calc((50% - 275px + 15px) + 340px);
}

#id_contact, #id_store {right: 0;}

#id_contact {
 background: none;
 top: 160px;
}

#id_store {
 background-position: -1285px -350px;
 top: 340px;
}
#id_store h3, #id_store div, #id_store p:first-of-type {display: none;}

#id_contact ul:not(.buttons) li {
 margin-bottom: 10px;
 position: relative;
}
#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: -1285px -200px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -1285px -250px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -1285px -300px;}

#id_contact ul:not(.buttons) li a, #id_store a {
 display: block;
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
}

/* Entry Spoiler */

#pictures_container, #texts_container {position: relative;}
#pictures_container {z-index: 9998;}
#texts_container {z-index: 9999;}
#texts_container p {margin: 0;}
.decoration {min-height: 0;}

#texts_container .spoiler-wrapper, #texts_container .spoiler-title, #texts_container .spoiler-control-show {
 font-size: 0;
 padding: 0;
 border: none;
 box-sizing: border-box;
}

#texts_container .spoiler-wrapper {
 position: fixed;
 top: calc(50% - 275px + 15px);
}
#texts_container .spoiler-revealed {display: none;}

#texts_container .spoiler-title {
 width: 100%;
 height: 100%;
}

#texts_container .spoiler-control-show {
 background-position: -1235px 0 !important;
 width: 200px;
 height: 200px;
 position: absolute;
 top: calc(50% - 100px);
 left: calc(50% - 100px);
 border-radius: 50%;
}

/* Media */

.media_panel, .media_panel object {
 width: 100%;
 height: 100% !important;
 position: absolute;
 top: 0;
 left: 0;
}

.column:not(#column_1) .media_panel {display: none;}
#column_1 .media_panel:nth-of-type(n+2) {display: none;}