Pro for Pretty Twink

/* Layout by Mule of CD-ARIAx3 */
/* + Profile Code by AlthIndor */

html, body {
  background: url('https://i.imgur.com/W5z426b.jpg') center / cover;
  min-height: 980px;
}

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

#panel-details, #panel-details .hd, #columns, #columns::before, #column_2, #id_contact a, .custom_panel b::before {background: url('https://images2.imgbox.com/ac/86/FcFMT1mR_o.png');}
#panel-details, #panel-details .hd, #columns::before, #id_contact a, .custom_panel b::before {background-position-y: -980px;}
#panel-details {background-position-x: -435px;}
#panel-details .hd {background-position-x: -975px;}
#column_2 {background-position-x: -1200px;}

/* Fonts */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
  background: repeating-linear-gradient(-45deg, #FFF4 0px, #FFF4 1px, #0000 2px, #0000 5px, #FFF4 6px) #c88756;
  background-blend-mode: overlay, normal;
  height: 20px !important;
  border-bottom: 2px solid #FFFFFF;
  filter: drop-shadow(0 0 3px #402000);
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 4px;}

#gaia_header #header_left, #gaia_header #header_right {
  background: none;
  font: 700 0/42px 'Montserrat', sans-serif !important;
  padding: 0 4px !important;
  box-sizing: border-box;
}
#gaia_header #header_right {float: right;}

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

#gaia_header a {
  background: #402C1C;
  color: #FFFFFF !important;
  font-size: 11px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 6px 3px calc(6px + .1em);
  border: 2px solid #FFFFFF;
  border-radius: 5px;
}

#gaia_header a:hover {
  background: #FFFFFF;
  color: #000 !important;
}

/* Columns */

#panel-details, #columns, #columns .column {position: absolute;}
#columns {left: calc(50% - 600px);}
#column_2 {pointer-events: none;}
#column_3 {overflow: visible;}

#panel-details {
  width: 530px;
  height: 196px;
  top: 268px;
  left: calc(50% - 600px + 322px);
  transform: translateZ(0);
}

#columns, #columns .column {
  float: none;
  width: 1200px;
  top: 0;
  margin: 0;
}
#columns, #column_1, #column_2 {height: 980px;}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: #20100040;
  width: 0;
  height: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: #FFF;}

#id_wishlist {
  scrollbar-color: #FFF #20100040;
  scrollbar-width: thin;
}
#id_about ol, #id_comments dl {scrollbar-width: none;}

/* Panels */

.panel {
  background: none;
  font: 10px/1.65 'PT Serif', serif;
  text-align: center;
  padding: 0;
  margin: 0;
  position: absolute;
}
.panel h2 {display: none;}

.panel a {color: saddlebrown;}
.panel a:hover {color: #005488;}

.panel, #id_about ol, #id_comments dl {box-sizing: border-box;}
#id_about ol, #id_comments dl, #id_wishlist {overflow: hidden;}
#id_about img, #id_comments .postcontent img {max-width: 100%;}

#id_about h2 ~ ol:last-of-type, #id_comments dl {
 -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  border: 10px solid transparent;
  box-shadow: 0 0 2px #000;
  opacity: .001;
  overflow-y: scroll;
  transition: opacity .5s ease-in-out;
}
#id_about h2 ~ ol:last-of-type:hover, #id_comments dl:hover {opacity: 1;}

/* Details */

#id_details {
  top: 426px;
  right: 42px;
  filter: drop-shadow(0 0 5px #FFF);
}
#id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
#id_details p {margin: 0;}

/* Contact */

#id_contact {
  width: 79px;
  height: 266px;
  top: 564px;
  left: 208px;
}
#id_contact span, #id_contact li:nth-of-type(3) {display: none;}
#id_contact li::before, #id_contact a {position: absolute;}

#id_contact li::before {
  width: max-content;
  color: #FFFFFF;
  font: 400 8px/1 'Montserrat', sans-serif;
  letter-spacing: .2em;
  text-shadow: 1px 1px 1px #000;
}

#id_contact a {
  font-size: 0;
  filter: drop-shadow(0 0 5px #FFF);
  opacity: .001;
  transition: opacity .5s ease-in-out;
}
#id_contact a:hover {opacity: 1;}

#id_contact li:nth-of-type(1) a {
  background-position-x: -1515px;
  width: 46px;
  height: 62px;
  bottom: 0;
  right: 0;
}

#id_contact li:nth-of-type(1)::before {
  content: 'LET’S BE FRIENDS?';
  bottom: -15px;
  right: -40px;
}

#id_contact li:nth-of-type(2) a {
  background-position-x: -1570px;
  width: 50px;
  height: 39px;
  top: 0;
  left: 0;
}

#id_contact li:nth-of-type(2)::before {
  content: 'SEND ME A NOTE?';
  top: -15px;
  left: -22px;
}

/* About and Comments Links */

#id_about ol:first-of-type a, #id_comments h2 + div a::after, #id_comments h2 ~ p a::after {font: 700 8px/1 'Montserrat', sans-serif;}

#id_about ol:first-of-type a, #id_comments h2 + div a, #id_comments h2 ~ p a {
  background: #FCEADAD0;
  color: #605040;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 2px 1px #0008;
  transition: all .5s ease-in-out;
}

#id_about ol:first-of-type a:hover, #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
  background: #FFFFFF;
  color: indianred;
}

#id_comments h2 + div a, #id_comments h2 ~ p a {
  width: 38%;
  font-size: 0;
  position: absolute;
  bottom: -30px;
}
#id_comments h2 + div a {left: 0;}
#id_comments h2 ~ p a {right: 0;}

#id_comments h2 + div a::after {content: 'Post New';}
#id_comments h2 ~ p a::after {content: 'View All';}

/* About Me */

#id_about {
  width: 228px;
  height: 301px;
  top: 507px;
  right: 204px;
  transform: rotate(-3.2deg);
}
#id_about h2 ~ br {display: none;}

#id_about h2 ~ ol:first-of-type {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: -70px;
  overflow: visible;
}
#id_about h2 ~ ol:first-of-type br {display: none;}

#id_about h2 ~ ol:last-of-type {
  background: #FFFFFF30;
  border-width: 11px 10px;
}

/* Comments */

#id_comments {
  width: 178px;
  height: 259px;
  top: 537px;
  left: 482px;
  transform: rotate(4deg);
}

#id_comments #alerts_banner, #id_comments .dropBox, #id_comments dl + div {display: none;}
#id_comments #alert_container {padding: 0;}
#id_comments h2 ~ p, #id_comments dd:last-of-type {margin: 0;}
#id_comments dd {margin: 0 0 20px 0;}

#id_comments dt {
  height: auto;
  line-height: inherit;
  text-align: inherit;
  padding: 0 0 4px 0;
  margin: 0 0 2px 0;
  border-bottom: 1px dotted sienna;
}
#id_comments .username {float: none;}

/* Wish List */

#id_wishlist {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: 40px 40px;
  gap: 10px;
  width: 90px;
  height: 108px;
  top: 470px;
  left: 310px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
#id_wishlist .clear, .premium_sparkle {display: none;}

.owner_checkmark {
  margin: 0;
  bottom: 5px;
  left: 5px;
  mix-blend-mode: multiply;
}

#id_wishlist .item {
 -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #60A0B8C0;
  width: 30px;
  height: 30px;
  padding: 5px;
  position: relative;
  border-radius: 5px;
  transition: background .5s ease-in-out;
  scroll-snap-align: start;
}
#id_wishlist .item:hover {background: #FFFFFF;}

/* Media */

.media_panel {
  background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat;
  width: 30px;
  height: 30px !important;
  top: 349px;
  left: 499px;
  filter: invert(80%);
  mix-blend-mode: color-burn;
  overflow: hidden;
}

.media_panel iframe {
  width: 300px;
  height: 200px;
  position: absolute;
  bottom: -2px;
  left: -14px;
  opacity: .001;
}

/* Misc */

#pictures_container, #texts_container {
 width: 1px;
 height: 1px;
 position: absolute;
 top: 0;
 left: 50%;
 overflow: visible;
}
#equipped-item-details_mask:nth-of-type(2), #avatar_menu + div + div {display: none !important;}
#id_aquarium {display: none;}

/* Floating Art Animation */

@keyframes FloatArt {
  from {transform: translateY(-5px);}
  to {transform: translateY(15px);}
}

#columns::before {
  content: '';
  width: 425px;
  height: 466px;
  position: absolute;
  top: 452px;
  left: 47px;
  animation: FloatArt 3s ease-in-out infinite alternate;
}

/* Clouds Animation */

@keyframes MoveClouds {
  from {background-position-x: 0;}
  to {background-position-x: 2048px;}
}

@keyframes BlinkStars {
  from {background-position-x: -10px, 10px;}
  to {background-position-x: 30px, 50px;}
}

#panel-details div, #panel-details h2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

#panel-details .bd {
  background: url('https://images2.imgbox.com/f0/87/9ItiEDTn_o.png') left center / 2048px auto;
  opacity: .2;
  animation: MoveClouds 150s linear infinite;
  z-index: 1;
}

#panel-details .hd {
  mix-blend-mode: color-dodge;
  z-index: 2;
}

#panel-details .hd h2 {
  background: radial-gradient(circle at center, #000 8px, #0000 16px), radial-gradient(circle at center, #000 8px, #0000 16px);
  background-size: 40px 40px, 40px 40px;
  background-position: -10px -10px, 10px 10px;
  animation: BlinkStars 3s linear infinite;
}

/* Starshine Glitter */

@keyframes ScaleStars {
  from {transform: scale(1); opacity: 1;}
  to {transform: scale(0); opacity: 0;}
}

@keyframes SpinStars {
  from {transform: rotate(0turn);}
  to {transform: rotate(1turn);}
}

.custom_panel {
  width: 280px;
  height: 200px !important;
  top: 260px;
  left: 150px;
  filter: drop-shadow(0 0 5px cadetblue);
  mix-blend-mode: hard-light;
}

.custom_panel b, .custom_panel b::before {position: absolute;}
.custom_panel b {animation: ScaleStars 3s ease-in-out infinite alternate;}

.custom_panel b:nth-of-type(3n-2) {
  background-position-x: -1630px;
  width: 30px;
  height: 30px;
}

.custom_panel b:nth-of-type(3n-1) {
  background-position-x: -1670px;
  width: 20px;
  height: 20px;
}

.custom_panel b:nth-of-type(3n-0) {
  background-position-x: -1700px;
  width: 10px;
  height: 10px;
}

.custom_panel b::before {
  content: '';
  background-position-x: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  animation: SpinStars 2s linear infinite;
  animation-delay: inherit;
}

.custom_panel b:nth-of-type(01) {top: 015px; left: 155px; animation-delay: -0.8s;}
.custom_panel b:nth-of-type(02) {top: 009px; left: 057px; animation-delay: -0.1s;}
.custom_panel b:nth-of-type(03) {top: 029px; left: 210px; animation-delay: -0.4s;}
.custom_panel b:nth-of-type(04) {top: 122px; left: 014px; animation-delay: -2.1s;}
.custom_panel b:nth-of-type(05) {top: 052px; left: 228px; animation-delay: -1.5s;}
.custom_panel b:nth-of-type(06) {top: 169px; left: 217px; animation-delay: -0.5s;}
.custom_panel b:nth-of-type(07) {top: 106px; left: 153px; animation-delay: -0.1s;}
.custom_panel b:nth-of-type(08) {top: 147px; left: 099px; animation-delay: -0.5s;}
.custom_panel b:nth-of-type(09) {top: 032px; left: 125px; animation-delay: -0.8s;}
.custom_panel b:nth-of-type(10) {top: 087px; left: 163px; animation-delay: -2.4s;}
.custom_panel b:nth-of-type(11) {top: 058px; left: 148px; animation-delay: -0.0s;}
.custom_panel b:nth-of-type(12) {top: 006px; left: 084px; animation-delay: -2.7s;}
.custom_panel b:nth-of-type(13) {top: 152px; left: 007px; animation-delay: -2.4s;}
.custom_panel b:nth-of-type(14) {top: 087px; left: 244px; animation-delay: -0.2s;}
.custom_panel b:nth-of-type(15) {top: 144px; left: 158px; animation-delay: -2.0s;}