Pro for x-OhhPrincess

/* Profile By AlthIndor */

/* Below Colors Control Theme Appearance */
/* Some Suggestions Included In Comments */

:root {
  --bg-level-1: #181818; /* #F8F8F8 Light, #181818 Dark */
  --bg-level-2: #282828; /* #FFFFFF Light, #282828 Dark */
  --bg-level-3: #383838; /* #F0F0F0 Light, #383838 Dark */
  --bg-level-4: #808080; /* #C0C0C0 Light, #808080 Dark */
  --bg-level-5: #FFFFFF; /* #C0C0C0 Light, #FFFFFF Dark */
  --button-out: #007BFF; /* #007BFF Default, #000000 Light, #383838 Dark */
  --button-ovr: #0069D9; /* #0069D9 Default, #404040 Light, #808080 Dark */
  --button-txt: #FFFFFF; /* #FFFFFF Default, #FFFFFF Light, #FFFFFF Dark */
  --text-level-1: #C0C0C0; /* #404040 Light, #C0C0C0 Dark */
  --text-level-2: #FFFFFF; /* #000000 Light, #FFFFFF Dark */
  --border-unused: linear-gradient(90deg, hsl(0,100%,90%), hsl(60,100%,90%), hsl(120,100%,90%), hsl(180,100%,90%), hsl(240,100%,90%), hsl(300,100%,90%), hsl(360,100%,90%));
  --border-active: #FFFFFF;
  --layout-offset: 100px;
}

/* Ignore Theme Code Below This Line */

html, body {
  background: var(--bg-level-1);
  height: revert;
}
body a {text-decoration: none !important;}

::selection {
  background: var(--button-out);
  color: #FFFFFF;
}

/* Fonts */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-brands-400.woff2') format('woff2'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-brands-400.woff') format('woff');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff2') format('woff2'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff') format('woff');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  src: local('Quicksand Medium'), url('https://fonts.gstatic.com/s/quicksand/v22/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58a-wg.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: local('Quicksand SemiBold'), url('https://fonts.gstatic.com/s/quicksand/v22/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkCEv58a-wg.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), url('https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), url('https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhp.woff2') format('woff2');
}

/* Header */

#gaia_header, #header_left, #header_right {background: none !important;}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#gaia_header #header_left, #gaia_header #header_right {
  font: 600 0/30px 'Quicksand', sans-serif !important;
  padding: 0 5px !important;
  box-sizing: border-box;
}
#gaia_header #header_right {float: right;}

#header_left img {
 -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  background: var(--text-level-2);
  width: 0 !important;
  padding: 0 34px 0 0;
}
#header_left li:nth-of-type(2) a:hover img {background: var(--text-level-1);}

#gaia_header a {
  color: var(--text-level-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#gaia_header a:hover {color: var(--text-level-1) !important;}

/* Columns */

#columns {
  float: revert;
  display: grid;
  width: 500px;
  font-size: 0;
  margin: var(--layout-offset) auto 0 auto;
  position: static;
  overflow: visible;
  transform: translateZ(0);
}
#columns .column {display: contents;}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: var(--bg-level-1);
  width: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: var(--bg-level-4);}

.panel, .panel dl {
  scrollbar-color: var(--bg-level-4) var(--bg-level-1);
  scrollbar-width: thin;
}

/* Panels */

.panel, .panel h2 {
  background: none;
  padding: 0;
  margin: 0 0 20px 0;
  box-sizing: border-box;
}

.panel {
  color: var(--text-level-1);
  font: 10px/1.7 'Open Sans', sans-serif;
  text-align: justify;
  overflow: hidden;
}

.panel:not(#id_contact):not(#id_details) {
  background: var(--bg-level-2);
  border: 20px solid transparent;
}
.panel:not(#id_contact):not(#id_details):not(#id_about) {border-top-width: 65px;}

#id_about, #id_comments, #id_wishlist, #id_footprints, #id_equipment {overflow-y: scroll;}
#id_signature, #id_store, #id_footprints {text-align: center;}
#id_comments, #id_footprints {max-height: 210px;}
#id_wishlist, #id_equipment {height: 175px;}

#id_about, #id_comments {padding-right: 20px;}
#id_about img, #id_comments .postcontent img {max-width: 100%;}

.panel a {
  color: var(--text-level-2);
  font-weight: 600;
}
.panel a:hover {color: inherit;}

#id_store p:nth-last-of-type(2) {display: none;}
.panel p:last-of-type {margin: 0;}

/* Username and Panel Headers */

.panel h2 {
  color: var(--text-level-2);
  font: 600 15px/15px 'Quicksand', sans-serif;
}
#contact_title, #about_title {display: none;}

.panel:not(#id_details) h2 {
  width: calc(100% - 40px);
  margin-top: -45px;
  position: fixed;
}

#id_details h2 {
  grid-row: 1;
  font: 500 40px/30px 'Quicksand', sans-serif;
}

.panel h2::after {
  content: '';
  display: block;
  background: var(--border-active);
  width: 100%;
  height: 1px;
  margin-top: 1ex;
}

#id_details h2::after {
  height: 2px;
  margin-top: .5ex;
}

/* Contact and Other Buttons */

#id_contact {
  position: absolute;
  top: 1px;
  right: 0;
}
#id_contact li {float: left;}
#id_contact li:nth-of-type(n+2) {margin-left: 10px;}
#id_contact span {display: none;}

#id_contact li, #id_store p:last-of-type, #id_comments h2 + div {
  background: var(--button-out);
  width: 30px;
  height: 30px;
  color: var(--button-txt);
  text-align: center;
  position: relative;
}
#id_contact li:hover,  #id_store p:last-of-type:hover, #id_comments h2 + div:hover {background: var(--button-ovr);}

#id_contact li::before, #id_store p:last-of-type::before, #id_comments h2 + div::before {font: 900 16px/30px 'Font Awesome 5 Free';}
#id_contact li:nth-of-type(1)::before {content: '';}
#id_contact li:nth-of-type(2)::before {content: '';}
#id_contact li:nth-of-type(3)::before {content: '';}
#id_store p:last-of-type::before {content: '';}
#id_comments h2 + div::before {content: '';}

#id_contact a, #id_store a[href*='userstore'], #id_comments h2 + div a {
  width: 100%;
  height: 100%;
  font-size: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Comment and Store Links */

#id_store {display: flex;}
#id_store div {flex-basis: 100%;}

#id_comments h2 + div, #id_store p:last-of-type {
  font-size: 0;
  margin-top: -51px;
  position: fixed;
  right: 14px;
}
#id_comments h2, #id_store h2 {width: calc(100% - 34px - 40px) !important;}

/* About Me and Details */

#id_about, #id_details p {grid-area: 2/1/3/2;}

#id_about {
  height: 210px;
  border-left-width: 180px !important;
}

#id_details {display: contents;}
#id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}

#id_details p {
  background: var(--bg-level-3);
  width: 120px;
  height: 150px;
  padding: 10px;
  margin: 20px 0 0 20px;
  z-index: 1;
}

/* Comments */

#id_comments #alerts_banner, #id_comments h2 ~ p {display: none;}
#id_comments #alert_container {display: contents;}

#id_comments dt {
  height: revert;
  line-height: 1;
  padding: 0 0 7px 0;
  margin: 0 0 2px 0;
  border-bottom: 1px solid var(--bg-level-3);
}

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

#id_comments .dropBox {
  background: var(--bg-level-3);
  width: 48px;
  height: 56px;
  margin: 5px 10px 0 0;
  border: 2px solid transparent;
  overflow: hidden;
}

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

/* Item Tiles */

#id_wishlist .clear, #id_equipment .clear {display: none;}
.premium_sparkle, .owner_checkmark {margin: 0;}

#id_wishlist .item, #id_equipment .item {
  background: var(--bg-level-3);
  width: 30px;
  height: 30px;
  padding: 5px;
  margin-right: 10px;
  position: relative;
}
#id_wishlist .item:nth-of-type(n+10), #id_equipment .item:nth-of-type(n+10) {margin-top: 10px;}
#id_wishlist .item:hover, #id_equipment .item:hover {background: var(--bg-level-5);}

.premium_sparkle {
  top: 3px;
  right: 2px;
}

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

/* Visitors */

#id_footprints .item {
  display: grid;
  grid-auto-flow: column dense;
  justify-content: center;
}
#id_footprints .item:nth-of-type(n+2) {margin-top: 1px;}

#id_footprints .item::before {
  content: ' visited ';
  white-space: pre;
  grid-column: 2;
}

/* Misc */

#pictures_container, #texts_container {
  width: 0;
  height: 0;
  position: absolute;
  top: var(--layout-offset);
  left: 50%;
}