/* Custom styling for code blocks */

code:not([class*="language-"]) {
    background-color: #f0f0f0;
    padding: .1rem .2rem;
    border-radius: 3px;
    font-size: .9rem;
}

pre {
    margin: 2rem 0;
}

pre code {
    display: block;
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
}

.copy-to-clipboard-button span {
    display: none;
}

.copy-to-clipboard-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f328";
}

.copy-to-clipboard-button[data-copy-state="copy-success"]::before {
    content: "\f00c";
    color: #303841;
}

.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button {
    border: none;
    background-color: #303841;
    box-shadow: none;
    font-size: 1rem;
    margin: .1rem .2rem;
    cursor: pointer;
    color: #f9f9f9;
    height: 2rem;
    width: 2rem;
    text-align: center;
    transition: color 0.2s ease;
}

.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button:hover {
    background-color: #f9f9f9;
    color: #303841;
}

.marked pre code {
    background-color: #303841;
    font-size: .9rem;
    color: #d8dee9;
}

.token.keyword {
    color: #c695c6;
/*    font-weight: bold; */
}

.token.string {
    color: #99c794;
}

.token.builtin {
    color: #ec5f66;
}

.token.number {
    color: #f9ae58;
}

.token.comment {
    color: #a6acb9;
}

.token.function {
    color: #6699cc;
}

.token.class-name {
    color: #f9ae58;
}

.token.operator {
    color: #f97b58;
}

.token.punctuation {
    color: #a6acb9;
}

.token.attr-name {
    color: #f9ae58;
}

.token.attr-value {
    color: #ec5f66;
}