Pro for Xygnus

/* Profile By AlthIndor */

:root {
  --color-primary: #00C0FF;
  --color-secndry: #FFFFFF;
  --star-size1: 11px;
  --star-size2: 9px;
  --star-size3: 7px;
  --top-offset: 30vh;
}

html, body {overflow: hidden;}

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

::selection {
  background: var(--color-primary);
  color: var(--color-secndry);
}

/* Animated Wallpaper */

@keyframes Twinkle {
  from {background-position-x: center, center, 0, 0, 0, 0, center, 0, center;}
  to {background-position-x: center, center, 0, 0, 40px, 40px, center, 0, center;}
}

html {
  background:
    url('https://images2.imgbox.com/80/a3/DeXlzZk1_o.png') center bottom fixed repeat-x,
    url('https://images2.imgbox.com/9d/bc/4eYvFW8G_o.png') center / auto 100% fixed no-repeat,
    linear-gradient(to bottom, #00284C00, #00284CFF),
    linear-gradient(to bottom, #00000000, #0080FF80),
    radial-gradient(circle at 33% 33%, #000000FF 20%, #00000000 40%) 0 20px / 40px 40px,
    radial-gradient(circle at 66% 66%, #000000FF 20%, #00000000 40%) 0 20px / 40px 40px,
    url('https://images2.imgbox.com/b9/28/TfW4Z4gg_o.png') center fixed,
    linear-gradient(to bottom, #00000080, #000000D0),
    url('https://images2.imgbox.com/56/5b/WnMC5efr_o.png') center fixed #000;
  background-blend-mode: normal, normal, screen, color, normal, normal, normal, normal, normal;
  animation: Twinkle 3s linear infinite;
}
body {background: none;}

/* Fonts */

@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: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.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');
}

@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');
}

/* Header */

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

#viewer #gaia_header {
  background: #00284CC0;
  height: 32px !important;
  box-shadow: 0 2px 3px #000;
  backdrop-filter: blur(2px);
}

#gaia_header #header_left, #gaia_header #header_right {
  background: none !important;
  font: 700 0/32px 'Open Sans', sans-serif !important;
  padding: 0 5px !important;
}
#gaia_header #header_right {float: right;}

#gaia_header img {
  background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  width: 0;
  padding: 0 34px 0 0;
  filter: invert(100%);
}

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

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

/* Columns */

#columns, #columns .column {
  float: unset;
  overflow: visible;
}

#columns .column {
  display: block;
  font-size: 0;
  margin: 0;
  position: absolute;
}

#columns {
  width: 40vh;
  height: 40vh;
  top: var(--top-offset);
  left: calc(50% - 20vh);
  transform: translateZ(0);
}

#column_1, #column_2 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#column_3 {
  width: 0;
  height: 0;
  right: calc(62.75%);
  bottom: calc(66.25%);
  border-radius: 10px;
}

#column_3:hover {
  width: 228px;
  height: 140px;
}

/* Constellation Lines */

#column_1 {
  background: #FFFFFF;
  clip-path: polygon(
    calc(37.25% + 0.85px) calc(33.75% - 0.85px),
    calc(49.75%) calc(53.5% - 1.5px),
    calc(75.25% - 0.88px) calc(34.25% - 0.88px),
    calc(81.75% - 0.92px) calc(8% - 0.92px),
    calc(88% - 0.77px) calc(.5% - 0.77px),
    calc(88% + 0.77px) calc(.5% + 0.77px),
    calc(81.75% + 0.92px) calc(8% + 0.92px),
    calc(75.25% + 0.88px) calc(34.25% + 0.88px),
    calc(49.75% + 2px) calc(53.5% + .5px),
    calc(69.75% + 0.73px) calc(73.25% - 0.73px),
    calc(92.5% + 0.75px) calc(98.5% - 0.75px),
    calc(92.5% - 0.75px) calc(98.5% + 0.75px),
    calc(69.75% - 0.73px) calc(73.25% + 0.73px),
    calc(49.75%) calc(53.5% + 2px),
    calc(30.5% + 0.64px) calc(77% + 0.64px),
    calc(7.25% + 0.45px) calc(88.75% + 0.45px),
    calc(7.25% - 0.45px) calc(88.75% - 0.45px),
    calc(30.5% - 0.64px) calc(77% - 0.64px),
    calc(49.75% - 2px) calc(53.5%),
    calc(37.25% - 0.85px) calc(33.75% + 0.85px)
  );
  opacity: 0.08;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: #000F1E;
  width: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: #FFFFFF40;}

.panel {
  scrollbar-color: #FFFFFF40 #000F1E;
  scrollbar-width: thin;
}

/* Panels */

.panel {
  background: none;
  color: #FFFFFF;
  font: 10px/1.4 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
}
#id_footprints, .media_panel {overflow: hidden;}

.panel h2 {display: none;}
.panel p {margin: 0;}

.panel a {
  display: block;
  color: var(--color-primary);
  font-weight: 600;
}
.panel a:hover {color: var(--color-secndry);}

/* Draw Stars */

#id_contact li:nth-of-type(odd), #id_comments h2 + div, .media_panel::before, #column_3::before {position: fixed;}
#column_2 *, #column_2 a::before, .media_panel::before, #column_3::before, #columns::after {border-radius: 50%;}
#column_2 * {font-size: 0;}

#column_2 a::before, #id_contact span, #id_comments .clear, .media_panel::before, #column_3::before, #columns::after {
  background: #A0A0A8;
  filter: drop-shadow(0 0 5px #FFFFFF80) drop-shadow(0 0 1px #FFFFFF80);
  transition: all .5s ease-in-out;
}

#column_2 a::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}

#column_2 a:hover::before, .media_panel:hover::before, #column_3:hover::before {
  background: #FFFFFF;
  filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 1px #FFFFFF);
}

#column_3::before {
  width: var(--star-size1);
  height: var(--star-size1);
}

#id_contact li:nth-of-type(2) *, #id_comments h2 + div *, #columns .media_panel, .media_panel::before, #columns::after {
  width: var(--star-size2);
  height: var(--star-size2);
}

#id_comments p a, #id_store a, #id_contact li:nth-of-type(odd) * {
  width: var(--star-size3);
  height: var(--star-size3);
}

#columns::after {
  content: '';
  position: absolute;
  top: calc(53.5% - (var(--star-size2) / 2));
  left: calc(49.75% - (var(--star-size2) / 2));
}

/* Write Texts */

#column_2 a::after, .media_panel::after, #column_3::after {
  width: max-content;
  font: 600 10px/1 'Open Sans', sans-serif;
  text-transform: uppercase;
  opacity: .15;
  transition: opacity .5s ease-in-out;
}
#column_2 a:hover::after, .media_panel:hover::after, #column_3:hover::after {opacity: 1;}
#column_2 a, .media_panel::after, #column_3::after {color: #FFFFFF;}
.media_panel::after, #column_3::after {position: fixed;}

#column_2 a::after {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

#id_comments p a::after, #id_comments div a::after, #id_contact li:nth-of-type(1) a::after, #column_3::after {padding-right: 7px;}
#id_comments p a::after, #id_comments div a::after, #id_contact li:nth-of-type(1) a::after {right: calc(100% - 1px);}
#id_contact li:nth-of-type(n+2) a::after, #id_store a::after, .media_panel::after {padding-left: 7px;}
#id_contact li:nth-of-type(n+2) a::after, #id_store a::after {left: calc(100% - 1px);}

#id_contact li:nth-of-type(1) a::after {content: 'Add Friend';}
#id_contact li:nth-of-type(2) a::after {content: 'Send PM';}
#id_contact li:nth-of-type(3) a::after {content: 'Open Trade';}
#id_comments p a::after {content: 'View Comments';}
#id_comments div a::after {content: 'Post Comment';}
#id_store a::after {content: 'Visit Store';}

#column_3::after {
  content: 'Recent Visitors';
  top: calc(33.75% - 5px);
  right: calc(62.75% + 4px);
}

.media_panel::after {
  content: '';
  font: 400 10px/1 'Font Awesome 5 Free', sans-serif;
  margin-top: -1px;
  top: calc(98.5% - 4px);
  left: calc(92.5% + 3px);
}

/* Contact */

#id_contact {
  top: calc(34.25% - (var(--star-size2) / 2));
  left: calc(75.25% - (var(--star-size2) / 2));
}
#id_contact span {display: block;}

#id_contact li:nth-of-type(1) {
  top: calc(8% - (var(--star-size3) / 2));
  left: calc(81.75% - (var(--star-size3) / 2));
}

#id_contact li:nth-of-type(3) {
  top: calc(0.5% - (var(--star-size3) / 2));
  left: calc(88% - (var(--star-size3) / 2));
}

/* Comments */

#id_comments {
  top: calc(88.75% - (var(--star-size3) / 2));
  left: calc(7.25% - (var(--star-size3) / 2));
}
#alerts_banner, #alert_container ~ div, #id_comments dl, #id_comments h2 ~ .clear {display: none;}

#alert_container {
  float: none;
  display: block;
  padding: 0;
}

#id_comments h2 + div {
  top: calc(77% - (var(--star-size2) / 2));
  left: calc(30.5% - (var(--star-size2) / 2));
}

/* Store */

#id_store {
  top: calc(73.25% - (var(--star-size3) / 2));
  left: calc(69.75% - (var(--star-size3) / 2));
}
#id_store h3, #id_store div, #id_store p:nth-last-of-type(2) {display: none;}
#id_store h2 ~ :not(p:last-of-type) {display: none;}

/* Visitors */

#id_footprints {
  background: #000;
  width: 0;
  height: 0;
  text-align: center;
  right: 18px;
  bottom: 10px;
  border: 0 solid transparent;
  border-radius: 5px;
  overflow-y: scroll;
  opacity: 0;
  transition: all 0s .5s linear, opacity .5s 0s ease-in-out;
}

#column_3:hover #id_footprints {
  width: 200px;
  height: 120px;
  border-width: 10px;
  opacity: 1;
  transition-delay: 0s, 0s;
}

#id_footprints .item {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
}
#id_footprints .item:nth-of-type(n+2) {margin-top: 7px;}
#id_footprints .item a {grid-column: span 2;}

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

#column_3::before {
  content: '';
  top: calc(33.75% - (var(--star-size1) / 2));
  left: calc(37.25% - (var(--star-size1) / 2));
}

/* Media */

.media_panel, .media_panel::before {
  top: calc(98.5% - (var(--star-size2) / 2));
  left: calc(92.5% - (var(--star-size2) / 2));
}

.media_panel::before {
  content: '';
  position: fixed;
  pointer-events: none;
}

.media_panel iframe {
  width: 300px;
  height: 200px;
  position: absolute;
  bottom: -11px;
  left: -22px;
  border-radius: 0 !important;
  opacity: .01;
}

/* Misc */

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