/* The help text: styles for the standalone /help.html page and the in-game
   help popup (both show #help-content). */
.help-page {
  margin: 0;
  background: #1b2a1b;
  color: #eaf2e0;
  font-family: system-ui, sans-serif;
}

.help-page #help-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

#help-content { line-height: 1.5; font-size: 14px; }
#help-content h1 { margin: 0 0 6px; font-size: 22px; }
#help-content h2 { margin: 22px 0 6px; font-size: 15px; color: #a9c98f; text-transform: uppercase; letter-spacing: 0.06em; }
#help-content .lead { margin: 0 0 8px; color: #c7d9b8; }
#help-content ul { margin: 0; padding-left: 20px; }
#help-content li { margin: 3px 0; }
#help-content .tip { color: #a9c98f; font-size: 13px; }

#help-content table.keys { border-collapse: collapse; width: 100%; }
#help-content table.keys td { padding: 4px 8px; border-bottom: 1px solid #2c3d22; vertical-align: top; }
#help-content table.keys td:first-child { white-space: nowrap; width: 1%; color: #c7d9b8; }

#help-content kbd {
  display: inline-block;
  min-width: 18px;
  margin: 0 1px;
  padding: 0 5px;
  border: 1px solid #5a7a44;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #16210f;
  color: #eaf2e0;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  text-align: center;
}