#editor h1, #editor h2, #editor h3{
    font-weight: 600;
}

#editor > *+*{
    margin-bottom: 5px;
}

#editor h1{
    font-size: 35px;
}

#editor h2{
    font-size: 30px;
}

#editor h3{
    font-size: 26px;
}

#editor pre{
    padding: 10px;
    background-color: #f4f4f5;
    overflow-x: auto;
}

#editor a{
    color: #0985c3;
}

/* Container styling */
.blog-container {
    padding: 2rem 1rem;
    margin: 0 auto;
    min-height: 100vh;
}

/* Card container styling */
.blog-card {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 0 auto;
    width: 100%;
}

/* Responsive container widths */
@media (min-width: 768px) {
    .blog-card {
        width: 80%;
    }
}

@media (min-width: 1024px) {
    .blog-card {
        width: 80%;
    }
}

/* Existing editor styles */
#editor {
    /* Text styling */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #2d3748;
    line-height: 1.8;
}

/* Headings */
#editor h2 {
    font-size: 1.875rem; /* 30px */
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#editor h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Paragraphs and spacing */
#editor p {
    margin-bottom: 1.25rem;
}

/* Lists */
#editor ul, #editor ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
}

#editor li {
    margin-bottom: 0.5rem;
}

/* Code blocks */
#editor pre {
    background-color: #f7fafc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

#editor code {
    font-family: "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
}

/* Inline code */
#editor p code {
    background-color: #f7fafc;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Links */
#editor a {
    color: #4299e1;
    text-decoration: none;
    transition: color 0.2s;
}

#editor a:hover {
    color: #2b6cb0;
    text-decoration: underline;
}

/* Images */
#editor img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* Blockquotes */
#editor blockquote {
    border-left: 4px solid #e2e8f0;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #4a5568;
}

/* Tables */
#editor table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

#editor th, #editor td {
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    text-align: left;
}

#editor th {
    background-color: #f7fafc;
    font-weight: 600;
}

/* Horizontal rule */
#editor hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 2rem 0;
}

/* Blog List Styles */
.blog-list-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.blog-list-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.blog-list-item:hover {
    transform: translateY(-2px);
}

.blog-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-category {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.blog-category.lifestyle {
    background-color: #F3E8FF;
    color: #9333EA;
}

.blog-category.technology {
    background-color: #E0F2FE;
    color: #0284C7;
}

.blog-category.travel {
    background-color: #DCFCE7;
    color: #16A34A;
}

.blog-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.blog-description {
    color: #4B5563;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6B7280;
    font-size: 0.875rem;
}

.blog-author-image {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
}

.blog-date {
    color: #6B7280;
}

.blog-meta-separator {
    color: #9CA3AF;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .blog-title {
        font-size: 1.875rem;
    }

    .blog-description {
        font-size: 1.125rem;
    }
}

/* Featured blog styles (for larger first item) */
.blog-list-item.featured .blog-title {
    font-size: 2rem;
}

.blog-list-item.featured .blog-description {
    font-size: 1.25rem;
}

/* Grid layout for multiple columns (optional) */
@media (min-width: 1024px) {
    .blog-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .blog-list-item.featured {
        grid-column: 1 / -1;
    }
}