:root {
    --post-list-main: #1f2937;
    --post-list-hover: #f7f7f7;
    --post-list-date: #6b7280;
    --accent: #4da8b1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --post-list-main: #e0e2e6;
        --post-list-hover: #333439;
        --post-list-date: #9ca3af;
        --accent: #17d7e8;
    }
}

.post-list {
    padding: 0;
}

.post-list-area {
    list-style: none;
}

.post-list-link {
    padding: 1.5rem 0.5rem;
    display: block;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--post-list-main);
}

.post-date {
    font-size: 0.9rem;
    display: block;
    color: var(--post-list-date);
}

.post-title {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}

.post-list-link:hover .post-title,
.post-list-link:hover .post-date,
.post-list-link:focus-visible,
.post-list-link:focus-visible .post-title {
    color: var(--accent);
}

.post-list-link:hover,
.post-list-link:focus-visible {
    background-color: var(--post-list-hover);
}