Pro for TechnicalAo

/* Graphics by Cassiel Socks, Coded By AlthIndor */

:root {
  --lime-dark: #00B067;
  --lime-lite: #12F0A7;
  --orng-dark: #D66020;
  --orng-lite: #E08858;
  --pink-dark: #D92F84;
  --pink-lite: #FF69B4;
  --purp-dark: #260059;
  --purp-lite: #663399;
  --top-offset: calc(50% - 450px + 35px);
}

html, body {
  background: url('https://i.imgur.com/FA57bq5.png') center / cover;
  min-height: 1080px;
}
body {position: relative;}
body a {text-decoration: none !important;}

::selection {
  background: var(--pink-lite);
  color: #FFFFFF;
}

/* Fonts */

@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: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  src: local('Luckiest Guy'), url(https://fonts.gstatic.com/s/luckiestguy/v11/_gP_1RrxsjcxVyin9l9n_j2hTd52.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/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
}

/* Header */

#gaia_header, #header_left, #header_right {box-sizing: border-box;}
#gaia_header ul, #gaia_header a {transition: all .5s ease-in-out;}
#gaia_header #header_right {float: right;}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#viewer #gaia_header {
  background: none !important;
  padding: 10px !important;
}

#viewer #gaia_header ul {
  background: var(--purp-lite);
  width: auto !important;
  height: 36px !important;
  font: 0/29px 'Luckiest Guy', sans-serif !important;
  padding: 0 5px !important;
  border: 3px solid var(--purp-dark);
  border-radius: 5px;
  box-shadow: 0 3px 2px #00008020;
}

#viewer #gaia_header ul:hover {
  background: var(--orng-lite);
  border-color: var(--orng-dark);
}

#gaia_header img {
 -webkit-mask: url('https://i.imgur.com/5FTB40o.png') 0 4px no-repeat;
  mask: url('https://i.imgur.com/5FTB40o.png') 0 4px no-repeat;
  background: #FFFFFF;
  width: 0;
  padding: 0 37px 0 0;
}

#gaia_header a {
 -webkit-text-stroke: 1px var(--purp-lite);
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}
#gaia_header ul:hover a {-webkit-text-stroke-color: var(--orng-lite);}

#header_right a[href*='report'], #header_right a[href*='edit'] {font-size: 0 !important;}
#header_right a[href*='report']::before, #header_right a[href*='edit']::before {font-size: 15px !important;}
#header_right a[href*='report']::before {content: 'Report Profile';}
#header_right a[href*='edit']::before {content: 'Edit My Profile';}

/* Columns */

#columns {
  background: url('https://images2.imgbox.com/e4/4c/TVUsUOCO_o.png');
  width: 800px;
  height: 900px;
  top: var(--top-offset);
  left: calc(50% - 400px);
  contain: layout;
}
#columns .column {display: contents;}

/* Scrollbars */

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

/* Panels */

.panel {
  background: none;
  color: #FFFFFF;
  font: 10px/1.6 'Open Sans', sans-serif;
  text-align: center;
  position: absolute;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.panel h2 {display: none;}

.panel a {transition: color .5s ease-in-out;}
.panel a:hover {color: inherit !important;}

#id_about a {color: #187084;}
#id_comments a {color: rebeccapurple;}

#id_about, #id_comments {
  width: 305px;
  height: 190px;
  left: 40px;
  overflow-y: scroll;
  overscroll-behavior: contain;
}
#id_about {top: 280px;}
#id_comments {top: 520px;}

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

/* Contact, Comments, and Media */

#id_contact {
  top: 472px;
  left: 385px;
  overflow: visible;
}

#id_contact li, #id_comments h2 + div a, #id_comments h2 ~ p a, .media_panel {
  height: 40px !important;
  border: 3px solid transparent;
  border-radius: 5px;
  box-shadow: 0 3px 2px #00008020;
  transition: all .5s ease-in-out;
}
#id_contact li, #id_comments h2 + div a, #id_comments h2 ~ p a {width: 40px;}

#id_contact li *, #id_comments h2 + div a, #id_comments h2 ~ p a {
  color: #FFFFFF;
  font-size: 0;
}

#id_contact li {
  float: left;
  margin: 0 10px 0 0;
}

#id_contact li, .media_panel:hover {
  background-color: var(--pink-lite);
  border-color: var(--pink-dark);
}

.media_panel, #id_contact li:hover {
  background-color: var(--lime-lite);
  border-color: var(--lime-dark);
}

#id_comments h2 + div a, #id_comments h2 ~ p a {
  background: var(--orng-lite);
  position: fixed;
  top: 748px;
  border-color: var(--orng-dark);
}
#id_comments h2 + div a {left: 34px;}
#id_comments h2 ~ p a {left: 90px;}

#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
  background: var(--purp-lite);
  border-color: var(--purp-dark);
}

#id_contact li::before, #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: 900 22px/40px '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_comments h2 + div a::before {content: '';}
#id_comments h2 ~ p a::before {content: '';}

/* Comments */

#id_comments #alert_container, #id_comments h2 + div, #id_comments h2 ~ p {display: contents;}
#id_comments #alerts_banner, #id_comments .dropBox {display: none;}

#id_comments dt {
  height: revert;
  line-height: revert;
  text-align: inherit;
  padding: 0 0 5px 0;
  margin: 0 0 3px 0;
  border-bottom: 1px dotted rebeccapurple;
}
#id_comments .username {float: none;}

#id_comments .date a {
  font-weight: 400;
  text-transform: lowercase;
}

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

#id_comments .deletecomment {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  float: none;
  padding: 0 0 4px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px dotted rebeccapurple;
}
#id_comments .deletecomment a:first-of-type::after {content: ' Comment';}
#id_comments .deletecomment br {display: none;}

#id_comments .deletecomment::after {
  content: ' • ';
  white-space: pre;
  grid-column: 2;
  color: rebeccapurple;
}

/* Media */

.media_panel {
  background-image: url('https://i.imgur.com/gqTTTvw.png');
  background-position: -16px -2px;
  width: 80px;
  left: 65px;
  top: 191px;
}

.media_panel iframe {
  width: 320px;
  height: 320px;
  position: absolute;
  bottom: 0;
  left: -9px;
  opacity: .001;
}

/* Misc */

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