/* Reset and base styles (unchanged) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; line-height: 1.6; padding: 1rem; background: #fff; color: #333; }
header nav ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
header nav ul li a { text-decoration: none; color: #333; }
main { max-width: 800px; margin: 2rem auto; }
footer { text-align: center; margin-top: 2rem; }
h1 { margin-bottom: 1rem; }
#posts-list article { margin-bottom: 2rem; border-bottom: 1px solid #ddd; padding-bottom: 1rem; }
#dark-mode-toggle { margin: 1rem 0; padding: 0.5rem; }

/* Dark mode (unchanged) */
body.dark { background: #333; color: #fff; }
body.dark a { color: #fff; }
body.dark #posts-list article { border-bottom: 1px solid #666; }

/* Form styles (unchanged) */
form { display: flex; flex-direction: column; gap: 1rem; }
input, textarea { padding: 0.5rem; }
button { padding: 0.5rem; cursor: pointer; }

/* New: Image styles */
.post-thumbnail, .post-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 8px; /* Optional rounded corners */
}
.post-thumbnail {
    width: 100%; /* Full width on mobile */
}

/* Responsive: Desktop */
@media (min-width: 768px) {
    header nav ul { flex-direction: row; justify-content: center; }
    main { padding: 0 2rem; }
    .post-thumbnail {
        width: 200px; /* Fixed thumbnail size */
        float: left;
        margin-right: 1rem;
    }
    #posts-list article { overflow: hidden; } /* Clear float */
}