/* Matches the look of aman-singh.in (al-folio theme): Roboto, white / dark-grey
   background, purple (light) or cyan (dark) accent, bordered top navbar, grey footer bar. */
:root {
  --content-width:740px; --table-width:1080px; --row-alt:rgba(0,0,0,.025);
  --bg:#fff; --text:#000; --text-light:#828282; --theme:#b509ac; --divider:rgba(0,0,0,.1);
  --code-bg:rgba(181,9,172,.05); --footer-bg:#1c1c1d; --footer-text:#d1d1d1; --footer-link:#fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1c1c1d; --text:#d1d1d1; --text-light:#828282; --theme:#2698ba; --divider:#424246;
    --code-bg:#2c3237; --row-alt:rgba(255,255,255,.03); --footer-bg:#d1d1d1; --footer-text:#1c1c1d; --footer-link:#000;
  }
}
* { box-sizing:border-box; }
html { font-size:16px; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:Roboto,-apple-system,"Segoe UI",sans-serif; font-weight:400; line-height:1.5;
  padding:5rem 0 4rem; }
.container { max-width:var(--content-width); margin:0 auto; padding:0 15px; }

/* navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:10; background:var(--bg); opacity:.95;
  border-bottom:1px solid var(--divider); padding:.5rem 0; }
.navbar .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.brand { font-size:1.25rem; font-weight:300; color:var(--text); text-decoration:none; padding:.3125rem 0; }
.nav { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.nav a { display:block; padding:.5rem; color:var(--text); text-decoration:none; }
.nav a:hover { color:var(--theme); }
.nav .active a { color:var(--theme); font-weight:bolder; }

/* content */
main a { color:var(--theme); overflow-wrap:anywhere; text-decoration:none; }
main a:hover { text-decoration:underline; }
h1,h2,h3,h4,h5 { color:var(--text); font-weight:500; line-height:1.2; margin:2rem 0 .75rem; }
h1 { font-size:2.25rem; font-weight:600; margin-top:1rem; }
h2 { font-size:1.75rem; } h3 { font-size:1.4rem; } h4 { font-size:1.15rem; }
p { margin:0 0 1rem; }
ul,ol { padding-left:1.5rem; margin:0 0 1rem; } li { margin:.3rem 0; }
hr { border:0; border-top:1px solid var(--divider); margin:2rem 0; }
code { background:var(--code-bg); padding:.1em .3em; border-radius:4px; font-size:.9em; }
pre { background:var(--code-bg); padding:.8rem; border-radius:6px; overflow-x:auto; }
pre code { padding:0; background:none; }
/* tables: wider than the text column on big screens, scroll sideways on small ones */
.table-wrap { --w:min(var(--table-width), calc(100vw - 2.5rem)); width:var(--w);
  margin:1rem 0 1.75rem calc(50% - var(--w) / 2); overflow-x:auto;
  border:1px solid var(--divider); border-radius:8px; }
table { width:100%; border-collapse:collapse; font-size:.875rem; line-height:1.4; }
th,td { padding:.55rem .75rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--divider); }
th { background:var(--code-bg); font-weight:600; white-space:nowrap; border-bottom:2px solid var(--theme); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) { background:var(--row-alt); }
tbody tr:hover { background:var(--code-bg); }
td a { overflow-wrap:normal; white-space:nowrap; }
td.short { white-space:nowrap; } td.long { min-width:16rem; }
blockquote { border-left:5px solid var(--theme); margin:1.5rem 0; padding:1rem; }
img { max-width:100%; }

/* footer */
footer { position:fixed; bottom:0; left:0; right:0; background:var(--footer-bg); color:var(--footer-text);
  font-size:.75rem; text-align:center; padding:9px 0 8px; }
footer a { color:var(--footer-link); }

@media (max-width:576px) {
  body { padding-top:7rem; }
  .navbar .container { display:block; }
  .nav { flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; }
  .nav a { padding:.35rem .5rem; }
  h1 { font-size:1.9rem; }
}