body {
  background-color: black;
  color: rgb(220, 220, 220);
  padding: 0px 100px;
}
h1 {
  color: rgb(240, 240, 240); font-family:monospace; text-align: center; font-size: 2.5rem;
}
p,ul,ol {
  color: rgb(240, 240, 240); font-family:arial; font-size: 20px; letter-spacing: 0.05em;
}
table {
  color: rgb(220, 220, 220); font-family:arial; font-size: 0.9em; letter-spacing: 0.05em;
}
h3 {
  color: white; bottom:0; font-family:monospace; width: 100%; text-align: center; font-size: 1.5rem;
}
a {
  color: #00ff41;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.indexlink {
  color: rgb(240, 240, 240); font-family:arial; font-size: 20px; letter-spacing: 0.05em; padding: 0px 0px;
}
img {
    display: block;
    max-height: 100%;
    max-width: 80%;
    margin: auto;
}
.ulink:hover {
  text-decoration: none;
}
@media screen and (max-width: 800px) {
  
  img {
    max-width: 100%;
}
}
@media screen and (max-width: 600px) {
  body {
    padding: 0px 20px
  }
}

pre {
  background-color: rgb(20, 20, 20); border: 1px solid #00ff41; border-radius: 0; padding: 12px 16px; overflow-x: auto;
  font-family: monospace; font-size: 15px; letter-spacing: 0; line-height: 1.45; white-space: pre;
}
code {
  font-family: monospace; letter-spacing: 0; overflow-wrap: anywhere;
}
:not(pre) > code {
  font-family: monospace, monospace; font-size: inherit; color: rgb(203, 203, 203);
}
pre {
  max-width: 100%; box-sizing: border-box;
}
pre code {
  color: rgb(230, 230, 230);
}
p code {
  font-size: 18px;
}

/* a section heading: the anchored name at the start of a paragraph (Examples, Command Line Options, API Reference) */
p:has(> span[id]) {
  margin-top: 2.2em;
}
p > span[id] {
  font-family: monospace; font-size: 24px; color: white;
}

/* the certificate at the end of the Tutorial page: The Matrix Dex style (Consolas; black, white and green) */
.certificate {
  display: block; box-sizing: border-box; width: 100%; max-width: 680px; margin: 3em auto 1em;
  padding: clamp(18px, 5vw, 40px); background-color: black; color: white; text-align: center;
  border: 3px solid #00ff41; border-radius: 0;
  font-family: Consolas, "Lucida Console", "Courier New", monospace; letter-spacing: 0.04em;
}
.cert-logo {
  display: block; margin: 0 auto 1.2em; width: clamp(48px, 14vw, 84px); height: auto; max-width: none;
}
.cert-title {
  display: block; color: white; font-size: clamp(26px, 8vw, 44px); letter-spacing: 0.18em; margin: 0.2em 0;
}
.cert-role {
  display: block; color: #00ff41; font-size: clamp(15px, 4.6vw, 22px); letter-spacing: 0.14em; margin-bottom: 1.2em;
  padding-bottom: 0.8em; border-bottom: 1px solid #00ff41;
}
.cert-text {
  display: block; color: white; font-size: clamp(14px, 3.8vw, 17px); line-height: 1.6; margin: 0.6em 0;
}
.cert-foot {
  display: block; color: #00ff41; font-size: clamp(11px, 3vw, 14px); letter-spacing: 0.12em; margin-top: 1.4em;
}
/* two signatures side by side */
.cert-sign {
  display: flex; justify-content: space-between; gap: clamp(12px, 5vw, 40px); margin-top: 2.4em;
}
.cert-signer {
  display: block; flex: 1 1 0; color: #00ff41; font-size: clamp(11px, 3.2vw, 18px); line-height: 1.4; white-space: nowrap;
}

/* ---- the ledger pages: the ledger, the example offer and the example auction ----
   These rules are the ledger look of the default styles.css of a ledgdex (py/ledgdex/styles.css). They apply only
   to the pages that ledgdex makes from the docs ledger. The page template puts the title of each page in the
   data-title attribute of <body>. All the other pages keep the docs look above. */

/* each line of a page is one ruled row of the book */
body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]) > p {
  margin: 0;
  padding: 0.5rem 0.9rem 0.5rem 1.1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.6;
  border-bottom: 1px solid rgb(42, 42, 42);
  overflow-wrap: anywhere;
}
body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]) > p:nth-of-type(even) {
  background-color: rgb(12, 12, 12);
}

/* the first line under the title is the total of the page: green */
body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]) > h1 + br + p {
  color: #00ff41;
  background-color: transparent;
}

body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]) code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
  color: rgb(156, 156, 156);
  overflow-wrap: anywhere;
}

/* The value of a line goes on a second row. On the ledger page (it links to ledgdex.jsonl), break before the last
   code of each line. On the offer and the auction pages, break only in a line with one code. */
body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]):has(> p > a[href="ledgdex.jsonl"]) > p > code:last-child::before,
body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]):not(:has(> p > a[href="ledgdex.jsonl"])) > p > code:only-of-type::before {
  content: "\A  ";
  white-space: pre;
}

@media screen and (max-width: 600px) {
  body:is([data-title="Ledgdex Docs ledger"], [data-title^="Example offer: "], [data-title^="Example auction: "]) > p {
    font-size: 14px;
    padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  }
}