:root {
    --code-background-color: #dfe1e3;
    --code-block-background-color: #eceef1;
    --copy-button-background-color: var(--code-block-background-color);
    --copy-button-background-hover-color: rgb(212, 214, 218);
    --green-filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(3879%) hue-rotate(110deg) brightness(93%) contrast(105%);
}

[data-theme="dark"] {
    /*--code-background-color: #2c343d;*/
    --code-background-color: #2e363e;
    /*--code-block-background-color: #1b222c;*/
    --code-block-background-color: #1c232c;
    --copy-button-background-color: #272f3c;
    --copy-button-background-hover-color: #313843;
    --green-filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(3879%) hue-rotate(110deg) brightness(93%) contrast(105%);
}

@media (min-width: 100px) {

    .hljs {
        /*Reset default code highlighter theme background doesn't work because code.css is loaded before
        as code highlight css is loaded dynamically. Fix was to remove the background color from github-light.min and
        unikitty-dark.min.css not very clean but easy.*/
        background: inherit;
    }

    code {
        background: var(--code-background-color);
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 16px;
    }

    h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
        font-size: 0.9em;
    }

    pre code {
        padding: 0;
        background: none;
        font-size: 12px;
    }

    pre {
        background: var(--code-block-background-color);
        /*Center code in pre block*/
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-radius: 10px;
        overflow: auto;
        line-height: 20px;
        position: relative;
    }

    /*Checkmark button*/
    pre button {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 10px;
        right: 10px;
        background: none;
        padding: 5px;
        border: 1px solid var(--copy-button-background-hover-color);
        color: var(--copy-button-background-color);
        background: var(--copy-button-background-color);
        border-radius: 5px;
        cursor: pointer;
    }

    pre button img {
        height: 20px;
        filter: invert(50%) sepia(80%) saturate(100%) hue-rotate(180deg) brightness(85%) contrast(60%);
    }

    pre button:hover {
        background: var(--copy-button-background-hover-color);
        color: white;
    }

    pre button.copied img {
        filter: brightness(0) saturate(100%) invert(31%) sepia(26%) saturate(7309%) hue-rotate(109deg) brightness(96%) contrast(98%);
    }

    pre button.copied {
        border: 1px solid #029502;
    }

    pre button.copied:hover {
        background: var(--copy-button-background-color);
    }
}

@media (min-width: 641px) {
    code {
        font-size: 16px;
    }
    pre code {
        font-size: 14px;
    }
}