Pro for THE RlZZA

/* Profile by AlthIndor */

:root {
  --accent: #E85C12;
  --button: #333;
  --radius: 2px;
  --shadow: 0 1px 5px #0003;
}

html, body {
  background: #000;
  overflow: hidden;
}

body :is(a, b, strong) {
  font-weight: 500 !important;
  text-decoration: none !important;
}

body a, #badges li {transition: all .1s cubic-bezier(.4,0,1,1);}
body a:hover, #badges li:hover {transition: all .1s cubic-bezier(0,0,.2,1);}
#gaia_header a, #badges li {opacity: .9;}
#gaia_header a:hover, #badges li:hover {opacity: 1;}

/* Fonts */

@font-face {
  font-family: 'Font Awesome';
  font-style: normal;
  font-weight: 900;
  src: url('https://ka-f.fontawesome.com/releases/v6.3.0/webfonts/free-fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
  background: var(--button) !important;
  width: calc(100% - 24px) !important;
  height: 40px !important;
  position: absolute !important;
  margin: 12px !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#gaia_header li.spacer {display: none !important;}
#gaia_header a {color: #FFF !important;}

#gaia_header ul {
  background: none !important;
  width: unset !important;
  font: 500 0/39px 'Roboto', sans-serif !important;
  padding: 0 12px !important;
}
#header_right {float: right !important;}

#gaia_header img {
  background: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  width: 0 !important;
  padding: 0 37px 0 0;
  margin-right: -1px;
}

#gaia_header li::before, #gaia_header a {font-size: 14px !important;}
#header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {content: '•';}

#gaia_header li::before {
  color: var(--accent);
  margin: 0 6px;
  position: relative;
  top: 1px;
}

/* Page Setup */

#columns, #columns .column {
  float: none;
  font-size: 0;
  margin: 0;
}
#column_3 {display: none;}

#columns, #column_1, .media_panel, .media_panel iframe {
  width: 100%;
  height: 100% !important;
  top: 0;
  left: 0;
}
#column_1, .media_panel, .media_panel iframe {position: absolute;}

#columns {
  display: grid;
  grid-template: 100% / 100%;
}

#column_2 {
  align-self: center;
  width: max-content;
  position: relative;
  left: 64px;
}

/* Scrollbars */

#columns ::-Webkit-scrollbar {
  background: #FFF3;
  width: 8px;
}
#columns ::-Webkit-scrollbar-thumb {background: #FFF6;}

.panel, dl {
  scrollbar-color: #FFF6 #FFF3;
  scrollbar-width: thin;
}

/* Panels */

.panel {
  background: none;
  color: #FFF;
  font: 400 11px/1.6 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.panel a {color: var(--accent);}
.panel a:hover {color: inherit;}

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

#column_2 .panel:not(#id_badges), #friendGroup {
  background: #171717E6;
  border: 16px solid transparent;
  border-radius: var(--radius);
}
#column_2 .panel:not(#id_badges) {border-top-width: 57px;}
#id_about, #id_comments, #id_signature {max-height: 400px;}
#id_comments, #id_signature {width: 500px;}
#id_wishlist {max-height: 280px;}

#id_about {
  max-width: 500px;
  border-top-width: 54px !important;
}

#id_wishlist:has(.item:nth-of-type(61)), #id_comments dl {
  padding-right: 16px;
  overflow-y: scroll;
}

@supports not selector(#id_wishlist:has(div)) {
  #id_wishlist, #id_comments dl {
    padding-right: 16px;
    overflow-y: scroll;
  }
}

/* Panel Headers and Close Button */

#id_badges, #id_badges ul {position: absolute;}
#badge_display {display: none;}

#id_badges {
  width: calc(100% - 32px);
  height: 28px;
  font: 500 14px/20px 'Roboto', sans-serif;
  top: 12px;
  left: 16px;
  border-bottom: 1px solid #FFF6;
  overflow: visible;
}

#id_badges ul, #id_badges li:first-of-type {
  width: 20px;
  height: 20px;
}

#id_badges ul {
  text-align: center;
  top: 0;
  right: -5px;
}
#id_badges li {margin: 0;}

#id_badges li:first-of-type::before {
  content: '';
  font: 16px/20px 'Font Awesome';
}

/* Button Stack */

#column_1::after, #id_badges li:nth-of-type(n+2) {
  width: 40px;
  position: fixed;
  left: 12px;
}
#column_1::after, #id_badges li:nth-of-type(2) {top: calc(50% - 100px);}

#column_1::after {
  content: '';
  background: var(--accent);
  height: 200px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#id_badges li:nth-of-type(n+2) {
  height: 40px;
  font: 20px/40px 'Font Awesome';
  overflow: hidden;
}
#id_badges li:nth-of-type(2)::before {content: '';}
#id_badges li:nth-of-type(3) {top: calc(50% - 60px);}
#id_badges li:nth-of-type(3)::before {content: '';}
#id_badges li:nth-of-type(4) {top: calc(50% - 20px);}
#id_badges li:nth-of-type(4)::before {content: '';}
#id_badges li:nth-of-type(5) {top: calc(50% + 20px);}
#id_badges li:nth-of-type(5)::before {content: '';}
#id_badges li:nth-of-type(6) {top: calc(50% + 60px);}
#id_badges li:nth-of-type(6)::before {content: '';}
#id_badges li:nth-of-type(n+7) {display: none;}

#id_badges img {
  width: 0;
  height: 100%;
  padding-left: 100%;
  position: absolute;
  left: 0;
}
#id_badges li:nth-of-type(3) img {padding-left: 43px;}
#id_badges li:nth-of-type(4) img {padding-left: 46px;}
#id_badges li:nth-of-type(5) img {padding-left: 49px;}
#id_badges li:nth-of-type(6) img {padding-left: 52px;}

/* Badge Functionality */

#id_about, #id_comments, #id_friends, #id_wishlist, #id_signature, #tooltip-badge_c div {display: none;}
#id_comments, #id_friends, #id_wishlist, #friendGroup, #friendGroup ul {gap: 8px;}

#tooltip-badge_c[style*='left: 52px']:first-of-type ~ #columns #id_badges::before {content: 'About Me';}
#tooltip-badge_c[style*='left: 55px']:first-of-type ~ #columns #id_badges::before {content: 'Comments';}
#tooltip-badge_c[style*='left: 58px']:first-of-type ~ #columns #id_badges::before {content: 'My Friends';}
#tooltip-badge_c[style*='left: 61px']:first-of-type ~ #columns #id_badges::before {content: 'Wish List';}
#tooltip-badge_c[style*='left: 64px']:first-of-type ~ #columns #id_badges::before {content: 'Signature';}

#tooltip-badge_c[style*='left: 52px']:first-of-type ~ #columns #id_about {display: block;}
#tooltip-badge_c[style*='left: 55px']:first-of-type ~ #columns #id_comments {display: grid;}
#tooltip-badge_c[style*='left: 58px']:first-of-type ~ #columns #id_friends {display: grid;}
#tooltip-badge_c[style*='left: 61px']:first-of-type ~ #columns #id_wishlist {display: grid;}
#tooltip-badge_c[style*='left: 64px']:first-of-type ~ #columns #id_signature {display: block;}

#tooltip-badge_c[style*='left: 52px']:first-of-type ~ #columns #id_badges li:nth-of-type(2) {opacity: 1;}
#tooltip-badge_c[style*='left: 55px']:first-of-type ~ #columns #id_badges li:nth-of-type(3) {opacity: 1;}
#tooltip-badge_c[style*='left: 58px']:first-of-type ~ #columns #id_badges li:nth-of-type(4) {opacity: 1;}
#tooltip-badge_c[style*='left: 61px']:first-of-type ~ #columns #id_badges li:nth-of-type(5) {opacity: 1;}
#tooltip-badge_c[style*='left: 64px']:first-of-type ~ #columns #id_badges li:nth-of-type(6) {opacity: 1;}

/* Friends and Comments */

#id_comments h2 + div a, #id_comments h2 ~ p a, #id_friends a, #id_wishlist a, #friendGroup a[href$='/'] {
  background: var(--button);
  color: #FFF;
}
#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover, #id_friends a:hover, #id_wishlist a:hover, #friendGroup a[href$='/']:hover {background: var(--accent);}

#id_comments h2 + div a, #id_comments h2 ~ p a, #id_friends h2 ~ p a, #id_wishlist a, #friendGroup h2 + a {
  display: flex;
  justify-content: center;
  align-items: center;
}
#id_comments h2 + div a, #id_comments h2 ~ p a, #id_friends h2 ~ p a, #friendGroup h2 + a {font: 0px 'Font Awesome';}
#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font-size: 20px;}
#id_friends h2 ~ p a::before, #friendGroup h2 ~ a::before {font-size: 24px;}
#id_comments h2 + div a::before {content: '';}
#id_comments h2 ~ p a::before {content: '';}
#id_friends h2 ~ p a::before {content: '';}
#friendGroup h2 ~ a::before {content: '';}

.dropBox {
  background: #FFF;
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  overflow: hidden;
}

/* Comments */

#id_comments {
  grid-template: 40px 1fr / 1fr 40px 40px;
  row-gap: 12px;
}
#id_comments :is(#alerts_banner, .deletecomment, .clear) {display: none;}
#id_comments :is(#alert_container, h2 + div, h2 ~ p) {display: contents;}
#id_comments :is(.dropBox, dd:last-of-type) {margin: 4px 0 0 0;}
#id_comments h2 + div a {grid-column: 2;}
#id_comments h2 ~ p a {grid-column: 3;}

#id_comments dl {
  grid-column: 1/-1;
  box-sizing: border-box;
}

#id_comments dt {
  padding: 0;
  border-bottom: 1px solid #FFF3;
}

#id_comments dd {
  display: grid;
  grid-template: max-content / 58px calc(100% - 58px);
  margin: 4px 0 16px 0;
}

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

/* Friends */

#id_friends {grid-template-columns: repeat(6, 60px);}
#id_friends :is(h2 ~ div, h2 ~ p + p) {display: none;}
#id_friends :is(ul, p, span) {display: contents;}
#id_friends h2 ~ p a {grid-area: 1/6/3/7;}

:is(#id_friends, #friendGroup) :is(li, li a) {
  width: 100%;
  height: 75px;
}
:is(#id_friends, #friendGroup) li {position: relative;}

:is(#id_friends, #friendGroup) li a {
  display: block;
  line-height: 2;
  text-overflow: ellipsis;
  white-space: pre;
  padding: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
}

:is(#id_friends, #friendGroup) .dropBox {
  position: absolute;
  bottom: 5px;
  left: 5px;
  pointer-events: none;
}

/* Big Friends */

#friendGroup, #friendGroup ul {display: grid;}
#friendGroup, #friendGroup li {padding: 0;}

#friendGroup {
  grid-template-columns: 60px 1fr 1fr 60px;
  width: max-content;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
#friendGroup :is(.clear, .user_info) {display: none;}
#friendGroup :is(p, ul) {margin: 0;}
#friendGroup h2 ~ p {grid-area: 1/1/2/3;}

#friendGroup .pagination {
  grid-area: 1/3/2/5;
  justify-self: end;
}

#friendGroup ul {
  grid-column: 2/-1;
  grid-template-columns: repeat(12, 60px);
}

/* Wish List */

#id_wishlist {
  grid-template-columns: repeat(10, 40px);
  grid-auto-rows: 40px;
  scroll-snap-type: y mandatory;
}
#id_wishlist :is(.clear, .premium_sparkle) {display: none;}
#id_wishlist :is(.item, a) {height: 100%;}

#id_wishlist .item {
  position: relative;
  scroll-snap-align: start;
}

#id_wishlist .owner_checkmark {
  background: #FFFFFF;
  margin: 0;
  padding: 2px;
  bottom: 0;
  right: 0;
  border: 1px solid #000;
  pointer-events: none;
}

/* Signature */

#id_signature {line-height: normal;}
#id_signature h2 {margin-bottom: 16px;}

#id_signature .code {
  color: #000;
  font-size: 10px;
}