Pro for Gnomadic

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

html, body {background: url('https://i.imgur.com/iXH8bDv.jpg') fixed top right / cover;}
#columns, .panel h2, #id_contact ul:not(.buttons) li, #id_comments h2 + div {background: url('https://images2.imgbox.com/03/c0/OFDCZFZM_o.png');}
#gaia_header *, #columns *, #texts_container * {font-family: 'Quicksand', sans-serif;}

:root {
 --column-size: 440px;
 --text-color: #404A38;
 --accent-color: #C03430;
 --background-color: rgba(245,245,220,.8);
}

#columns ::-webkit-scrollbar {
 background: linear-gradient(to bottom, transparent, rgba(0,0,0,.3)) var(--accent-color);
 width: 10px;
 border-radius: 5px;
}

#columns ::-webkit-scrollbar-thumb {
 background: var(--background-color);
 border: 1px solid var(--accent-color);
 border-radius: 5px;
}

/* BADGER */

@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v8/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
}

@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 700;
 src: local('Quicksand Bold'), local('Quicksand-Bold'), url(https://fonts.gstatic.com/s/quicksand/v8/6xKodSZaM9iE8KbpRA_pkHEYT8L_.woff2) format('woff2');
}

/* BADGER */

#gaia_header {
 background: rgba(48,38,33,.6);
 border-bottom: 5px solid transparent;
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 color: transparent;
 line-height: 28px !important;
 padding: 0 7px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}
#gaia_header .spacer {display: none !important;}
#gaia_header li {margin: 0 1px;}

#header_left img {
 background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') no-repeat;
 background-size: auto 200%;
 width: 0;
 height: 17px;
 padding: 0 40px 0 0;
 margin-left: -1px;
}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 12px !important;
 text-decoration: none;
 text-transform: uppercase;
}

/* BADGER */

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

#columns {
 background-repeat: no-repeat;
 width: 980px;
 height: 780px;
 top: 30px;
 left: calc(50% - 490px);
 transform: translateZ(0);
}

@media screen and (min-height: 800px) {
 #columns {
    top: calc(50% - 490px);
    height: 760px;
  }
}

#column_1 {
 width: 1px;
 height: 1px;
 bottom: 130px;
 left: 304px;
 overflow: visible;
}

#column_2 {
 width: var(--column-size);
 height: var(--column-size);
 left: calc(50% - (var(--column-size) / 2));
 top: calc(50% - (var(--column-size) / 2));
}

/* BADGER */

.panel, .panel h2 {
 color: var(--text-color);
 padding: 0;
 margin: 0;
}

.panel {
 font-size: 12px;
 line-height: 1.6em;
 text-align: justify;
 box-sizing: border-box;
}

.panel h2 {
 font-weight: bold;
 text-align: center;
}

.panel a {color: var(--accent-color);}
.panel img {max-width: 100% !important;}

#column_2 .panel {
 background: var(--background-color);
 width: 100%;
 height: 100%;
 padding-right: 20px;
 position: absolute;
 top: -100%;
 border: 20px solid transparent;
 border-radius: 20px;
 overflow-x: hidden;
 overflow-y: scroll;
}
#column_2 .panel:hover {top: 0;}

/* BADGER */

#column_2 .panel h2 {
 background-clip: content-box;
 width: 120px;
 height: 120px;
 font-size: 0;
 position: fixed;
 border-radius: 50%;
 box-shadow: -2px 2px 2px rgba(0,0,0,.3);
 z-index: 999;
}

#column_2 .panel:hover h2 {
 margin: -3px 0 0 -3px;
 border: 3px solid #FFFFFF;
 box-shadow: 0 0 15px #FFFFFF, -2px 2px 2px rgba(0,0,0,.3);
}

#id_about h2 {
 background-position: -980px 0;
 top: calc(50% - 220px);
 left: 155px;
}

#id_comments h2 {
 background-position: -980px -120px;
 top: calc(50% - 60px);
 left: 112px;
}

#id_wishlist h2 {
 background-position: -980px -240px;
 top: calc(50% + 100px);
 left: 155px;
}

/* BADGER */

#column_2 .panel h2::after {
 content: '';
 display: block;
 width: 0;
 height: 100%;
 position: absolute;
 top: 0;
 left: 50%;
}

#id_about h2:hover::after, #id_wishlist h2:hover::after {width: 70px;}
#id_comments h2:hover::after {width: 110px;}

/* BADGER */

#id_comments #alerts_banner {display: none;}
#id_comments .dropBox {display: none;}
#id_comments .date {font: 85% monospace;}
#id_comments .date a {font-weight: normal;}
#id_comments h2 ~ p {display: none;}

#id_comments dt {
 height: auto;
 line-height: normal;
 padding: 0 0 4px 0;
 margin: 0 0 2px 0;
 border-bottom: 1px dashed rgba(0,0,0,.3);
}

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

#id_comments .deletecomment {
 margin: 0;
 position: absolute;
 bottom: 0;
}
#id_comments .deletecomment ~ .postcontent {margin-bottom: 20px;}
#id_comments .deletecomment br {display: none;}
#id_comments .deletecomment a {text-decoration: none;}

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

/* MUSHROOM MUSHROOM */

#id_wishlist {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 grid-auto-rows: max-content;
 grid-auto-flow: row dense;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
 justify-items: center;
}
#id_wishlist .clear {display: none;}

#id_wishlist .owner_checkmark {
 margin: 0;
 top: calc(50% + 4px);
 left: calc(50% - 16px);
}
.premium_sparkle {display: none;}

#id_wishlist .item {
 background: #FFFFFF;
 width: 30px;
 height: 30px;
 text-align: center;
 padding: 5px;
 position: relative;
 border: 2px solid rgba(48,38,33,.2);
 border-radius: 5px;
}
#id_wishlist .item:hover {background: var(--accent-color);}

/* SNAAAAAAAKE */

#id_contact {background: none;}
#id_contact h2 {display: none;}

#id_contact ul:not(.buttons) li, #id_comments h2 + div {
 background-position-x: -985px;
 width: 50px;
 height: 50px;
 position: absolute;
 border: 3px solid #FFFFFF;
 border-radius: 50%;
 box-shadow: -2px 2px 2px rgba(0,0,0,.3);
}
#id_contact ul:not(.buttons) *, #id_comments h2 + div * {font-size: 0;}

#id_contact ul:not(.buttons) li:hover, #id_comments h2 + div:hover {
 background-position-x: -1045px;
 border-color: var(--accent-color);
}

#id_contact ul:not(.buttons) li:nth-of-type(1) {
 background-position-y: -365px;
 top: 0;
 left: 0;
}

#id_contact ul:not(.buttons) li:nth-of-type(2) {
 background-position-y: -425px;
 top: 30px;
 left: 76px;
}

#id_contact ul:not(.buttons) li:nth-of-type(3) {
 background-position-y: -485px;
 top: 42px;
 left: 160px;
}

#id_comments h2 + div {
 background-position-y: -545px;
 position: fixed;
 top: 220px;
 left: 755px;
}

#id_contact ul:not(.buttons) a, #id_comments h2 + div a {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}