code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    border-radius: 5px;
    padding: 0.3em;
}

pre {
    tab-size: 4;
    background-color: transparent;
    white-space: pre;
    width: fit-content;
    padding: 0;
    margin: 0;
}

pre > code {
    padding: 0;
    white-space: pre;
}

.custom-code-block {
    position: relative;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem;
}
.custom-code-block-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0;
    overflow-x: auto;
    background-color: transparent;
}

.custom-code-block-header {
    position: relative;
    right: 0;
    box-sizing: border-box;
    width: 100%;
}

.custom-code-block-header > button {
    border: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: transparent;
    color: var(--fg-color-1);
    font-family: inherit;
    cursor: pointer;
}

.custom-code-block-header > button:active {
    background-color: var(--bg-color-1);
}

.custom-code-block-wrapper pre > code > span:target {
    background-color: yellow;
}


/* syntax highlighting colorscheme */
/* Alert */
code span.al {
    color: #ff0000;
    font-weight: bold;
}
/* Annotation */
code span.an {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}
/* Attribute */
code span.at {
    color: #7d9029;
}
/* BaseN */
code span.bn {
    color: #40a070;
}
/* BuiltIn */
code span.bu {
    color: #008000;
}
/* ControlFlow */
code span.cf {
    color: #007020;
    font-weight: bold;
}
/* Char */
code span.ch {
    color: #4070a0;
}
/* Constant */
code span.cn {
    color: #880000;
}
/* Comment */
code span.co {
    color: #60a0b0;
    font-style: italic;
}
/* CommentVar */
code span.cv {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}
/* Documentation */
code span.do {
    color: #ba2121;
    font-style: italic;
}
/* DataType */
code span.dt {
    color: #902000;
}
/* DecVal */
code span.dv {
    color: #40a070;
}
/* Error */
code span.er {
    color: #ff0000;
    font-weight: bold;
}
/* Extension */
code span.ex {
}
/* Float */
code span.fl {
    color: #40a070;
}
/* Function */
code span.fu {
    color: #06287e;
}
/* Import */
code span.im {
    color: #008000;
    font-weight: bold;
}
/* Information */
code span.in {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}
/* Keyword */
code span.kw {
    color: #007020;
    font-weight: bold;
}
/* Operator */
code span.op {
    color: #666666;
}
/* Other */
code span.ot {
    color: #007020;
}
/* Preprocessor */
code span.pp {
    color: #bc7a00;
}
/* SpecialChar */
code span.sc {
    color: #4070a0;
}
/* SpecialString */
code span.ss {
    color: #bb6688;
}
/* String */
code span.st {
    color: #4070a0;
}
/* Variable */
code span.va {
    color: #19177c;
}
/* VerbatimString */
code span.vs {
    color: #4070a0;
}
/* Warning */
code span.wa {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}