.code-container {
    position: relative;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}

.copy-button {
    position: absolute;
    top: 1.5rem;
    right: 0.5rem;
    z-index: 10;
    background-color: transparent;
    border: none;
    color: whitesmoke; /* Set both default and hover color to gray */
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.copy-button i {
    margin-right: 0.25rem;
}

.copy-button span {
    display: none;
}

.copy-button:hover span {
    display: inline;
}



pre {
    margin: 0;
    background: transparent;
    padding: 0;
    overflow: auto;
}

/* Override comment color in Highlight.js */
.hljs-comment {
    color: #e2b888 !important; /* Change to your desired color */
    font-style: italic; /* Optional: make comments italic */
}
/* Targeting the text pattern <string> and coloring it orange */
.hljs .hljs-string {
    color: rgb(223, 152, 20);
}

.hljs-punctuation, .hljs-tag {
    color: rgb(223, 152, 20) !important;
}
.hljs-variable, .hljs-number {
    color: rgb(223, 152, 20) !important;
}
.hljs-name{
    color: whitesmoke !important;
}

/* Override bold text styling applied by hljs */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-type,
.hljs-strong,
.hljs-string,
.hljs-number,
.hljs-title {
    font-weight: normal !important; /* Set font weight to normal */
}