:root {
  color-scheme: dark;
  --bg:      #0f1115;
  --panel:   #14171c;
  --head:    #1a1e25;
  --border:  #343b46;
  --text:    #cfd6e0;
  --muted:   #7d8794;
  --link:    #e5b567;   /* amber: change this one value to re-theme */
  --visited: #a88a5a;
  --hover:   #1d222a;
}

body {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 "Courier New", Courier, monospace;
}

a         { color: var(--link); text-decoration: none; }
a:visited { color: var(--visited); }
a:hover   { text-decoration: underline; }
a:focus-visible { outline: 1px dashed var(--link); outline-offset: 2px; }

h1 {
  font: bold 1.35em/1.3 "Courier New", Courier, monospace;
  margin: 0 0 14px;
}

/* the box around the files */
#list {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  overflow: hidden;
}

#list th {
  text-align: left;
  padding: 8px 14px;
  background: var(--head);
  border-bottom: 1px solid var(--border);
  font-weight: normal;
  color: var(--muted);
}
/* sort controls: column names and the ↓ arrows */
#list th a,
#list th a:visited {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}
#list th a:hover {
  color: var(--link);
  border-color: var(--border);
  background: var(--hover);
  text-decoration: none;
}
#list th a:active { background: var(--bg); }
#list th a:focus-visible { outline: 1px dashed var(--link); outline-offset: 1px; }

/* make the whole file-name cell clickable, not just the text */
#list td.link { padding: 0; }
#list td.link a {
  display: block;
  padding: 5px 14px;
}
#list td {
  padding: 5px 14px;
  border-bottom: 1px solid #1e232b;
}
#list tbody tr:last-child td { border-bottom: 0; }
#list tbody tr:hover td { background: var(--hover); }

#list td.size { text-align: right; color: var(--muted); white-space: nowrap; }
#list td.date { color: var(--muted); white-space: nowrap; }

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

address {
  font-style: normal;
  color: var(--muted);
  font-size: .85em;
}

::selection { background: #3a3220; color: #fff; }

.md {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  padding: 6px 26px 16px;
}
.md p, .md li { max-width: 78ch; }
.md h1, .md h2, .md h3 { font-family: "Courier New", Courier, monospace; margin: 1.4em 0 .5em; }
.md h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.md code { background: var(--head); padding: 1px 5px; border-radius: 3px; }
.md pre { background: var(--bg); border: 1px solid var(--border); padding: 10px 14px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 1em 0; padding: 0 16px; border-left: 3px solid var(--link); color: var(--muted); }
.md table { border-collapse: collapse; }
.md th, .md td { border: 1px solid var(--border); padding: 4px 10px; }
.md img { max-width: 100%; }
.md hr { margin: 1.4em 0; }

#list td.link a[href$="/"]::before { content: "[DIR] "; color: var(--muted); }
#list td.link a[href$="/"]       { font-weight: bold; }