/* The app's look: white on near black, the cube's colors glowing in. */
:root {
  color-scheme: dark;
  --text: #fff;
  --secondary: rgba(255, 255, 255, 0.62);
  --card: rgba(255, 255, 255, 0.055);
  --hairline: rgba(255, 255, 255, 0.09);
}
* { box-sizing: border-box; }
html { background: #090909; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(60vmax 60vmax at 0% 6%, rgba(15, 102, 235, 0.42), transparent 70%),
    radial-gradient(55vmax 55vmax at 105% 42%, rgba(230, 31, 77, 0.30), transparent 70%),
    radial-gradient(30vmax 30vmax at 55% 14%, rgba(255, 204, 15, 0.10), transparent 70%),
    radial-gradient(50vmax 50vmax at 10% 100%, rgba(15, 102, 235, 0.16), transparent 70%),
    #090909;
  background-attachment: fixed;
}
main { max-width: 640px; margin: 0 auto; padding: 56px 20px 72px; }
header { text-align: center; margin-bottom: 40px; }
header img { width: 112px; height: 112px; border-radius: 25px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
h1 {
  margin: 20px 0 6px;
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tagline { margin: 0; color: var(--secondary); }
h2 {
  margin: 36px 0 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}
section {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 6px 20px;
}
section > div { padding: 14px 0; }
section > div + div { border-top: 1px solid var(--hairline); }
h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
p { margin: 0; }
section p, section li { color: var(--secondary); }
ul { margin: 6px 0 0; padding-left: 20px; }
a { color: var(--text); }
.button {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
footer { margin-top: 48px; text-align: center; font-size: 14px; color: var(--secondary); }
footer a { color: var(--secondary); }
@media (max-width: 420px) {
  main { padding-top: 40px; }
  h1 { font-size: 28px; }
}