body {
  max-width: 48.5em;
  margin: 2em 1em 2em 3em;
  padding: 0 1em;
  font-family: Times, "Times New Roman", serif;
  font-size: 1.1em;
  line-height: 1.4;
  color: #ddd;
  background: #333;
  text-align: left;
}

h1, h2, h3 {
  font-weight: bold;
  line-height: 1.2;
}

p, ul, blockquote, table { margin: 0 0 1em 0; }

a:link {
  color: #fff0d8;
  text-decoration: underline;
}

a:visited {
  color: #e0e4ff;
}

code, pre, kbd, time { font-family: Courier, monospace; }

hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 1.5em 0;
}

h1, .title, .back, body > h1 ~ * { margin-left: 6rem; }
.title { width: fit-content; text-align: center; }

.nav {
  margin-top: 3em;
  padding: 0.5em 1em;
  width: 12em;
  min-height: 14em;
  border: 1px solid #8a5a2e;
  background: #8a5a2e;
  list-style: none;
}

.title h1 { margin: 0; }
.title img { display: block; max-width: 100%; height: auto; margin: 0 auto 0.4em; }

.back { font-size: 1.4em; }

.works { list-style: none; padding-left: 0; margin-top: 2em; border: 1px solid #b09878; border-top: 0; }
.works li { padding: 0.8em 0.6em 0.8em 8.6em; border-top: 1px solid #b09878; overflow: hidden; }
.works .date { float: left; width: 6.4em; margin: -0.8em 0 -100em -8.6em; padding: 0.8em 0.4em 100em 0.6em;
  white-space: nowrap; background: #8a5a2e; color: #fff0d8; }

.links { list-style: none; width: fit-content; padding: 0.8em 1.6em 0.8em 1.2em; background: #3a4a63; }

@media (max-width: 40em) {
  body { margin: 1em; }
  h1, .title, .back, body > h1 ~ * { margin-left: 0; }
  .works li { padding: 0.6em; }
  .works .date { float: none; display: block; width: auto; margin: -0.6em -0.6em 0.6em; padding: 0.4em 0.6em; }
}