/* Styling for the code block */
pre {
    counter-reset: line; /* Reset the counter for line numbers */
    line-height: 1.2em; /* Reduce line height for compact spacing */
    white-space: pre; /* Prevent word wrapping */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrolling */
    background-color: #f5f5f5; /* Set background color */
    padding: 5px; /* Reduce padding to minimize space */
    border-radius: 5px; /* Optional: Rounded corners */
    border: 1px solid #ddd; /* Optional: Border style */
    margin: 0; /* Remove default margins */
    font-family: 'Courier New', Courier, monospace; /* Use a monospace font */
    max-width: 100%; /* Ensure the code block does not exceed container width */
}

/* Styling for the code lines inside the <pre><code> block */
pre code {
    display: block; /* Make code content block-level */
    background-color: inherit; /* Ensure background color extends when scrolling */
    width: max-content; /* Ensure the code block extends based on content size */
    padding: 0; /* Remove extra padding */
    margin: 0; /* Remove extra margin */
}

/* Style for each line in the code block */
pre code span.code-line {
    display: block; /* Each line should be a block */
    padding: 0; /* Remove padding from each line */
    margin: 0; /* Remove margin from each line */
    padding-left: 3em; /* Space for line numbers */
    counter-increment: line; /* Increment the line counter */
    position: relative; /* Relative positioning to add line numbers */
}

/* Add the line number before each line */
pre code span.code-line:before {
    content: counter(line); /* Add line number */
    display: inline-block;
    width: 2em; /* Width of line number */
    position: absolute;
    left: 0; /* Position it to the left */
    text-align: right; /* Right-align the numbers */
    color: #888; /* Set color of line numbers */
    border-right: 1px solid #ddd; /* Optional: Separator line */
    margin-right: 1em; /* Space between line number and code */
}

/* Button Styling */
#copyButton {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#copyButton:hover {
    background-color: #0056b3;
}