code {
    border-radius: .25rem;
    padding: .125rem .25rem;
    font-size: 85%;
    line-height: 1.25;
    color: var(--color-text)
}

code,pre {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

pre {
    white-space: pre-wrap;
    line-height: 1.7142857143;
    background: #1d2434;
    color: #fff;
    border-radius: .25rem;
    padding: 1rem 1.5rem;
    font-size: 13px;
    word-break: break-word;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    overflow: auto;
    max-height: 25rem
}

pre::-webkit-scrollbar {
    width: 16px;
    cursor: pointer
}

pre::-webkit-scrollbar-track {
    background: transparent;
    border: 3px solid transparent
}

pre::-webkit-scrollbar-thumb {
    background: hsla(0,0%,100%,.1);
    border-radius: 100vh;
    background-clip: padding-box;
    border: 5px solid transparent;
    box-shadow: inset 0 0 15px 15px transparent;
    -webkit-transition: box-shadow .5s;
    transition: box-shadow .5s
}

pre::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 15px 15px hsla(0,0%,100%,.4)
}

pre:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 15px 15px hsla(0,0%,100%,.2)
}

pre code {
    background: transparent;
    border-radius: 0;
    border: none;
    font-size: 1em;
    display: block;
    padding: 0;
    color: inherit;
    white-space: pre-wrap!important;
    line-height: inherit
}

.codeblock {
    position: relative;
    left: 50%;
    max-width: 64rem;
    transform: translate(-50%);
    width: 100%
}

.codeblock-copy {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1
}

.codeblock-copyable pre {
    padding-right: 4rem
}