body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

#logo-container {
  /* align the logo to the center */
  display: flex;
  justify-content: center;
}

.logo {
  max-width: 80%; /* Adjust logo size */
  max-height: 60vh; /* Adjust logo size */
  object-fit: contain; /* Keep aspect ratio */
}

@media (prefers-color-scheme: dark) {
  body, html {
    background-color: #333; /* Dark background color */
  }
}