.page-changelog-container {
    display: block;
    padding: 3rem 4rem; /* padding without max-width constraint */
}

.page-changelog {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.page-changelog .error-container .error {
    padding: 1rem;
    background-color: var(--color-error);
    color: var(--color-on-error);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.page-changelog .changelog-container {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* extra spacing between entries */
}

.page-changelog .changelog-entry {
    background-color: var(--color-background);
    color: var(--color-on-background);
    border-radius: 1rem;
    padding: 2rem;
    transition: background-color 0.2s, color 0.2s;
    font-size: 1.15rem; /* slightly larger text */
    line-height: 1.8;
}

.page-changelog .changelog-entry:hover {
    background-color: var(--color-background-hover);
    color: var(--color-on-background-hover);
}

.page-changelog .changelog-entry.featured {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Date styling */
.page-changelog .changelog-entry .date,
.page-changelog .changelog-date {
    display: block;
    font-size: 1.4rem; /* larger for visibility */
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Message styling */
.page-changelog .changelog-entry .message,
.page-changelog .changelog-message {
    font-size: 1.15rem;
    line-height: 1.8;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
    padding-left: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-changelog-container {
        padding: 2rem;
    }

    .page-changelog .changelog-entry {
        padding: 1.5rem;
        font-size: 1rem;
    }

    .page-changelog .changelog-date {
        font-size: 1.25rem;
    }
}