/* The page and the card column every section sits in. */

:root {
  --emerald: #0b4a3b;
  --emerald-deep: #062a21;
  --emerald-night: #03170f;
  --gold: #c9a45c;
  --gold-soft: #e6cf98;
  --ivory: #f5efe2;
  --ink: #0b3d31;

  /* The card fills a phone. On a laptop or desktop it is a 3:4 column, the
     shape of a tablet held upright, lying on the table. */
  --card-w: min(100%, max(calc(100svh * .75), 360px));
}

/* A tablet (set in the page's <head>) is filled edge to edge, either way up. */
html.is-tablet { --card-w: 100%; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  /* A dark emerald room, lit from the middle: the table the card lies on. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20, 110, 84, .35), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #0a3a2e 0%, #05211a 62%, #020f0b 100%) fixed;
  background-color: var(--emerald-night);
}

body { min-height: 100vh; }

img { display: block; max-width: 100%; }

.card {
  position: relative;
  width: var(--card-w);
  margin: 0 auto;
  background: var(--emerald-deep);
  box-shadow: 0 0 60px rgba(0, 0, 0, .55);
}