/* rushpull.com: the app's dark look (black, white and greys; the brand
   gradient only in the bar). Every colour and font is here. */
@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/GoogleSansFlex-Latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
:root {
  --font: "Google Sans Flex", -apple-system, system-ui, sans-serif;
  --bg: #111;
  --main: #f2f2f2;
  --detail: rgb(242 242 242 / 0.62);
  --hint: rgb(242 242 242 / 0.57);
  --divider: rgb(255 255 255 / 0.1);
  --green: #9ffc24;
  --red: #fe0000;
  --blue: #009fff;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--main); }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 370 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
header, footer { padding: 24px; display: flex; align-items: center; gap: 24px; }
header { border-bottom: 1px solid var(--divider); }
header img { height: 22px; display: block; }
footer { border-top: 1px solid var(--divider); font-size: 13px; color: var(--hint); }
footer .grow { flex: 1; }
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.col { width: 560px; max-width: 100%; animation: in 400ms var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .col { animation-name: fade; } @keyframes fade { from { opacity: 0; } } }
h1 { margin: 0 0 8px; font-size: 28px; line-height: 36px; font-weight: 465; }
h2 { margin: 32px 0 8px; font-size: 17px; font-weight: 465; }
p, li { color: var(--detail); margin: 0 0 12px; }
ul { padding-left: 22px; margin: 0 0 12px; }
.lead { color: var(--main); font-size: 18px; }
.ok { color: var(--green); }
.hint { color: var(--hint); font-size: 13px; border-top: 1px solid var(--divider); padding-top: 12px; margin-top: 24px; }
/* The brand gradient, as in the app's main bar. */
.bar { height: 6px; border-radius: 999px; margin: 0 0 32px; background: linear-gradient(90deg, var(--red), var(--green), var(--blue)); box-shadow: 0 6px 24px rgb(159 252 36 / 0.18); }
.bar.half { opacity: 0.5; }
a { color: var(--detail); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 350ms var(--ease), text-decoration-color 350ms var(--ease); }
a:hover { color: var(--main); text-decoration-color: currentColor; transition-duration: 250ms; }