.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background-color: var(--highlight-color);
    color: var(--button-text-color);
    border-radius: 0;
    border: 2px solid var(--black-solid);
    box-shadow: 8px 8px 0 0 var(--black-solid);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.nav-button:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 0 var(--black-solid);
}

.blog-card {
    height: 100%; /* Make sure the card takes full height of the grid cell */
}

.blog-entry {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 20px;
    background-color: var(--highlight-color);
    color: var(--button-text-color);
    border: 2px solid var(--black-solid);
    box-shadow: 8px 8px 0 0 var(--black-solid);
    cursor: pointer;
    height: 100%; /* Ensure the content inside the card also takes full height */
    justify-content: space-between; /* Distribute content vertically */
}

.blog-entry:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 0 var(--black-solid);
}

.blog-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.blog-date {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 12px;
}

.blog-text {
    font-size: 14px;
    line-height: 1.5;
}

.view-all {
    margin-top: auto;
    padding-top: 16px;
    font-weight: 700;
    align-self: flex-start;
}

.blog-entry:hover .view-all::after {
    content: ' →';
}

.sort-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background-color: var(--highlight-color);
    color: var(--button-text-color);
    border-radius: 0;
    border: 2px solid var(--black-solid);
    box-shadow: 8px 8px 0 0 var(--black-solid);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.sort-button:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 0 var(--black-solid);
}

.sort-button.active {
    background-color: var(--black-solid);
    color: var(--highlight-color);
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 0 var(--black-solid);
}

.link-style-404 {
    color: inherit;
    text-decoration: underline;
}

.link-style-404:hover {
    color: var(--black-solid);
}

/* Article content links styling */
.article-content a {
    color: inherit;
    text-decoration: underline;
}

.article-content a:hover {
    color: var(--black-solid);
}