Pro for conquestfrontier

/* Design by Cassiel Socks */
/* And Coding by AlthIndor */

html, body {
  background: url('https://i.imgur.com/iPd1EP1.jpg') right top / cover;
  min-height: 980px;
}
body {position: relative;}

body a {
  text-decoration: none !important;
  transition: background-color .5s ease-in-out, color .5s ease-in-out;
}

/* Fonts */

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url('https://fonts.gstatic.com/s/notoserif/v21/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url('https://fonts.gstatic.com/s/notoserif/v21/ga6Law1J5X9T9RW6j9bNdOwzfReecQ.woff2') format('woff2');
}

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

/* Header */

#viewer #gaia_header {
  background: rgba(44,20,42,.6) !important;
  height: 30px !important;
  box-shadow: 0 2px 5px #00000040;
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#gaia_header ul {
  background: none !important;
  width: auto !important;
  font: 400 0/27px 'Noto Serif', serif !important;
  padding: 0 5px !important;
}
#gaia_header #header_right {float: right;}

#header_left img {
  -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
  mask: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
  background: #FFFFFF;
  width: 0;
  padding: 0 34px 0 0;
  transition: background .5s ease-in-out;
}
#header_left li:nth-of-type(2) a:hover img {background: #B4E8F0;}

#gaia_header a {
  color: #FFFFFF !important;
  font-size: 11px !important;
  text-transform: uppercase;
}
#gaia_header a:hover {color: #B4E8F0 !important;}

/* Columns */

#columns {
  background: url('https://i.imgur.com/cq4OMB0.png');
  width: 1220px;
  height: 860px;
  left: calc(50% - 610px - 10px);
  top: calc(50% - 430px + 30px);
}
#columns .column {display: contents;}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: rgba(44,20,42,.1);
  width: 8px;
}
#columns ::-webkit-scrollbar-thumb {background: rgba(44,20,42,.6);}

.panel {
  scrollbar-color: rgba(44,20,42,.6) rgba(44,20,42,.1);
  scrollbar-width: thin;
}

/* Panels */

.panel {
  background: none;
  font: 10px/1.7 'Noto Serif', serif;
  padding: 0;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}
.panel h2 {display: none;}
.panel img {max-width: 100% !important;}

.panel a {
  color: rebeccapurple;
  font-weight: 400;
}
.panel a:hover {color: #F05854;}

#id_about, #id_comments, #id_interests, #id_footprints, #id_signature, #id_equipment, #id_wishlist {
  height: 100px;
  overflow-y: scroll;
  overscroll-behavior: contain;
}
#id_about, #id_comments, #id_interests, #id_footprints, #id_signature {width: 300px;}
#id_about, #id_comments, #id_footprints {text-align: justify;}
#id_about, #id_comments, #id_interests {padding-right: 10px;}
#id_equipment, #id_wishlist {width: 130px;}

#id_about, #id_interests, #id_signature {left: 526px;}
#id_comments, #id_footprints, #id_equipment {left: 866px;}
#id_wishlist {left: 1036px;}

#id_about, #id_comments {top: 350px;}
#id_interests, #id_footprints {top: 490px;}
#id_signature, #id_equipment, #id_wishlist {top: 630px;}

/* Contact */

#id_contact, #id_store {
  text-align: center;
  top: 134px;
}
#id_contact {left: 494px;}
#id_store {left: calc(494px + 108px);}

#id_contact li, #id_contact li *, #id_store, #id_store a {
  width: 30px;
  height: 30px;
}

#id_contact li *, #id_store a {
  background: rgba(44,20,42,.35);
  color: #FFFFFF;
  font-size: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
}
#id_contact li:nth-of-type(odd) *, #id_store a {text-indent: 1px;}
#id_contact a:hover, #id_store a:hover {background: #F05854;}

#id_contact li *::before, #id_store a::before {font: 14px/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 a::before {content: '';}

#id_contact li {
  float: left;
  margin-right: 6px;
  position: relative;
}

#id_store h3, #id_store div, #id_store p:first-of-type {display: none;}
#id_store p:last-of-type {display: contents;}

/* Comments */

#id_comments :is(#alerts_banner, .date a, .dropBox, .deletecomment) {display: none;}
#id_comments #alert_container {display: contents;}
#id_comments p {margin: 0;}

#id_comments dl {
  clear: both;
  margin-top: 40px;
}

#id_comments dt {
  height: unset;
  line-height: inherit;
  text-align: inherit;
  padding: 0 0 4px 0;
  margin: 0 0 2px 0;
  border-bottom: 1px dashed #00000040;
}

#id_comments .username {
  float: none;
  display: inline;
}

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

/* Comments and Friends Links */

#id_comments h2 + div, #id_comments h2 ~ p, #id_friends h2 ~ p a {
  background: #56B0CC;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
}
#id_comments h2 + div, #id_comments h2 ~ p {width: calc(50% - 5px);}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a, #id_comments h2 ~ p a, #id_friends h2 ~ p a {
  display: block;
  color: #FFFFFF;
  font: 700 11px/29px 'Noto Serif', serif;
  text-align: center;
  text-transform: uppercase;
}
#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover, #id_friends h2 ~ p a:hover {background: #FF9595;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
  height: 100%;
  font-size: 0;
}
#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font-size: 11px;}
#id_comments h2 + div a::before {content: 'Post Comment';}
#id_comments h2 ~ p a::before {content: 'All Comments';}

#id_friends h2 ~ p a {
  width: 150px;
  top: -45px;
  left: 237px;
}

/* Friends */

#id_friends {
  bottom: 53px;
  left: 109px;
  overflow: visible;
}
#id_friends :is(p, span, div) {display: contents;}
#id_friends h2 ~ div {display: none;}

#id_friends li, #id_friends li a {
  width: 48px;
  height: 48px;
}

#id_friends li {
  background: #56B0CC;
  position: relative;
  margin-right: 10px;
  border: 2px solid #302026;
  border-radius: 50%;
  overflow: hidden;
  transition: background .5s ease-in-out;
}
#id_friends li:nth-of-type(3) {margin-left: 102px;}
#id_friends li:hover {background: #FF9595;}

#id_friends a {
  font-size: 0;
  position: absolute;
}

/* Big Friends */

#friendGroup, #friendGroup ul {display: grid;}

#friendGroup {
  display: grid;
  grid-template: max-content max-content / 1fr 1fr;
  gap: 20px;
  background: rgba(44,20,42,.6);
  width: 750px;
  color: #FFFFFF;
  padding: 20px;
  margin: 0;
  top: 50%;
  left: 50%;
  border-radius: 20px;
  box-shadow: 0 2px 5px #00000040;
  transform: translate(-50%, -50%);
}
#friendGroup h2 + a, #friendGroup .clear {display: none;}
#friendGroup p, #friendGroup ul {margin: 0;}
#friendGroup a {color: #FFFFFF;}
#friendGroup .pagination {justify-self: right;}

#friendGroup ul {
  grid-area: 2/1/3/3;
  grid-template-columns: repeat(9, max-content);
  grid-auto-rows: max-content;
  gap: 10px;
}

#friendGroup li {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background: #FFFFFF40;
  width: 70px;
  padding: 0 0 10px 0;
  border-radius: 10px;
  box-sizing: border-box;
}

#friendGroup span {
  display: block;
  max-width: 48px;
  text-overflow: ellipsis;
  margin: 5px 0;
  overflow: hidden;
}

#friendGroup img {
  background: #56B0CC;
  padding: 1px;
}

#friendGroup li, #friendGroup img {transition: background .5s ease-in-out;}
#friendGroup li:hover {background: #FF9595;}
#friendGroup li:hover img {background: #FFFFFF;}

/* Interests */

#id_interests h3 {
  font-size: 11px;
  text-transform: uppercase;
  padding: 0 0 4px 0;
  margin: 0 0 3px 0;
  border-bottom: 1px dashed #00000040;
}
#id_interests h3:nth-of-type(n+2) {margin-top: 10px;}
#id_interests a {text-transform: capitalize;}

#id_interests li::after {content: ',';}
#id_interests li:last-of-type::after {content: '.';}

#id_interests li:last-of-type::before {
  content: ' and ';
  text-transform: lowercase;
}

/* Visitors */

#id_footprints .item {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
}

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

/* Items */

#id_equipment, #id_wishlist {
  display: grid;
  grid-template-columns: repeat(2, 46px);
  grid-auto-rows: 46px;
  gap: 8px 10px;
  padding-left: 5px;
  scroll-snap-type: y mandatory;
}
:is(#id_equipment, #id_wishlist) .clear {display: none;}
.premium_sparkle {display: none;}

:is(#id_equipment, #id_wishlist) :is(.item, a) {
  width: 46px;
  height: 46px;
  box-sizing: border-box;
}

:is(#id_equipment, #id_wishlist) .item {
  position: relative;
  outline: 1px dotted #30202680;
  outline-offset: -6px;
  scroll-snap-align: start;
  transition: outline-color .5s ease-in-out;
}

:is(#id_equipment, #id_wishlist) a {
  display: block;
  background: #56B0CC;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #FFFFFF inset;
}

:is(#id_equipment, #id_wishlist) .item:hover {outline-color: #FFFFFF;}
:is(#id_equipment, #id_wishlist) .item:hover a {background: #FF9595;}

.owner_checkmark {
  background: url('https://i.imgur.com/UzAXOFf.png') 0 -88px;
  width: 0;
  padding: 10px 12px 0 0;
  margin: 0;
  bottom: 7px;
  left: 7px;
}

/* Forums */

#id_forum {
  backdrop-filter: blur(10px);
  background: #FFFFFFA0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 30px;
  bottom: 64px;
  left: 856px;
  border-radius: 10px;
}
#id_forum strong {font-weight: 400;}
#id_forum p {margin: 0;}

#id_forum p:nth-of-type(2)::before, #id_forum p:nth-of-type(2)::after {
  content: ' | ';
  font-weight: 700;
  white-space: pre;
}