/* Center everything full-screen */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  margin: 0;
  background-color: #0d1117; /* GitHub dark background */
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Ensure main behaves properly for all browsers */
main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.logo {
  width: 50vw;         /* default scaling */
  max-width: 350px;    /* desktop max size */
  height: auto;
  transform: translateY(-100px); /* move up 40px */
}

/* Larger size for large desktop screens */
@media (min-width: 1200px) {
  .logo {
    max-width: 450px;  /* make it bigger on desktops */
  }
}

/* Smaller size for phones */
@media (max-width: 500px) {
  .logo {
    width: 70vw;       /* take more width on tiny screens */
    max-width: 250px;  /* but never too large */
  }
}