main {
  width: calc(100% - 2em);
  max-width: 100%;
  margin:0;
  padding:3em 1em
}
a  { display: inline-block; text-decoration: none; }
a.active { font-weight: bolder; text-decoration: underline; }
header  {margin:0;padding:0 1em;background:#fff;box-shadow:0 2px 8px rgba(var(--black),5%)}
h1 { font-size: 3em;}
h2  { margin: 0; font-size: 1em; }
h2 a  { text-decoration: none; }
nav  {display:flex;align-items:center;justify-content:space-between}
nav  a  {padding:1em .5em;color:var(--black);border-bottom:4px solid transparent;text-decoration:none}
nav  a.active { border-bottom-color: var(--accent); }
@media (max-width: 420px) { .social-links { display: none; } }
@media (max-width: 880px) { .site-title { display: none; } }
footer {padding:2em 1em 6em;background:linear-gradient(var(--gray-gradient)) no-repeat;color:rgb(var(--gray));text-align:center}
.social-links {display:flex;justify-content:center;gap:1em;margin-top:1em}
.social-links a {text-decoration:none;color:rgb(var(--gray))}
.hero-image { width: 100%; }
.hero-image img {display:block;margin:0 auto;border-radius:12px;box-shadow:var(--box-shadow)}
.prose {width:720px;max-width:calc(100% - 2em);margin:auto;padding:1em;color:rgb(var(--gray-dark))}
.title {margin-bottom:1em;padding:1em 0;text-align:center;line-height:1}
.title h1 { margin: 0 0 0.5em; }
.date {margin-bottom:.5em;color:rgb(var(--gray))}
.last-updated-on { font-style: italic; }