:root {
  --bg: #faf9f7;
  --fg: #2b2b2b;
  --muted: #6b6b6b;
  --accent: #4a6fa5;
  --max: 680px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
}
header, main, footer { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
header { padding-top: 48px; border-bottom: 1px solid #e5e2dc; margin-bottom: 32px; }
h1 { font-size: 28px; margin: 0 0 8px; }
nav a { color: var(--accent); text-decoration: none; margin-right: 18px; font-family: sans-serif; font-size: 15px; }
nav a:hover { text-decoration: underline; }
article { margin-bottom: 36px; }
h2 { font-size: 21px; margin-bottom: 8px; }
a { color: var(--accent); }
footer { color: var(--muted); font-size: 14px; padding: 24px 20px 48px; border-top: 1px solid #e5e2dc; margin-top: 24px; font-family: sans-serif; }