@keyframes glow {
  from {
    text-shadow: 0 0 5px #FFF;
    color: #FFF;
  }
  to {
    text-shadow: 0 0 1px #FFF; 
    color: inherit;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@font-face {
  font-family: "Pixelated";
  src: url("/media/pixelated.otf") format("opentype");
}
body, html {
  background-color: #333;
  background-image: url('nightscape.gif');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  margin: 0;
  box-sizing: border-box;
  font-family: MS Gothic, Arial;
  color: #EAEAEA;
  font-size: 10pt;
  scrollbar-color: #111 transparent;
  scrollbar-width: thin;
}
body:has(#spotlight) {
  cursor: none !important;
}
body:after {
  content: " ";
  display: block;
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  background: linear-gradient(#000 50%, transparent 50%);
  background-size: 100% 2px;
  background-repeat: repeat;
  opacity: 0.25;
  z-index: 9999999999999999;
  pointer-events: none;
  touch-action: none; 
  overflow: clip;
}
body:before {
  content: " ";
  display: block;
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  background: radial-gradient(transparent, #000);
  opacity: 0.5;
  z-index: 9999999999999;
  pointer-events: none;
  touch-action: none; 
}
#metabody, #main {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /*width: 100vw;*/
  height: 100vh;
  overflow: clip;
  box-sizing: border-box;
}
#main {
  height: unset;
  position: relative;
  z-index: 5;
  overflow: visible;
}
h1, h2, h3 {
  font-family: MS Gothic, Verdana;
}
h1 {
  position: relative;
  width: fit-content;
  font-size: 17pt;
  font-weight: bolder;
  max-width: 85%;
}
h2 {
  font-size: 14pt;
}
a {
  color: #FFF;
}
a:visited {
  color: #AAA;
}
a:hover {
  color: #DCF !important;
}
#userDetails {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: absolute;
  left: 0;
  bottom: calc(100% + 5px);
  width: 100%;
  height: 10vh;
  box-sizing: border-box;
  font-family: MS Gothic, Arial;
  font-size: 2em;
  color: #FFF;
}
#userDetails p {
  margin: 0;
  width: 50%;
}
#transaction_info {
  text-align: right;
  font-size: 10pt;
  transition: all 750ms ease;
}
#transaction_info.hidden {
  transform: translateY(-25px);
  opacity: 0;
}
#transaction_info.visible {
  transform: translateY(0);
  opacity: 1;
}
#chat {
  height: 80vh;
  width: 50vw;
  max-width: 500px;
  max-height: 500px;
  border: none;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#chattable {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px #000;
  border-radius: 10px;
  border: none;
}
#setName {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-top: 5px;
  background: #333;
  border-radius: 10px;
  box-shadow: 1px 1px 3px #000;
  color: #FFF;
  font-family: MS Gothic, Arial;
}
#setName > span {
  flex: 0 0 auto;
  padding: 5px;
}
#setNameInput {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  color: #FFF;
  font-family: MS Gothic, Arial;
  line-height: 15px;
  padding: 5px;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
}
#setNameInput::placeholder {
  color: #777;
}
#info {
  display: flex;
  flex-direction: column;
  height: 80vh;
  width: 50vw;
  max-width: 500px;
  max-height: 500px;
  border: none;
  border-radius: 10px;
  box-shadow: 1px 1px 3px #000;
  box-sizing: border-box;
  background: #333;
  overflow: auto;
}
#info * {
  margin: 3px;
}
#bottom::-webkit-scrollbar, #bottom::-webkit-scrollbar-track, body::-webkit-scrollbar, body::-webkit-scrollbar-track  {
  background: transparent;
  background-color: transparent;
}
#bottom::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: #222;
  background-color: #222;
}
#top {
  flex: 0 0 auto;
  background-color: #857fa9;
  z-index: 2;
  font-weight: normal;
}
#top > h1 {
font-size: 24pt;
}
#top > p {
  font-size: 12pt;
}
#top a {
  color: #333;
}
#top, #bottom {
  width: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  scrollbar-color: #222 transparent;
  scrollbar-width: thin;
}
#bottom {
  flex: 1;
  z-index: 1;
}
details > summary::marker {
  content: "\271B";
  font-size: 15pt;
  padding: 2px;
}
details[open] > summary::marker {
  content: "\268A";
  font-size: 14pt;
}
summary {
  cursor: pointer;
  margin: 0 !important;
}
#bottom summary h2, #bottom summary p {
  display: inline;
  padding: 0;
}
#bottom > details {
  border-left: solid 2px transparent;
  padding: 5px;
}
#bottom > details + details {
  margin-top: 10px;
}
#bottom > details[open] {
  border-color: #FFF;
  background: rgba(255, 255, 255, 0.05);
}

#chattable {
  user-select: none;
  backdrop-filter: blur(7px);
}
#playSfx {
  position: absolute;
  left: calc(100% + 5px);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10pt;
  margin: 0;
}
ul {
  padding-left: 15px;
}
li {
  margin: 5px !important;
  font-style: italic;
}
#playSfx > img {
  height: 50%;
  max-height: 15pt;
  cursor: pointer;
}
.muted {
  filter: sepia(1) hue-rotate(-70deg) saturate(100);
}
#buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}
#buttons img {
  transition: transform 250ms ease;
}
#buttons img:hover {
  transform: scale(1.25);
}
#glow {
  animation: glow 1000ms infinite alternate ease;
}

footer {
  display: block;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  background-color: #333;
  position: relative;
  z-index: 6;
}
footer > p {
  margin: 0;
}
footer > p:nth-child(1) {
  float: right;
}
.achievementItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #555;
  overflow: clip;
  filter: grayscale(100%);
  position: relative;
}
.obtainedAchievementItem {
  filter: grayscale(0) !important;
}
.obtainedAchievementItem .achievementItemReward {
  text-decoration: line-through;
}
.obtainedAchievementItem .achievementItemReward:after {
  display: inline-block;
  content: "COMPLETED";
  color: #3F1;
  margin-left: 10px;
  text-decoration: none;
}
.achievementItemIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
  border: solid 1px #555;
  color: #AAA;
}
.achievementItemInfo {
  height: 100%;
  text-align: left;
  display: block;
  width: 100%;
}
.achievementItemTitle {
  display: block;
  width: 100%;
  white-space: nowrap;
  height: 50%;
  font-weight: bolder;
  font-size: 12pt;
}
.achievementItemReward {
  height: 50%;
  font-size: 10pt;
  font-weight: lighter;
}
#achievementItem-flamed .achievementItemIcon {
  background-image: url(/media/flames.gif);
  background-size: 50px 100%;
  background-repeat: repeat;
}
#achievementItem-moonLanding .achievementItemIcon {
  background-image: url(/moon.png);
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-credited .achievementItemIcon {
  background-image: url(/media/heart.png);
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-all .achievementItemIcon {
  background-image: url(/media/trophy.png);
  background-size: auto 90%;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-relaxed .achievementItemIcon {
  background-image: url(/audio.png);
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-hour .achievementItemIcon {
  background-image: url(/media/clock-3.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-halfHour .achievementItemIcon {
  background-image: url(/media/clock-2.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-qtrHour .achievementItemIcon {
  background-image: url(/media/clock-1.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-engaged .achievementItemIcon {
  background-image: url(/media/pointer.webp);
  background-size: auto 75%;
  background-repeat: no-repeat;
  background-position: center;
}
#achievementItem-donator .achievementItemIcon {
  background-image: url(/media/donator.png);
  background-size: 50px 100%;
  background-repeat: repeat;
}
#achievementItem-embarassing .achievementItemIcon {
  background-image: url(/media/embarassed.png);
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: center;
}
.subcategory + .subcategory {
  margin-top: 10px
}
.store {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  border: solid 1px #333;
  border-radius: 5px;
  padding-bottom: 8px;
  text-align: center;
}
.storeItemWrapper {
  overflow: clip;
  contain: layout paint;
  padding-bottom: 10px;
}
.storeItem {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  margin: 0 !important;
  position: relative;
  cursor: pointer;
  border: solid 1px #555;
  padding: 10px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.5);
}
.inlineItem {
  display: inline;
  height: 15pt;
  width: auto;
}
.storeItem > .price {
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.price s {
  text-decoration-thickness: 2px;
  color: #F22;
}
.storeItem > .price > button {
  border: none;
  outline: none !important;
  background: #F92;
  color: #FFF;
  font-weight: bold;
  border-radius: 5px;
  margin: 0 !important;
  cursor: pointer;
}
.onsale:after {
  content: "SALE SALE SALE SALE SALE SALE SALE";
  color: #FFF;
  border-top: solid 1px #FFF;
  border-bottom: solid 1px #FFF;
  background: #F00;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 150%;
  transform: rotate(45deg);
  transform-origin: bottom right;
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 25px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 7pt;
  white-space: nowrap;
}
#spaceThemeItem {
  background-image: url(/media/stars.gif);
  background-size: 250px 100px;
}
#MinecraftThemeItem {
  background-image: url(/media/minecraft.jpg);
  background-size: 100% 100%;
}
#marbledItem {
  background-image: url(/media/marble.jpg);
  background-size: 500px 500px;
  color: #000;
  font-family: Times, serif;
}
#fourchanItem {
  background-image: url(/media/4chan-logo.jpg);
  background-size: 100% 100%;
  color: transparent;
  font-family: Tahoma, serif;
}
#matrixItem {
  background: #000;
  color: #0F0;
  text-shadow: 0 0 5px #0F0;
  font-family: monospace !important;
}
#flamedUsernameItem > p {
  background-image: url(/media/flames.gif);
  background-size: 50px 100%;
  background-repeat: repeat-x;
  color: #F00;
  text-shadow: 0 0 3px #F70;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
#waterUsernameItem > p {
  background-image: url(/media/water.gif);
  background-size: 150px 150px;
  background-repeat: repeat-x;
  color: #FFF;
  text-shadow: 0 0 3px #7DF;
  padding: 3px !important;
}
#rainbowTextItem {
  font-family: arial, sans-serif !important;
  background-image: linear-gradient(to left, #F00, #F0F, #77F, #33F, #0F0, #FF0, #F70, #F00);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-color: rgba(0, 0, 0, 0.5);
}
#goldenItem {
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  color: #000;
  font-family: arial, sans-serif;
  font-weight: bold;
}
#goldenNameItem {
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
@keyframes move {
  0% {
    background-position: 200% 0%;
  }

  100% {
    background-position: 0% 200%;
  }
}
#goldenNameItem > p {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400%;
  animation: move 5s ease infinite;
  background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  font-weight: bold;
  text-shadow: 0 0 3px #B38728;
}
@keyframes rgb {
  0% {
    background: red;
  }
  14% {
    background: orange;
  }
  28% {
    background: yellow;
  }
  42% {
    background: green;
  }
  56% {
    background: blue;
  }
  70% {
    background: indigo;
  }
  84% {
    background: violet;
  }
  100% {
    background: red;
  }
}
#rgbItem {
  color: #000;
  animation: rgb 30s linear infinite;
}
@keyframes charged {
  0% {
    text-shadow: 0 0 0 #0FF;
  }
  100% {
    text-shadow: 0 0 5px #0FF;
  }
}
#electricItem {
  color: #0FF;
  font-weight: bold;
  animation: charged 250ms ease-in infinite;
}
#redname {
  color: #C00;
}
#orangename {
  color: #F70;
}
#yellowname {
  color: #FF0;
}
#greenname {
  color: #0C0;
}
#bluename {
  color: #55F;
}
#purplename {
  color: #F0F;
}
#woodenSignItem {
  text-align: center;
  background-image: url(/media/wood.jpg);
  background-size: 100% 100%;
  background-repeat: repeat;
  font-weight: bolder;
  color: #000;
  font-family: "Pixelated";
}
#secretText > p:hover {
  filter: blur(0);
}
#secretText > p {
  filter: blur(3px);
  transition: filter 100ms ease;
  cursor: zoom-in;
}
#smileyItem {
  text-align: center;
  background-image: url(/media/smiley.png);
  background-size: 75% 75%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#smileyItem p {
  mix-blend-mode: difference;
}
#vaporwaveSkullItem {
  text-align: center;
  background-image: url(/media/vaporwave-skull.webp);
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#diamondPfpItem {
  text-align: center;
  background-image: url(/media/diamond.gif);
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#hatsunemikuItem {
  text-align: center;
  background-image: url(/media/hatsunemiku.png);
  background-size: 85% 85%;
  background-repeat: no-repeat;
  background-position: center;
  color: #000;
}
#axolotlItem {
  text-align: center;
  background-image: url(/media/axolotl.png);
  background-size: 85% 85%;
  background-repeat: no-repeat;
  background-position: center;
  color: #000;
}
#cabooseItem {
  text-align: center;
  background-image: url(/media/caboose.png);
  background-size: 85% 85%;
  background-repeat: no-repeat;
  background-position: center;
}
#partyItem {
  text-align: center;
  background-image: url(/media/confetti.gif);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#giphyItem {
  text-align: center;
  background-color: #555;
  background-image: url(/media/giphy.png);
  background-size: auto 95%;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
}
#laughingCat {
  text-align: center;
  background-image: url(/media/laughing-cat.webp);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#cookiesItem {
  text-align: center;
  background-image: url(https://kirbydogs.neocities.org/location-img/cookiejar.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#charityItem {
  text-align: center;
  background-image: url(/media/donator.png);
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#charityItem p {
  mix-blend-mode: difference;
}
#pedroItem {
  text-align: center;
  background-image: url(/media/pedro.gif);
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFF;
}
#prismaticItem {
  font-family: Impact, sans-serif !important;
  letter-spacing: 2px;
  background-image: url(https://nightscape.xobyte.org/media/iridescent.gif);
  background-size: 100px auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 10pt;
}
#shadow {
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  backdrop-filter: brightness(25%);
  pointer-events: none;
}
#spotlight {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  backdrop-filter: brightness(600%);
  box-shadow: 0 0 10px 5px #000 inset;
  position: fixed;
  left: calc(50vw - 100px);
  top: calc(50vh - 100px);
  z-index: 10002;
  cursor: none;
  pointer-events: none;
}

/* Mobile Optimization */
@media only screen and (max-width: 600px) {
  #metabody, #main {
    overflow: unset;
    height: unset;
  }
  #main {
    max-width: calc(95vw - 130px);
    flex-wrap: wrap;
    overflow: unset;
  }
  #metabody {
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap; 
    gap: 50px;
    background-size: auto 100%;
  }
  #chat, #info {
    height: 80vh;
    width: 80vw;
  }
  #userDetails {
    width: 80vw;
    position: static;
    justify-content: center;
    flex-wrap: wrap;
  }
}
#giphyWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 7;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}
#giphyWidget {
  max-width: 300px;
  display: block;
  width: 90vw;
  margin: 10px;
  position: relative;
  padding-top: 30px;
   }
   #giphyInput {
    display: flex;
    align-items: center;
    justify-content: flex-start;
     padding: 5px;
     margin-right: 5px;
     width: 200px;
     position: absolute;
     bottom: 100%;
     left: 0;
     width: 100%;
     height: 20px;
   }
   .gif-effect {
     max-width: 150px;
     margin: 5px;
   }
   #giphyModal {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: white;
     border: 1px solid #ccc;
     padding: 20px;
     max-width: 500px;
     width: 90%;
     max-height: 400px;
     overflow-y: auto;
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     z-index: 1000;
   }
   #giphyModal img {
     width: 100px;
     height: 100px;
     margin: 5px;
     cursor: pointer;
     object-fit: cover;
   }
   #giphyModal img:hover {
     border: 2px solid #007bff;
   }
   .modal-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.5);
     z-index: 999;
   }
   .giphyImage {
    width: 200px;
    max-width: 100vw;
    max-height: 50vh;
    transition: opacity 250ms linear;
  }
  .giphyImage:hover {
    opacity: 0.5;
  }
.settingsItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 3px;
}
.settingsItem > p {
  width: 80%;
  margin: 0;
}
.settingsItem > button {
  width: 20%;
  margin: 0;
  border: none;
}