body {
  background-image: url("/background.png");
  background-size: 20%;
  background-position: 0 0;
  background-repeat: repeat;
  background-attachment: scroll;
  color: #d9dcff;
  font-family: Verdana, sans-serif;
  animation: bg-scroll 60s linear infinite;

  min-height: 100vh;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes bg-scroll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 1000px 1000px;
  }
}

.floaties {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.floaties span {
  position: absolute;
  color: #d9dcff;
  font-family: Verdana, sans-serif;
  font-size: 24px;
  opacity: 0.9;

  animation-name: float-diagonal, slow-rgb;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;

  will-change: transform, color;
}

/*
  24 symbols.
  Positions are intentionally uneven now:
  - some start WAY above the screen
  - some start much lower
  - fewer symbols are clustered around the center band
  Lower movement duration = faster symbol.
*/

.floaties span:nth-child(1) {
  top: -34%;
  left: -7%;
  animation-duration: 18s, 10s;
  animation-delay: 0s, 0s;
}

.floaties span:nth-child(2) {
  top: 3%;
  left: -33%;
  animation-duration: 26s, 10s;
  animation-delay: -1s, -3s;
}

.floaties span:nth-child(3) {
  top: -8%;
  left: -51%;
  animation-duration: 21s, 10s;
  animation-delay: -2s, -6s;
}

.floaties span:nth-child(4) {
  top: 52%;
  left: -14%;
  animation-duration: 30s, 10s;
  animation-delay: -3s, -1s;
}

.floaties span:nth-child(5) {
  top: -47%;
  left: -39%;
  animation-duration: 19s, 10s;
  animation-delay: -4s, -4s;
}

.floaties span:nth-child(6) {
  top: 11%;
  left: -62%;
  animation-duration: 27s, 10s;
  animation-delay: -5s, -7s;
}

.floaties span:nth-child(7) {
  top: -3%;
  left: -20%;
  animation-duration: 17s, 10s;
  animation-delay: -6s, -2s;
}

.floaties span:nth-child(8) {
  top: 66%;
  left: -47%;
  animation-duration: 31s, 10s;
  animation-delay: -7s, -5s;
}

.floaties span:nth-child(9) {
  top: -28%;
  left: -25%;
  animation-duration: 22s, 10s;
  animation-delay: -8s, -8s;
}

.floaties span:nth-child(10) {
  top: 6%;
  left: -9%;
  animation-duration: 25s, 10s;
  animation-delay: -9s, -1s;
}

.floaties span:nth-child(11) {
  top: -58%;
  left: -58%;
  animation-duration: 18.5s, 10s;
  animation-delay: -10s, -4s;
}

.floaties span:nth-child(12) {
  top: 34%;
  left: -31%;
  animation-duration: 32s, 10s;
  animation-delay: -11s, -7s;
}

.floaties span:nth-child(13) {
  top: -6%;
  left: -43%;
  animation-duration: 20s, 10s;
  animation-delay: -12s, -2s;
}

.floaties span:nth-child(14) {
  top: 73%;
  left: -4%;
  animation-duration: 28s, 10s;
  animation-delay: -13s, -5s;
}

.floaties span:nth-child(15) {
  top: -24%;
  left: -68%;
  animation-duration: 17.5s, 10s;
  animation-delay: -14s, -8s;
}

.floaties span:nth-child(16) {
  top: 41%;
  left: -18%;
  animation-duration: 29s, 10s;
  animation-delay: -15s, -3s;
}

.floaties span:nth-child(17) {
  top: -18%;
  left: -55%;
  animation-duration: 19.5s, 10s;
  animation-delay: -16s, -6s;
}

.floaties span:nth-child(18) {
  top: 1%;
  left: -28%;
  animation-duration: 26.5s, 10s;
  animation-delay: -17s, -9s;
}

.floaties span:nth-child(19) {
  top: 86%;
  left: -73%;
  animation-duration: 16.5s, 10s;
  animation-delay: -18s, -1s;
}

.floaties span:nth-child(20) {
  top: -31%;
  left: -12%;
  animation-duration: 31.5s, 10s;
  animation-delay: -19s, -4s;
}

.floaties span:nth-child(21) {
  top: 9%;
  left: -48%;
  animation-duration: 23s, 10s;
  animation-delay: -20s, -7s;
}

.floaties span:nth-child(22) {
  top: -1%;
  left: -66%;
  animation-duration: 24.5s, 10s;
  animation-delay: -21s, -2s;
}

.floaties span:nth-child(23) {
  top: 96%;
  left: -6%;
  animation-duration: 18s, 10s;
  animation-delay: -22s, -5s;
}

.floaties span:nth-child(24) {
  top: -44%;
  left: -36%;
  animation-duration: 33s, 10s;
  animation-delay: -23s, -8s;
}

@keyframes float-diagonal {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(135vw, 105vh);
  }
}

@keyframes slow-rgb {
  0% {
    color: #ff8ad8;
    text-shadow: 0 0 8px #ff8ad8;
  }

  25% {
    color: #8affff;
    text-shadow: 0 0 8px #8affff;
  }

  50% {
    color: #a8ff8a;
    text-shadow: 0 0 8px #a8ff8a;
  }

  75% {
    color: #c18aff;
    text-shadow: 0 0 8px #c18aff;
  }

  100% {
    color: #ff8ad8;
    text-shadow: 0 0 8px #ff8ad8;
  }
}

.intro-box {
  position: relative;
  z-index: 1;

  width: 80%;
  max-width: 520px;
  padding: 28px;

  background-color: rgba(1, 2, 31, 0.72);
  border: 2px solid rgba(217, 220, 255, 0.45);
  border-radius: 18px;
  box-shadow: 0 0 25px rgba(217, 220, 255, 0.25);

  text-align: center;
}

h1 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 32px;
}

.subtitle {
  margin-top: 0;
  opacity: 0.85;
  font-size: 14px;
}

section {
  margin-top: 22px;
}

section h2 {
  font-size: 16px;
  margin-bottom: 8px;
}

p {
  line-height: 1.5;
}

.tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag {
  background-color: rgba(217, 220, 255, 0.14);
  border: 1px solid rgba(217, 220, 255, 0.35);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 13px;
}

a {
  color: #f0c7ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}