pre {
    counter-reset: listing;
    position: relative;
    border: black solid 1px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px lightgray;
}

.copy-button {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;

    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.copy-button:hover {
    background-color: lightgrey;
}

.copy-button:active {
    background-color: gray;
}

.copy-button .copy-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("/static/svg/copy-regular.svg");
    background-repeat: no-repeat;
}

pre:hover .copy-button {
    opacity: 100%;
}

pre .code-line:before {
    counter-increment: listing;
    content: counter(listing) ". ";
    display: inline-block;
    width: 3.5em;
    text-align: right;
    margin-right: 1rem;
    border-right: 1px solid;
}

pre code {
    display: block;
    overflow-y: scroll;

    font-family: "JetBrains Mono";
    line-height: 1.5rem;

    padding: 1rem;
    padding-left: 0;
}

p:has(span.math-block),
p:has(img),
p:has(pre) {
    display: grid;
    justify-content: center;
    padding: 2rem;
}

p code,
p span.math-inline {
    background-color: rgba(91, 207, 251, 0.4);
    padding: 4px;
    padding-bottom: 5px;
    border-radius: 5px;
}