code, kbd, samp, pre {
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

pre {
  overflow-x: auto;
  color: var(--code-color);
  background-color: var(--code-bg-color);
  border-radius: var(--border-radius);
  padding: 0.8rem;
  margin-block: 0.5rem;
  line-height: var(--line-height-code);
  scrollbar-color: var(--code-color) transparent;
}

code {
  color: var(--code-color);
  background-color: var(--code-bg-color);
  display: inline-block;
  line-break: anywhere;
  line-height: var(--line-height-code);
  margin-block: 0.1rem;
}

p code {
  line-break: strict;
}

pre > code {
  padding: 0;
  margin: 0;
  display: contents;
  background: none;
  font-size: var(--font-size-code);
}

code, kbd {
  border-radius: var(--border-radius);
  padding: 0.15rem 0.375rem;
}

kbd {
  background-color: var(--blockquote-bg-color);
  text-shadow: 0 0 10px var(--code-color);
}

mark {
  filter: blur(3px);
  color: var(--main-color);
  background-color: transparent;
  transition: 0.2s ease-in-out;
  transition-property: all;
}

mark:hover {
  filter: none;
}