/* =========================
   CODE BLOCKS
========================= */

pre[class*="language-"]{
    position:relative;
    overflow:auto;
    margin:24px 0;
    padding:22px;
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.98),
            rgba(2,6,23,.98)
        );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 10px 40px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.04);

    font-size:.95rem;
    line-height:1.7;

    scrollbar-width:thin;
}

pre[class*="language-"] code{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    text-shadow:none;
}

/* scrollbar */

pre[class*="language-"]::-webkit-scrollbar{
    height:10px;
}

pre[class*="language-"]::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.16);
    border-radius:999px;
}

/* copy button */

.code-copy-btn{
    position:absolute;
    top:12px;
    right:12px;

    border:none;
    border-radius:10px;

    padding:8px 12px;

    background:rgba(255,255,255,.08);
    color:#fff;

    font-size:.8rem;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
    backdrop-filter:blur(10px);

    z-index:10;
}

.code-copy-btn:hover{
    background:rgba(255,255,255,.16);
    transform:translateY(-1px);
}

/* language label */

.code-lang-label{
    position:absolute;
    left:14px;
    top:12px;

    padding:6px 10px;

    border-radius:999px;

    background:rgba(37,99,235,.18);

    color:#93c5fd;

    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;

    z-index:10;
}

pre[class*="language-"]{
    padding-top:56px;
}

/* mobile */

@media (max-width:768px){

    pre[class*="language-"]{
        padding:18px;
        padding-top:54px;
        border-radius:14px;
        font-size:.88rem;
    }

}