pre,
code,
kbd,
samp {
    font-family: "Sauna Mono";
    border-radius: 0.25rem;
}

code {
  padding: 0.25rem 0.5rem;
  background-color: var(--inline-code-color);
}

pre {
    color: var(--text-color);
    margin: 2rem 0;
}

pre code {
    background: var(--background-code-color);
    display: block;
    overflow-x: auto;
    line-height: 1.5;
    padding: 1.25rem 1.5rem;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.hljs {
    padding: 1.25rem 1.5rem;
}

@media screen and (max-width: 540px) {
    pre,
    code,
    kbd,
    samp {
        border-radius: 0;
    }

    pre {
        margin: 2rem -1.5rem;
    }
}

pre code::-webkit-scrollbar {
  height: 0.25rem;
}

pre code::-webkit-scrollbar-thumb {
  background: #e9ecef;
}

pre code:hover {
    scrollbar-width: thin;
    scrollbar-color:  #e9ecef;
}

pre code::-webkit-scrollbar-thumb:hover {
  background: #e9ecef;
}