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

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 {
  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;
}
body > div > main > nav > a {
  display: block;
  margin-bottom: 30px;
}
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;
}