/* Light mode background for blog content */
.blog-content {
    background-color: #aebbb0;
    padding: 2em;
    /* Optional: set a min-height or other spacing if needed */
}

/* Dark mode for blog content */
body.dark-mode .blog-content {
    background-color: #181818;
}


/* Style the overall blog posts container */
#blog-posts {
    margin: 150px auto 2em;
    /* leave space for fixed header */
    max-width: 90%;
    padding: 1em;
}

/* Style individual posts */
#blog-posts .post {
    background-color: #ffffff;
    /* dark background that matches your theme */
    border-radius: 8px;
    padding: 1em 1.5em;
    margin-bottom: 1.5em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode #blog-posts .post {
    background-color: #000000;
    box-shadow: 0 0 10px rgba(103, 103, 103, 0.3);
}

/* Style the post title */
#blog-posts .post h2 {
    color: #0f4807;
    margin-bottom: 0.5em;
    font-size: 1.8em;
}

body.dark-mode #blog-posts .post h2 {
    color: #5dff5a;
}

/* Style the post content */
#blog-posts .post p {
    color: #000000;
    line-height: 1.6;
    font-size: 1.1em;
}

body.dark-mode #blog-posts .post p {
    color: #ccc;
}

@media (max-width: 600px) {
    #blog-posts {
        margin: 80px 1em 2em;
    }

    #blog-posts .post h2 {
        font-size: 1.5em;
    }

    #blog-posts .post p {
        font-size: 1em;
    }
}