Pro for Sybele

/* By Lady Saxophone */
/* Code By AlthIndor */

:root {
  --color-primary: #F4C480;
  --color-secndry: #FFFFFF;
  --top-offset: calc(50% - 400px);
}

@media screen and (max-width: 1024px) {
  html, body {min-width: 1600px;}
}

html, body {
  background: url('https://i.ibb.co/cDGYty0/sybele-wallpaper.jpg') center / cover #A8A8B8;
  min-height: 1000px;
  overflow-x: hidden;
}
body {position: relative;}

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

::selection {
  background: #FFFFFF;
  color: #33335A;
}

* {cursor: url('https://i.ibb.co/7yySYsk/moon-cursor.png'), auto !important;}
a, button {cursor: url('https://i.ibb.co/M9LfHfg/star-cursor.png'), auto !important;}

#columns, #id_contact li {background: url('https://i.ibb.co/T1c6xj9/sybele-layout.png');}
#id_contact li {background-position-y: -804px;}

/* Fonts */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Header */

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

#gaia_header #header_left, #gaia_header #header_right {
  font: 0/30px 'Lato', sans-serif !important;
  padding: 0 5px !important;
  filter: drop-shadow(0 0 4px #FFFFFF);
}
#gaia_header #header_right {float: right;}

#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;
  transition: background .5s ease-in-out;
}
#header_left li:nth-of-type(n+2) a:hover img {background: #FFE4AE;}

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

/* Columns */

#columns, #columns .column {
  float: revert;
  overflow: revert;
}

#columns {
  width: 1560px;
  height: 800px;
  top: var(--top-offset);
  left: calc(50% - 780px);
}

#columns .column {
  width: revert;
  margin: revert;
  position: absolute;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: #FFFFFF20;
  width: 7px;
}
#columns ::-webkit-scrollbar-thumb {background: #FFFFFF40;}

.panel {
  scrollbar-color: #FFFFFF80 #FFFFFF20;
  scrollbar-width: thin;
}

/* Panels */

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

.panel a {color: var(--color-primary);}
.panel a:hover {color: var(--color-secndry);}

#id_about, #id_equipment, #id_wishlist, #id_comments, #id_footprints {
  padding-right: 14px;
  border: 7px solid transparent;
  overflow-y: scroll;
}
#id_details, #id_equipment, #id_wishlist, #id_comments {left: 210px;}
#id_wishlist {border-width: 0 7px;}
#id_equipment {width: 120px;}

#id_about {
  width: 340px;
  height: 290px;
  top: 160px;
  left: 370px;
}
#id_about img, #id_comments .postcontent img {max-width: 100%;}

/* Details */

#id_details {top: 160px;}
#id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
#id_details p {margin: 0;}

/* Contact */

#id_contact {
  width: 230px;
  top: 69px;
  left: 549px;
  overflow: visible;
}
#id_contact span {display: none;}

#id_contact li, #id_contact a {
  width: 52px;
  height: 52px;
}

#id_contact li {
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #000, 0 0 1px 1px inset #000, 0 0 25px #FFFFFF;
  opacity: .001;
  overflow: hidden;
  transition: all .5s ease-in-out;
}
#id_contact li:hover {opacity: 1;}

#id_contact li {
  float: left;
  margin: 0 18px 0 0;
  position: relative;
}

#id_contact li:nth-of-type(1) {background-position-x: -4px;}
#id_contact li:nth-of-type(2) {background-position-x: -74px;}
#id_contact li:nth-of-type(3) {background-position-x: -144px;}

#id_contact a {
  font-size: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Comments */

#id_comments {
  width: 350px;
  height: 180px;
  top: 570px;
}

#id_comments #alerts_banner, #id_comments .dropBox {display: none;}
#id_comments #alert_container {padding: 0;}

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

#id_comments dt {
  height: revert;
  line-height: revert;
  padding: 0 0 3px 0;
  margin: 0 0 2px 0;
  border-bottom: 1px solid #FFFFFF40;
}

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

/* Comments Links */

#id_comments h2 + div, #id_comments h2 ~ p {
  background: linear-gradient(to bottom, #FFE4AE 20px, #FFE4AE00 20px), var(--color-primary);
  width: calc(50% - 7px);
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #B08450 inset;
  transition: filter .5s ease-in-out
}
#id_comments h2 + div:hover, #id_comments h2 ~ p:hover {filter: saturate(0);}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
  color: #33335A;
  font-size: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}

#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {
  font-size: 12px;
  line-height: 28px;
  text-transform: uppercase;
}
#id_comments h2 + div a::before {content: 'Post Comment';}
#id_comments h2 ~ p a::before {content: 'View Comments';}

/* Item Tiles */

#id_wishlist, #id_equipment {
  display: grid;
  grid-auto-rows: 38px;
  gap: 7px;
  text-align: center;
  scroll-snap-type: y mandatory;
}
#id_wishlist .clear, #id_equipment .clear, .premium_sparkle {display: none;}

#id_wishlist {
  grid-template-columns: repeat(10, 1fr);
  width: 500px;
  height: 40px;
  top: 490px;
}

#id_equipment {
  grid-template-columns: repeat(2, 1fr);
  height: 100px;
  top: 350px;
}

#id_wishlist .item, #id_equipment .item {
  background: #FFFFFF40;
  width: 100%;
  height: 30px;
  padding: 5px 0;
  border-radius: 10px;
  position: relative;
  scroll-snap-align: start;
  transition: background .5s ease-in-out;
}
#id_wishlist .item:hover, #id_equipment .item:hover {background: #FFFFFF;}

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

/* Visitors */

#id_footprints {
  width: 200px;
  height: 180px;
  text-align: center;
  padding: 0;
  top: 570px;
  left: 600px;
}
#id_footprints .item:nth-of-type(n+2) {margin-top: 5px;}

#id_footprints .item {
  display: grid;
  grid-auto-flow: row;
  justify-items: center;
}
#id_footprints .item a {width: max-content;}

/* Misc */

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

#equipped-item-details_mask:nth-of-type(2), #avatar_menu + div + div {display: none !important;}
#id_forum, #id_house {display: none;}