nav {
    padding-left: 1rem;
    padding-right: 1rem;
}

body {
    min-height: 100vh; /* Use viewport height for better responsiveness */
    background-color: black !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: white;
}

.example-wrapper {
    margin: 1em auto;
    max-width: 800px;
    width: 95%;
    font: 18px/1.5 sans-serif;
    color: white;
}

.example-wrapper code {
    background: #F5F5F5;
    padding: 2px 6px;
}

.supportLinks {
    color: #ffcc00 !important;
}

.dark-modal {
    background-color: #222; /* Even darker background for this specific modal */
    color: #ccc; /* Adjusted text color for contrast */
}

/* Additional styles for better mobile responsiveness */
@media (max-width: 576px) {
    .example-wrapper {
        font-size: 16px; /* Slightly smaller font size for mobile */
        padding: 1em; /* Add padding for better spacing */
    }

    nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.qonzer-card {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: #f8f9fa; /* Light grey background */
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: row; /* Align elements horizontally */
    align-items: center; /* Center items vertically */
    justify-content: start; /* Align items from the start */
    z-index: 1050;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds shadow for better visibility */
    width: 300px; /* Fixed width for larger screens */
    max-width: 90%; /* Adjust width to accommodate content on smaller screens */
    height: auto; /* Adjust height to fit content */
    overflow: hidden; /* Keeps all content within the boundaries of the card */
}

.qonzer-card img {
    width: 50px; /* Fixed size for the image */
    height: 50px; /* Fixed size for the image */
    margin-right: 10px;
}

.qonzer-card p {
    flex-grow: 1; /* Allow the paragraph to take up remaining space */
    margin: 0; /* Remove default margin */
}

/* Media query for smaller screens */
@media (max-width: 576px) {
    .qonzer-card {
        bottom: 10px;
        left: 10px;
        right: 10px; /* Add right position for better alignment */
        width: auto; /* Full width on smaller screens */
        max-width: 95%; /* Slightly smaller max-width for padding */
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items from the start */
    }

    .qonzer-card img {
        margin-bottom: 10px; /* Space between image and text */
        width: 40px; /* Smaller size for mobile */
        height: 40px; /* Smaller size for mobile */
    }

    .qonzer-card p {
        text-align: center; /* Center text for better readability */
    }

    .qonzer-card .btn-close {
        position: absolute; /* Position close button in the corner */
        top: 5px;
        right: 5px;
    }
}