img { display: block; margin-left: auto; margin-right: auto; }
code { white-space: pre;  overflow-x: auto; display: inline-block; max-width: 100%; vertical-align: middle; }
table { table-layout: fixed; }

/* svg */
/* inline svg files; seemingly recommended */

/* buttons within a grid */
div.grid > button {
  /* border */
  --pico-border-width: 0.1rem;
  /* border: 2px solid blue; */

  /* font */
  /* font-family: var(--pico-font-family-monospace); */

  /* height */
  min-height: 5rem;
}

/* kbd font */
/* kbd { */
/*   --pico-font-weight: Semi Bold; */
/* } */

/* kbd color */
[data-theme=light], :root:not([data-theme=dark]) {
  .l1 { --pico-code-kbd-background-color: rgb(0, 137, 90); }
       /* --pico-code-kbd-color: #fff; */
  .l2 { --pico-code-kbd-background-color: rgb(183, 136, 0); }
  .l3 { --pico-code-kbd-background-color: rgb(175, 41, 29); }
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    .l1 { --pico-code-kbd-background-color: rgb(0, 166, 110); }
    .l2 { --pico-code-kbd-background-color: rgb(216, 161, 0); }
    .l3 { --pico-code-kbd-background-color: rgb(197, 47, 33); }
  }
}

[data-theme=dark] {
  .l1 { --pico-code-kbd-background-color: rgb(0, 166, 110); }
  .l2 { --pico-code-kbd-background-color: rgb(216, 161, 0); }
  .l3 { --pico-code-kbd-background-color: rgb(197, 47, 33); }
}