:root { color-scheme: dark; }

body {
  max-width: 620px;
  margin: 30px auto;
  padding: 0 18px;
  background: #202020;
  color: #dedede;
  font: 18px/1.5 "Times New Roman", serif;
}

header p { margin: 0 0 8px; }
hr { border: 0; border-top: 1px solid #454545; }
header hr { margin-top: 16px; }
main { margin: 28px 0 55px; }
h1 { font-size: 30px; line-height: 1.2; }
a { color: #c8c8c8; }
a:visited { color: #a8a8a8; }
a:hover { color: #f0f0f0; }
a:focus-visible { outline: 2px solid; outline-offset: 3px; }
.avatar { display: block; border: 1px solid #656565; }
footer { color: #a3a3a3; }

.poem-row { display: block; margin: 22px 0; }
.poem-number { color: #a3a3a3; margin-right: 6px; }
.poem-name { text-decoration: underline; }
.poem-date { display: block; color: #a3a3a3; font-size: 14px; }
.poem-row .poem-date { margin-left: 23px; }
.poem-row { text-decoration: none; }
.poem-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.poem-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
.poem-nav[hidden] { display: none; }
.skip { position: absolute; top: -100px; }
.skip:focus { top: 0; background: #202020; }

@media (max-width: 480px) {
  body { margin: 18px auto; }
  h1 { font-size: 27px; }
}