.bg-grey-card {
    background-color: #2e2e2e;
    /* Neutral grey that works in all modes */
    padding: 15px;
    border-radius: 10px;
    /* Smooth rounded edges */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    /* Subtle depth */
    margin: 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Slightly visible border */
    color: #f5f5f5;
    /* Ensures text is readable */
}

/* Ensure all text inside remains readable */
.bg-grey-card a {
    color: #61dafb;
    /* Subtle blue for links */
    text-decoration: none;
}

.bg-grey-card a:hover {
    text-decoration: underline;
}

.bg-grey-card strong {
    color: #ffffff;
    /* Keeps bold text strong */
}

.bg-grey-card code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 3px 6px;
    border-radius: 5px;
    font-family: monospace;
}

.bg-grey-card h4 {
    color: inherit;
    /* Ensures the text color remains consistent */
    margin-top: 10px;
    font-size: 1.25rem;
    /* Adjust as needed */
    font-weight: bold;
}