/* style.css: the ourclock.world holding page, in our clock's look: the
   Pink ground, one white rounded card, Poppins and charcoal ink. The same
   colours as the app's Pink theme (app/src/theme.css). */

:root {
  --ground: #F6EEF2;
  --card: #FFFFFF;
  --ink: #232228;
  --muted: #5C5A60;
  --needle: #FF2E7E; /* focus rings, as in the app */
}

* { box-sizing: border-box; }

/* The whole screen: the card in the middle, the small line at the bottom. */
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--ground); color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The card. */
.card {
  width: 100%; max-width: 440px;
  background: var(--card); border-radius: 28px;
  padding: 40px 28px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mark { display: block; margin-bottom: 16px; }
h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.tagline { margin: 6px 0 0; font-size: 16px; font-weight: 500; color: var(--muted); }
.line { margin: 22px 0 28px; font-size: 15px; font-weight: 500; line-height: 1.55; }

/* The big ink button. */
.button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 12px 24px;
  border-radius: 999px;
  background: var(--ink); color: var(--card);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.button:hover { background: #000; }
.button:focus-visible { outline: 3px solid var(--needle); outline-offset: 3px; }

/* The small line at the bottom. */
footer { font-size: 13px; font-weight: 500; color: var(--muted); }