void-cat-rs/ui/styles.css

body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: lime;
}

body:before {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  content: '';
  height: 14px;
  background-repeat: repeat-x;
  background-color: fuchsia;
  animation: scroll 60s linear infinite;
  color: #000;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="365" height="12"><text x="0%" y="80%" font-weight="bold" font-size="12" fill="lime" font-family="monospace">YOU MUST HAVE A NOSTR EXTENSION FOR THIS TO WORK.</text></svg>')
}

@keyframes scroll {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.10;
  }
  20% {
    transform: translate(-150px, 50px);
      opacity: 0.15;
  }
  40% {
    transform: translate(-50px, -90px);
      opacity: 0.20;
  }
  60% {
    transform: translate(90px, 30px);
      opacity: 0.15;
  }
  80% {
    transform: translate(-75px, 75px);
      opacity: 0.05;
  }
}

.bgwrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  animation: float 18s ease-in-out infinite;
  z-index: 0;
  mix-blend-mode: hard-light;
}

.circle:nth-child(1) {
  width: 200px;
  height: 200px;
  background: fuchsia;
  top: 10%;
  left: 10%;
  animation-duration: 24s;
}

.circle:nth-child(2) {
  width: 150px;
  height: 150px;
  background: lime;
  top: 20%;
  left: 70%;
  animation-duration: 30s;
}

.circle:nth-child(3) {
  width: 250px;
  height: 250px;
  background: fuchsia;
  top: 50%;
  left: 20%;
  animation-duration: 23s;
}

.circle:nth-child(4) {
  width: 200px;
  height: 200px;
  background: lime;
  top: 70%;
  left: 20%;
  animation-duration: 32s;
}

.circle:nth-child(5) {
  width: 100px;
  height: 100px;
  background: fuchsia;
  top: 40%;
  left: 75%;
  animation-duration: 35s;
}

.circle:nth-child(6) {
  width: 50px;
  height: 50px;
  background: lime;
  top: 60%;
  left: 80%;
  animation-duration: 12s;
}

.circle:nth-child(7) {
  width: 75px;
  height: 75px;
  background: fuchsia;
  top: 10%;
  left: 90%;
  animation-duration: 16s;
}

.circle:nth-child(8) {
  width: 120px;
  height: 120px;
  background: lime;
  top: 90%;
  left: 70%;
  animation-duration: 27s;
}

.custom-scrollbar {
  scrollbar-color: #4caf50 #1a1a1a;
  scrollbar-width: thin;
}

.button, .up-button::file-selector-button {
  color: fuchsia;
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: .813rem;
  width: .813rem;
  border: 2px solid lime;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

input[type="radio"]:checked {
  background-color: fuchsia;
}

input[type="radio"]:checked::after {
  content: '';
  height: 0.35rem;
  width: 0.35rem;
  background-color: lime;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: .813rem;
  width: .813rem;
  border: 2px solid lime;
  border-radius: 4px;
  position: relative;
}

input[type="checkbox"]:checked::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: fuchsia;
  border-radius: 2px;
}

input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  top: 40%;
  left: 55%;
  width: 45%;
  height: 65%;
  border: solid lime;
  border-width: 0 1.75px 1.75px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}