body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0; /* Added to remove default body margin */
  background-color: #faf9fd; /* Default background, can be overridden by media queries */
  transition: background-color 0.5s ease;
}

:root {
  --light-background: #faf9fd;
  --dark-background: #faf9fd; /* User's original dark background was same as light */
}

@media (prefers-color-scheme: light) {
  body {
    background-color: var(--light-background);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--dark-background);
  }
}

.loader {
  /* The body is already a flex container centering its children. */
  /* No specific width/height needed here if the image itself has dimensions */
  display: flex; /* Ensures the image inside is also centered if needed */
  justify-content: center;
  align-items: center;
}

#loader-icon {
  width: 15vw;  /* Adjust size based on viewport width */
  max-width: 120px; /* Maximum size */
  min-width: 60px; /* Minimum size */
  height: auto; /* Maintain aspect ratio */
  animation: pulse-animation 1.5s ease-in-out infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}