.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content p,
.blog-content ul {
    margin-bottom: 20px;
    margin-top: 20px;
    font-family: inherit;
    color: black;
}

.blog-content li {
    margin-left: 50px;
    font-size: 16px;
    line-height: 38px;
    list-style-type: circle
}

.blog-content a {
    color: rgb(204, 43, 78);
    text-decoration: underline;
}

/* Enhanced Code Block Styling for both HTML and Markdown */
.blog-content pre {
    font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    white-space: pre-wrap;
    overflow-x: auto;
    background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
    color: #e6e6e6;
    padding: 20px;
    line-height: 1.6;
    border-radius: 12px;
    border: 1px solid #404040;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    position: relative;
    font-size: 14px;
}

/* Code block header with language indicator */
.blog-content pre::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 20px;
    background: #404040;
    color: #e6e6e6;
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Code inside pre tags */
.blog-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    font-family: inherit;
    border: none;
    box-shadow: none;
}

/* Inline code styling */
.blog-content code:not(pre code) {
    background: #f8f9fa;
    color: #e83e8c;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    font-size: 0.9em;
    border: 1px solid #e9ecef;
}

/* Syntax highlighting for common languages */
.blog-content pre code.language-javascript,
.blog-content pre code.language-js {
    color: #f8f8f2;
}

.blog-content pre code.language-php {
    color: #f8f8f2;
}

.blog-content pre code.language-html {
    color: #f8f8f2;
}

.blog-content pre code.language-css {
    color: #f8f8f2;
}

.blog-content pre code.language-python {
    color: #f8f8f2;
}

.blog-content pre code.language-bash,
.blog-content pre code.language-shell {
    color: #f8f8f2;
}

/* Copy button styling */
.blog-content pre .copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #404040;
    color: #e6e6e6;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.blog-content pre:hover .copy-button {
    opacity: 1;
}

.blog-content pre .copy-button:hover {
    background: #505050;
    transform: translateY(-1px);
}

/* Responsive design for code blocks */
@media (max-width: 768px) {
    .blog-content pre {
        padding: 15px;
        font-size: 13px;
        margin: 15px 0;
    }

    .blog-content pre::before {
        right: 15px;
        padding: 3px 8px;
        font-size: 11px;
    }
}

.blog-content blockquote {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    border-left: 4px solid #fc4899;
    font-size: 20px;
    line-height: 32px;
    margin: 40px 0;
    padding: 10px;
    background: #FAFAFB;
}


/* .blog-content blockquote {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-weight: 400;
    background-color: rgb(240, 235, 235);
    color: #141618;
    border-left-width: 1px;
    border-left: 2px solid #cbcdce;
    quotes: "> """"> """;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    font-size: 1.5rem;
    padding: 1rem;
    line-height: .5rem;
} */