Pro for Seth Vondee

/* Graphics by Cassiel Socks, Code by AlthIndor */

html, body {
  background: url(https://i.imgur.com/rZvp7QV.jpg) fixed center / cover #000;
  min-height: 900px;
  overflow-x: hidden;
}
body {position: relative;}

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

#columns, #column_1 .panel, #column_1 h2, .custom_panel b {background: url('https://i.imgur.com/fnK8Wks.png') border-box;}
#id_contact li, #id_comments h2 + div a {background: url('https://i.imgur.com/TnEN5nQ.png') border-box, url('https://i.imgur.com/fnK8Wks.png') border-box;}
#column_1 .panel {background-position: 0 -810px;}
#column_1 h2 {background-position: -443px 0;}

/* 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: 'Cookie';
  font-style: normal;
  font-weight: 400;
  src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v11/syky-y18lb0tSbf9kgqS.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
  background: #0004;
  height: 30px !important;
  border-bottom: 1px solid #0008;
  box-shadow: 0 1px 5px #0006;
}

#gaia_header #header_left, #gaia_header #header_right {background: none;}
#gaia_header li.spacer {display: none !important;}

#gaia_header #header_left, #gaia_header #header_right {
  font: 400 0/32px 'Cookie', cursive !important;
  padding: 0 8px !important;
  box-sizing: border-box;
}
#gaia_header #header_right {float: right;}

#gaia_header img {
 -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 1px;
  mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 1px;
  background: #FFF;
  width: 0;
  padding: 0 37px 0 0;
  margin: 0 -1px 0 0;
  transition: background .5s ease-in-out;
}
#header_left li:nth-of-type(n+2) a:hover img {background: navajowhite;}

#gaia_header a {
  color: #FFF !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
#gaia_header a:hover {color: navajowhite !important;}

#header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
  content: '✦';
  font-size: 14px;
  margin: 0 7px;
  opacity: .5;
}

/* Columns */

#columns, #column_1, #column_2, #column_3 {
  float: none;
  position: absolute;
  margin: 0;
}

#columns, #column_3 {
  width: 1180px;
  height: 810px;
}
#columns, #column_2 {overflow: visible;}
#column_3 {pointer-events: none;}

#columns {
  top: calc(50% - 405px);
  left: calc(50% - 590px);
}

#column_1 {
  width: 545px;
  height: 630px;
  top: 136px;
  left: 3px;
  contain: content;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: #FFF8;
  width: 7px;
}

#columns ::-webkit-scrollbar-thumb {
  background: navajowhite content-box;
  border: 1px solid transparent;
}

.panel {
  scrollbar-color: navajowhite #FFF8;
  scrollbar-width: thin;
}

/* Panels */

.panel, .panel h2 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#column_1 .panel, .media_panel {overflow: hidden;}
#column_2 h2, #column_3 h2 {display: none;}

.panel {position: absolute;}
.panel a {color: crimson;}
.panel a:hover {color: slateblue;}

#column_1 .panel {
  width: 443px;
  height: 530px;
  color: #604020;
  font: 11px/1.8 'PT Serif', serif;
  top: -100%;
  right: 0;
  border: 20px solid transparent;
}
#column_1 .panel:hover {top: 0;}

#id_about, #id_comments, #id_wishlist {
  text-align: justify;
  overflow-y: scroll !important;
}
#id_about, #id_comments {padding-right: 15px;}
#id_about img, #id_comments .postcontent img {max-width: 100%;}

#id_footprints, #id_signature {
  text-align: center;
  overflow-y: auto !important;
}

#column_3 .panel {
  background: none;
  width: 100%;
  height: 100%;
}

.bbcode-swapping-image {mix-blend-mode: multiply;}

/* Panel Headers */

.panel h2 {
  width: 105px;
  height: 90px;
  font-size: 0;
  position: fixed;
  left: 0;
  filter: brightness(100%);
  transition: filter .5s ease-in-out;
}
.panel h2:hover {filter: brightness(120%);}

#id_about h2 {
  background-position-y: -805px;
  top: 40px;
}

#id_comments h2 {
  background-position-y: -891px;
  top: 130px;
}

#id_wishlist h2 {
  background-position-y: -978px;
  top: 220px;
}

#id_footprints h2 {
  background-position-y: -1064px;
  top: 310px;
}

#id_signature h2 {
  background-position-y: -1150px;
  top: 400px;
}

/* Contact Buttons */

#id_contact {
  background: none;
  width: max-content;
  top: 700px;
  left: 326px;
}

#id_contact li, #id_contact li a, #id_comments h2 + div a {
  width: 40px;
  height: 40px;
  font-size: 0;
}

#id_contact li, #id_comments h2 + div a {
  background-position: center 0, 0px -1300px;
  background-size: 40px auto, auto;
  background-blend-mode: overlay, normal;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px #60402060 inset;
  filter: brightness(100%) drop-shadow(0 2px 3px #0008);
  transition: filter .5s ease-in-out;
}
#id_contact li:hover, #id_comments h2 + div a:hover {filter: brightness(120%) drop-shadow(0 2px 3px #0008);}

#id_contact li {
  float: left;
  margin: 0 5px;
}
#id_contact li:nth-of-type(1) {background-position-y: 2px, -900px;}
#id_contact li:nth-of-type(2) {background-position-y: -38px, -1000px;}
#id_contact li:nth-of-type(3) {background-position-y: -78px, -1100px;}

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

#id_comments h2 + div a {
  background-position-y: -237px, -1200px;
  position: fixed;
  top: 564px;
  left: 490px;
}

/* Comments */

#id_comments #alert_container, #id_comments dt {padding: 0;}
#id_comments #alerts_banner, #id_comments h2 ~ p {display: none;}
#id_comments #alert_container {float: none;}
#id_comments dd {margin: 0 0 15px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dt {
  height: 1.5em;
  line-height: 1;
  margin: 0 0 3px 0;
  border-bottom: 1px dotted #60402060;
}
#id_comments .date {opacity: .75;}
#id_comments .date a {font-weight: 400;}

#id_comments .dropBox {
  background: #FFF8;
  width: 48px;
  height: 48px;
  margin: 3px 10px 0 0;
  border: 1px solid;
  overflow: hidden;
}

#id_comments .dropBox img {
  width: 120px;
  height: 150px;
  margin: -30px 0 0 -45px;
}

/* Wish List */

#id_wishlist {
  display: grid;
  grid-template-columns: repeat(6, 50px);
  grid-auto-rows: 50px;
  gap: 12px 15px;
  scroll-snap-type: y mandatory;
}
#id_wishlist .clear, .premium_sparkle {display: none;}

#id_wishlist .item {
  background: snow;
  width: 30px;
  height: 30px;
  padding: 8px;
  position: relative;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #60402060 inset;
  outline: 1px dotted #60402040;
  outline-offset: -6px;
  transition: all .5s ease-in-out;
  filter: drop-shadow(0 2px 3px #0002);
  scroll-snap-align: start;
}

#id_wishlist .item:hover {
  background: crimson;
  box-shadow: 0 0 0 1px #FFF inset;
  outline-color: #FFF;
}

.owner_checkmark {
  margin: 0;
  bottom: 8px;
  left: 8px;
  mix-blend-mode: difference;
}

/* Visitors */

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

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

#id_footprints .item a {text-transform: capitalize;}
#id_footprints .item::after {content: '.';}

/* Media */

.media_panel {
  background: url('https://i.imgur.com/gqTTTvw.png') -21px -6px;
  width: 70px;
  height: 32px !important;
  top: 706px;
  left: 255px;
  filter: drop-shadow(0 2px 3px #0008);
}

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

/* Character Animation */

@keyframes SwitchCharacter {
  0% {opacity: 0;}
  2% {opacity: 1;}
  16% {opacity: 1;}
  18% {opacity: 0;}
  100% {opacity: 0;}
}

#columns::after, .custom_panel b, .custom_panel i {position: absolute;}
.custom_panel br {display: none;}

.custom_panel b {
  width: 505px;
  height: 645px;
  top: 69px;
  left: 555px;
  animation: SwitchCharacter 54960ms linear infinite both;
}

.custom_panel b:nth-of-type(1) {
  background-position: -1180px 0;
  animation-delay: 0ms;
}

.custom_panel b:nth-of-type(2) {
  background-position: -1685px 0;
  animation-delay: 9160ms;
}

.custom_panel b:nth-of-type(3) {
  background-position: -2190px 0;
  animation-delay: 18320ms;
}

.custom_panel b:nth-of-type(4) {
  background-position: -1180px -645px;
  animation-delay: 27480ms;
}

.custom_panel b:nth-of-type(5) {
  background-position: -1685px -645px;
  animation-delay: 36640ms;
}

.custom_panel b:nth-of-type(6) {
  background-position: -2190px -645px;
  animation-delay: 45800ms;
}

#columns::after {
  content: url('https://i.imgur.com/3InUPRm.gif');
  top: 45px;
  left: 310px;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Star Animation */

.custom_panel span {
  filter: drop-shadow(0 0 3px #FFF) drop-shadow(0 0 10px #FFF);
  mix-blend-mode: overlay;
}

@keyframes FlickerStars {
  0% {opacity: 0;}
  33% {opacity: 1;}
  66% {opacity: 1;}
  100% {opacity: 0;}
}

.custom_panel i {
  background: #FFF;
  width: 50px;
  height: 50px;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: FlickerStars 3s ease-in-out infinite both;
}

.custom_panel i:nth-of-type(01) {top: 0699px; left: 0090px; transform: scale(0.12) rotate(19deg); animation-delay: 2.2s;}
.custom_panel i:nth-of-type(02) {top: 0304px; left: 0688px; transform: scale(0.24) rotate(74deg); animation-delay: 0.5s;}
.custom_panel i:nth-of-type(03) {top: 0044px; left: 0439px; transform: scale(0.16) rotate(88deg); animation-delay: 2.5s;}
.custom_panel i:nth-of-type(04) {top: 0729px; left: 0042px; transform: scale(0.22) rotate(27deg); animation-delay: 1.3s;}
.custom_panel i:nth-of-type(05) {top: 0119px; left: 0391px; transform: scale(0.27) rotate(58deg); animation-delay: 2.5s;}
.custom_panel i:nth-of-type(06) {top: 0186px; left: 0576px; transform: scale(0.47) rotate(75deg); animation-delay: 1.5s;}
.custom_panel i:nth-of-type(07) {top: 0267px; left: 1065px; transform: scale(0.24) rotate(66deg); animation-delay: 1.0s;}
.custom_panel i:nth-of-type(08) {top: 0446px; left: 0671px; transform: scale(0.36) rotate(47deg); animation-delay: 1.2s;}
.custom_panel i:nth-of-type(09) {top: 0689px; left: 1115px; transform: scale(0.29) rotate(31deg); animation-delay: 2.5s;}
.custom_panel i:nth-of-type(10) {top: 0028px; left: 0498px; transform: scale(0.45) rotate(85deg); animation-delay: 1.5s;}
.custom_panel i:nth-of-type(11) {top: 0440px; left: 0699px; transform: scale(0.31) rotate(83deg); animation-delay: 2.3s;}
.custom_panel i:nth-of-type(12) {top: 0725px; left: 0596px; transform: scale(0.33) rotate(35deg); animation-delay: 0.3s;}
.custom_panel i:nth-of-type(13) {top: 0327px; left: 1025px; transform: scale(0.22) rotate(37deg); animation-delay: 0.3s;}
.custom_panel i:nth-of-type(14) {top: 0136px; left: 0820px; transform: scale(0.27) rotate(40deg); animation-delay: 2.0s;}
.custom_panel i:nth-of-type(15) {top: 0526px; left: 1090px; transform: scale(0.25) rotate(81deg); animation-delay: 2.8s;}
.custom_panel i:nth-of-type(16) {top: 0707px; left: 1069px; transform: scale(0.43) rotate(40deg); animation-delay: 1.4s;}
.custom_panel i:nth-of-type(17) {top: 0206px; left: 0757px; transform: scale(0.41) rotate(63deg); animation-delay: 1.3s;}
.custom_panel i:nth-of-type(18) {top: 0437px; left: 0775px; transform: scale(0.41) rotate(88deg); animation-delay: 1.6s;}
.custom_panel i:nth-of-type(19) {top: 0368px; left: 0959px; transform: scale(0.48) rotate(01deg); animation-delay: 1.4s;}
.custom_panel i:nth-of-type(20) {top: 0611px; left: 0828px; transform: scale(0.45) rotate(51deg); animation-delay: 0.0s;}
.custom_panel i:nth-of-type(21) {top: 0053px; left: 0298px; transform: scale(0.10) rotate(12deg); animation-delay: 1.5s;}
.custom_panel i:nth-of-type(22) {top: 0702px; left: 0155px; transform: scale(0.47) rotate(49deg); animation-delay: 0.1s;}
.custom_panel i:nth-of-type(23) {top: 0570px; left: 0586px; transform: scale(0.39) rotate(85deg); animation-delay: 0.1s;}
.custom_panel i:nth-of-type(24) {top: 0131px; left: 0089px; transform: scale(0.16) rotate(86deg); animation-delay: 0.6s;}
.custom_panel i:nth-of-type(25) {top: 0669px; left: 0835px; transform: scale(0.27) rotate(45deg); animation-delay: 2.9s;}
.custom_panel i:nth-of-type(26) {top: 0596px; left: 1055px; transform: scale(0.20) rotate(62deg); animation-delay: 0.5s;}
.custom_panel i:nth-of-type(27) {top: 0192px; left: 0813px; transform: scale(0.12) rotate(55deg); animation-delay: 1.0s;}
.custom_panel i:nth-of-type(28) {top: 0683px; left: 0115px; transform: scale(0.26) rotate(11deg); animation-delay: 2.8s;}
.custom_panel i:nth-of-type(29) {top: 0395px; left: 0900px; transform: scale(0.39) rotate(69deg); animation-delay: 1.2s;}
.custom_panel i:nth-of-type(30) {top: 0080px; left: 0518px; transform: scale(0.48) rotate(49deg); animation-delay: 1.9s;}
.custom_panel i:nth-of-type(31) {top: 0102px; left: 0980px; transform: scale(0.25) rotate(22deg); animation-delay: 2.0s;}
.custom_panel i:nth-of-type(32) {top: 0272px; left: 0880px; transform: scale(0.33) rotate(39deg); animation-delay: 1.5s;}
.custom_panel i:nth-of-type(33) {top: 0414px; left: 0573px; transform: scale(0.33) rotate(87deg); animation-delay: 1.4s;}
.custom_panel i:nth-of-type(34) {top: 0061px; left: 0018px; transform: scale(0.47) rotate(61deg); animation-delay: 2.7s;}
.custom_panel i:nth-of-type(35) {top: 0069px; left: 1100px; transform: scale(0.24) rotate(16deg); animation-delay: 2.2s;}
.custom_panel i:nth-of-type(36) {top: 0679px; left: 0737px; transform: scale(0.34) rotate(39deg); animation-delay: 2.6s;}
.custom_panel i:nth-of-type(37) {top: 0690px; left: 0191px; transform: scale(0.28) rotate(12deg); animation-delay: 1.6s;}
.custom_panel i:nth-of-type(38) {top: 0121px; left: 0647px; transform: scale(0.10) rotate(82deg); animation-delay: 2.2s;}
.custom_panel i:nth-of-type(39) {top: 0731px; left: 0840px; transform: scale(0.13) rotate(80deg); animation-delay: 1.5s;}
.custom_panel i:nth-of-type(40) {top: 0035px; left: 0954px; transform: scale(0.19) rotate(82deg); animation-delay: 0.9s;}
.custom_panel i:nth-of-type(41) {top: 0292px; left: 1077px; transform: scale(0.33) rotate(86deg); animation-delay: 0.3s;}
.custom_panel i:nth-of-type(42) {top: 0452px; left: 0667px; transform: scale(0.36) rotate(31deg); animation-delay: 0.5s;}
.custom_panel i:nth-of-type(43) {top: 0679px; left: 0890px; transform: scale(0.42) rotate(29deg); animation-delay: 1.5s;}
.custom_panel i:nth-of-type(44) {top: 0015px; left: 0808px; transform: scale(0.24) rotate(44deg); animation-delay: 2.0s;}
.custom_panel i:nth-of-type(45) {top: 0317px; left: 0857px; transform: scale(0.24) rotate(29deg); animation-delay: 2.2s;}
.custom_panel i:nth-of-type(46) {top: 0663px; left: 1125px; transform: scale(0.46) rotate(78deg); animation-delay: 0.6s;}
.custom_panel i:nth-of-type(47) {top: 0687px; left: 0240px; transform: scale(0.11) rotate(35deg); animation-delay: 2.1s;}
.custom_panel i:nth-of-type(48) {top: 0060px; left: 0110px; transform: scale(0.41) rotate(72deg); animation-delay: 0.9s;}
.custom_panel i:nth-of-type(49) {top: 0274px; left: 0829px; transform: scale(0.30) rotate(42deg); animation-delay: 1.4s;}
.custom_panel i:nth-of-type(50) {top: 0306px; left: 0689px; transform: scale(0.38) rotate(70deg); animation-delay: 1.3s;}