/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root{
  --bg:#05060a;
  --panel: rgba(0,0,0,.35);
  --ink:#d9d9e3;
  --dim:#9aa0aa;
  --accent:#b08cff;
  --line: rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:
    radial-gradient(800px 600px at 20% 10%, rgba(176,140,255,.10), transparent 60%),
    radial-gradient(700px 500px at 80% 30%, rgba(120,200,255,.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.65;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:880px; margin:0 auto; padding:28px 16px 80px}

.header{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}

.title{margin:0 0 6px; font-size:34px; letter-spacing:.5px}
.subtitle{margin:0; color:var(--dim); font-size:14px}

.nav{margin-top:10px; display:flex; gap:14px; flex-wrap:wrap; font-size:14px}

.card{
  margin-top:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.28);
  border-radius:16px;
  padding:18px 16px;
}

.meta{color:var(--dim); font-size:13px; margin-top:-6px}

hr{border:0; border-top:1px solid var(--line); margin:18px 0}

blockquote{
  margin:14px 0;
  padding:10px 14px;
  border-left:3px solid rgba(176,140,255,.55);
  background: rgba(176,140,255,.06);
  border-radius:10px;
  color:#eee9ff;
}

.tag{
  display:inline-block;
  border:1px solid rgba(176,140,255,.35);
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  color:#e9ddff;
  margin-right:6px;
}

.small{color:var(--dim); font-size:12px}

.footer{margin-top:22px; color:var(--dim); font-size:12px; text-align:center}