:root {
  color-scheme: light;
  --bg: #fffff4;
  --fg: #111;
  --link: #0000ee;
  --visited: #551a8b;
  --border: #777;
  --table: #fff;
  --head: #e6e6d8;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #11110f;
    --fg: #eeeedd;
    --link: #9db7ff;
    --visited: #d7a8ff;
    --border: #888;
    --table: #181816;
    --head: #252520;
  }
}

body {
  max-width: 980px;
  margin: 20px auto;
  padding: 0 12px;
  color: var(--fg);
  background: var(--bg);
  font: 15px/1.35 Georgia, "Times New Roman", serif;
}

h1 {
  margin-bottom: 0.2em;
  font-size: 1.8em;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

a:link { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { background: #ffff99; color: #000; }

hr {
  border: 0;
  border-top: 1px dotted var(--border);
  margin: 1.2em 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--table);
}

th,
td {
  padding: 3px 6px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--head);
}

.size,
.date {
  white-space: nowrap;
  text-align: right;
}

.dir::before,
.symlink-dir::before {
  content: "[DIR] ";
}

.file::before,
.symlink-file::before {
  content: "[FILE] ";
}

.symlink::before {
  content: "[LINK] ";
}

.symlink-target {
  color: var(--fg);
  font-size: 0.9em;
}

.site-icon {
  width: 64px;
  height: 64px;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid var(--border);
}

.crumbs {
  overflow-wrap: anywhere;
}

.small {
  font-size: 0.9em;
}

.corner {
  display: flex;
  justify-content: flex-end;
  margin: 1em 0 0;
  pointer-events: none;
}

.corner img {
  display: block;
  max-width: min(220px, 45vw);
  max-height: 32vh;
}

@media (max-width: 720px) {
  body {
    margin-top: 10px;
  }

  table {
    font-size: 0.9em;
  }

  .date {
    display: none;
  }
}