body {
    background-color: #141a17;
    margin: 0px;
    color: #bfb381;
}

.moon {
  color: #ffb909;
  position: relative;
  z-index: 1;
}

.moon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
  rgba(255,255,150,0.6) 10%,
  rgba(255,200,0,0.2) 50%,
  rgba(255,255,150,0) 90%
);
  filter: blur(15px);
  animation: moonGlow 10s infinite alternate;
  z-index: -1;
}

@keyframes moonGlow {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
}

.preformatted {
  font-family: monospace;
  white-space: pre;
  line-height: 1.3;
  font-size: 10px;
  margin: 0;
  position: relative;
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.preformatted-bg-link {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.preformatted a:not(.preformatted-bg-link),
.preformatted span {
  position: relative;
  z-index: 1;
}

.container, .train {
  font-family: monospace;
  white-space: pre;
  line-height: 1.3;
  font-size: 10px;
  margin: 0 auto;
}

.container {
  position: relative;
  overflow: hidden;
}

.come-along {
  text-decoration: none;
  background-color: #d7b83b;
  color: #235e1f;
  border-radius: 3px;
}

a.kettle {
  text-decoration: none;
  background-color: transparent;
  border-radius: 3px;
  animation: color-animation 5s ease-in-out infinite, wiggle 1.5s ease-in-out infinite;
  display: inline-block;
}

a.kettle:hover {
  background-color: #d7b83b;
  animation: none;
  color: #235e1f;
}

@keyframes color-animation {
  0% {
    color: #bfb381;
  }
  30% {
    color: #eeb60d;
  }
  60% {
    color: #eeb60d;
  }
  100% {
    color: #bfb381;
  }
}

@keyframes wiggle {
  0% {
    transform: scale(1) rotate(0deg);
  }
  22% {
    transform: scale(1.05) rotate(3deg);
  }
  44% {
    transform: scale(0.95) rotate(-3deg);
  }
  66% {
    transform: scale(1.05) rotate(3deg);
  }
  67% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.firework-particle {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  font-weight: bold;
  z-index: 100;
  opacity: 0;
}

@keyframes sparkle-fade {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  15% {
    opacity: 0.6;
    transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(0.8);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(1);
  }
  45% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.1);
  }
  60% {
    opacity: 0.7;
    transform: translate(calc(var(--tx) * 1.05), calc(var(--ty) * 1.05)) scale(0.95);
  }
  80% {
    opacity: 0.3;
    transform: translate(calc(var(--tx) * 1.1), calc(var(--ty) * 1.1)) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) * 1.15)) scale(0.5);
  }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}