/* 1. Refine the Main Container */
.main {
    max-width: 800px !important; /* Perfect width for reading articles */
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 2. Modern Card Styling */
.post-entry {
    background: var(--entry) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important; /* Elegant rounded corners */
    margin-bottom: 30px !important; /* Space between posts */
    padding: 0 !important; /* Let the image touch the top edges */
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Interactive Hover Effect */
.post-entry:hover {
    transform: translateY(-4px) !important;
    border-color: var(--secondary) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Image & Text Polish */
.entry-cover img {
    border-radius: 0 !important; /* Flushes with card top */
    margin-bottom: 10px !important;
    transition: transform 0.5s ease !important;
}

.post-entry:hover .entry-cover img {
    transform: scale(1.02) !important; /* Subtle zoom on hover */
}

/* Inner Spacing */
.entry-header, .entry-content, .entry-footer {
    padding: 15px 25px 20px 25px !important;
}

.entry-header h2 {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
}

/* 5. Modernize the Header/Navbar */
.header {
    background: rgba(var(--theme), 0.8) !important;
    backdrop-filter: blur(10px); /* Frosted glass effect */
    position: sticky;
    top: 0;
    z-index: 100;
}