body {
  background-image: url("/images/scream.jpg");
  background-size: cover;
}

a { text-decoration: none /* ok since almost everything is clickable */; }
body > div > footer a { text-decoration: dotted underline; }

img[src="/images/rss.svg"] {
  height: 2ex;
  margin: 0 0 -2px 0;
}

body > div > main {
  /* starting with slightly less red tint makes blend with paing sky look whiter */
  background: linear-gradient(to bottom,
    rgba(249,255,250,0.92),
    rgba(255,255,250,0.90) );
}
body > div > header {
  box-shadow: 0 -10px 10px rgba(249,255,250,0.92) inset;
}
body > div > header > hgroup h1 + p { font-weight: bold; }
body > div > footer {
  box-shadow: 0 30px 30px rgba(255,255,250,0.90) inset;
  text-shadow:
    2px 2px 2px rgba(255,255,255,0.2),
    -2px 2px 2px rgba(255,255,255,0.2),
    2px -2px 2px rgba(255,255,255,0.2),
    -2px -2px 2px rgba(255,255,255,0.2);
}
body > div > footer > hr {
  margin-top: -1px;
}

body > div > main {
  display: flex;
  max-width: none;
  width: 100%;
  padding: 0;
}
body > div > main > nav ul {
  padding: 0 10px;
  margin: 10px 0 10px auto;
  list-style: none;
  border-right: thin solid black;
}
body > div > main > nav ul img {
  break-before: avoid;
}
body > div > main > nav {
  max-width: 300px /* match site hgroup */;
  min-width: 150px;
  flex-grow: 1;
  margin-left: 10px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: end;
}
body > div > main > nav > table {
  border-collapse: collapse;
  margin-bottom: 8px;
}
body > div > main > nav > td a {
  overflow: hidden;
  text-overflow: ellipsis;
}
body > div > main > nav ul,
body > div > main > nav table {
  border-right: thin solid black;
}
body > div > main > nav li {
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 3px 0;
}
body > div > main > nav hr {
  margin: 10px;
  height: 0;
}
body > div > main > nav > a {
  display: block;
}
body > div > main > nav li img {
  margin: 0;
  border: none;
  height: 1em;
}
body > div > main > nav li img[src$="/textcollector-icon.svg"] { margin-bottom: -0.3em; height: 1.15em; }
body > div > main > nav li img[src$="/ssr-icon.svg"] { margin: 0 0.1em -0.1em 0.05em; }
body > div > main > nav li img[src$="/ksx-icon.png"] { margin-bottom: -0.25em; height: 1.1em; }
body > div > main > nav li img[src$="/qwertywar-icon.ico"] { margin-bottom: -0.1em; }
body > div > main > nav > table td:last-child {
  width: 3ex;
  padding-right: 10px;
}
body > div > main > nav + .gutter {
  width: 70px;
  flex-shrink: 1;
}
body > div > main > .gutter + * {
  flex-grow: 1;
  margin-left: 10px;
}
body > div > main h1:first-child {
  margin-top: -4px;
  margin-bottom: 5px;
  color: #aaa;
}