kbd {
  font-family:      var(--font-mono);
  font-size:        14px;
  background-color: var(--color-kbd-bg);
  color:            var(--color-kbd-fg);
  padding:          3px 6px;
  border:           1px solid var(--color-kbd-border);
  border-radius:    6px;
  box-shadow:       2px 2px lightgray;
}

code {
  font-family: var(--font-mono);
}

code:not(pre *) {
  font-size: .8em;
  background-color: var(--color-code-bg);
  color:            var(--color-code-fg);
  padding:          2px 5px;
  border:           1px solid var(--color-code-border);
  border-radius:    6px;
}

pre:has(code) {
  font-size:        .9em;
  background-color: var(--color-codeblock-bg);
  color:            var(--color-codeblock-fg);
  padding:          16px;
  border:           1px solid var(--color-codeblock-border);
  border-radius:    10px;
  margin-top:       var(--paragraph-spacing);
  margin-bottom:    var(--paragraph-spacing);
  overflow-x:       auto;
}