body {
  font-family: 'Segoe UI', sans-serif;
}

.card {
  border-radius: 1rem;
}

.moon-loader {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 5px;
}

.moon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #999;
  opacity: 0.3;
  animation: moonPulse 1s infinite ease-in-out alternate;
}

.moon1 { animation-delay: 0s; }
.moon2 { animation-delay: 0.2s; }
.moon3 { animation-delay: 0.4s; }
.moon4 { animation-delay: 0.6s; }

@keyframes moonPulse {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.3); }
}