/* reset-ish */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Page background and layout */
:root {
  --bg: #000;        /* background color */
  --fg: #fff;        /* text color */
  --max-size: 50vmin;
}

html,body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* container that mimics your example layout */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  gap: 2vh;
}

/* center area */
.center-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  padding: 2vh;
}

/* logo style */
.logo {
  width: var(--max-size);
  height: var(--max-size);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6));
  will-change: transform;
}

/* spin animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin {
  animation: spin 12s linear infinite;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
}

/* Footer */
.footer {
  width: 100%;
  text-align: center;
  color: var(--fg);
  font-size: 1.1rem;
  letter-spacing: .08em;
  margin-top: 2vh;
}

/* Smaller screens */
@media (max-width: 560px) {
  :root { --max-size: 75vmin; }
  .footer { font-size: 0.9rem; padding: 1vh 0; }
}