/* The one stylesheet for the public site. The site is dark in both light and
   dark mode, to match the app and because the yellow logo is hard to see on
   white. */

:root {
  color-scheme: dark;
  --background: #181818;
  --text: #f2f2f2;
  --muted: #a6a6a6;
  --brand: #ffe300;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  padding: 48px 0;
  text-align: center;
}

/* The still logo. Same size as the animated one on the landing page, which
   splash.css sizes. */
.logo {
  /* Without this the image sits on a text line, which adds a few pixels of
     space under it that the animated logo does not have. */
  display: block;
  width: 200px;
  height: 200px;
}

h1 {
  margin: 16px 0 8px;
  color: var(--brand);
  font-size: 2.6rem;
  line-height: 1.2;
}

p {
  margin: 8px 0;
}

.muted {
  color: var(--muted);
}

a {
  color: var(--brand);
}

footer {
  padding: 24px 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

footer a {
  color: var(--muted);
}