:root {
  --background: #8f78b8;
  --panel: #5e4690;
  --text: #ffffff;
  --muted: #e8e0f4;
  --link: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }

/* The wordmark is a drawing (the same one the app uses): halo, outline and glow included. */
.wordmark { display: block; margin: 8px auto 0; text-align: center; }
.wordmark img { width: min(520px, 100%); height: auto; }
.wordmark.small { margin: 0 0 16px; text-align: left; }
.wordmark.small img { width: 200px; }

.tagline { font-family: "Kaushan Script", cursive; font-size: 22px; text-align: center; margin: 0 0 24px; }

.verse {
  background: var(--panel);
  border: 1px solid var(--text);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  font-style: italic;
  font-size: 19px;
}
.verse cite { display: block; margin-top: 8px; font-style: normal; font-size: 15px; color: var(--muted); }

h1 { font-size: 30px; margin: 0 0 4px; }
h2 { font-size: 21px; margin: 32px 0 8px; }
p, li { color: var(--text); }
.muted { color: var(--muted); }
a { color: var(--link); font-weight: 600; }
ul { padding-left: 22px; }

nav.footer { margin-top: 48px; text-align: center; color: var(--muted); }
nav.footer a { margin: 0 8px; }

/* The app's lavender button. */
.button {
  display: block; text-align: center; text-decoration: none; margin: 20px auto 0; max-width: 360px;
  background: #decdf2; color: #4b3873; border: 1.5px solid #fff; border-radius: 999px; padding: 16px 24px;
  font-size: 18px;
}