html { font-family: system-ui, sans-serif; line-height: 1.5; font-weight: 300; margin: 0 5%; }
html.home { background: linear-gradient(to bottom, #eee, #fff) repeat-x; background-size: auto 100vh }
body { max-width: 50em; margin: 0 auto; padding: 2em 0 4em; }
html.home body { padding-top: 0; }
img { max-width: 100%; }
h1 { margin-top: 1.5em; margin-bottom: 1.5em; font-size: 3em; line-height: 1.1; color: #333; font-weight: 800; }
h2, h3 { margin-top: 3em; }
.book-cover + h2 { margin-top: 1.5em; }
h2, h3, th, strong { font-weight: 600; color: #222; }
h2 code, h3 code, th code, strong code { color: black; font-size: inherit; }
pre, code { font-family: Andale Mono, Monaco, Consolas, Lucida Console, monospace; font-size: 0.875em; white-space: pre-wrap; }
pre code { display: block; font-size: inherit; }
pre { margin: 1em; }
code.language-dom-tree { line-height: normal; }
code.language-html { background: #444; color: white; padding: 0.5em 1em; margin-left: -1em; margin-right: -1em; border-radius: 5px; }

table { border-collapse: collapse; border: hidden; }
th, td { border: 1px solid gray; padding: 0 0.5em; vertical-align: baseline; text-align: left; }

.book-cover { text-align: center; min-height: 100vh; display: grid; align-items: center; }
.book-cover h1 { font: inherit; margin: 0; }
.book-cover svg { display: block; margin: 0 auto; max-height: 100vh; }

ul.toc { padding: 0; }
ul.toc > li { list-style-type: none; display: flex; margin-bottom: 1em; border-bottom: 2px silver solid; }
ul.toc > li span { flex-grow: 1; text-align: right; font-variant-numeric: tabular-nums; }
ul.toc > li > a { text-decoration: none; }

nav.toc li { list-style-type: none; }
nav.toc > ol { margin-left: 0; padding-left: 0; }
summary { color: #578057; font-size: small; font-weight: bold; cursor: default; text-align: center; border-bottom: 0.25em solid darkseagreen; user-select: none; }

details[open] > summary ~ * {
  animation: fade-in .25s ease-in;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

nav { border-bottom: 0.25em solid darkseagreen; }
nav.next { margin-top: 3em; border-top: 0.25em solid darkseagreen; text-align: right; }
footer { font-size: small; text-align: center; }

blockquote { border-left: 0.25em solid darkseagreen; padding: 0.25em 1.25em 0.25em 1em; margin-left: 1em; margin-right: 1em; background-color: whitesmoke; }
blockquote blockquote { margin-left: 0; margin-right: 0; }

:link { color: #244fd3; }
:visited { color: #714d8f; }
:any-link { text-decoration-color: silver; }
:any-link:hover { text-decoration-thickness: 2px; text-decoration-skip-ink: none; }
:any-link:active { color: darkred; }

.selected-text-file-an-issue { position: fixed; bottom: 0; right: 0; padding: 0.25em; color: inherit !important; }
.octicon-issue-opened { fill: currentColor; vertical-align: middle; }

@media (prefers-color-scheme: dark) {
  html, html.home { background: #333; color: white; }
  h1, h2, h3, th, strong, html code { color: #eee; }
  code.language-html { background-color: #222; color: #ddd; }
  blockquote { background-color: #3e3e3e; }
  ul.toc > li { border-bottom-color: gray; }
  summary { color: darkseagreen; }
  summary, nav, nav.next, blockquote { border-color: #578057; }
  :link { color: gold; }
  :visited { color: #dfa920; }
  :any-link { text-decoration-color: gray; }
  :any-link:active { color: pink; }
  #book-cover-shadow feDropShadow { flood-opacity: 1; }
  img[src$="/sample-ruby-ja.png"] { mix-blend-mode: color-dodge; filter: invert(); }
}