:root {
    --mainBackgroundTint: #f5f5f5;
    --mainForeground: #333;
    --mainLinkColor: #0066cc;
    --mainLinkHoverColor: #ccbb00;
    --feedBackgroundColor: #fff;
    --nonFavouriteStarColor: #000000;
    --favouriteStarColor: #ffac33;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 1rem;
    background: var(--mainBackgroundTint);
}

.grid {
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1rem;
    flex-wrap: wrap;
}

.site-title {
    font-size: 3rem;
    text-align: center;
}

.category-title {
    font-size: 1.5rem;
    text-align: center;
}

.feed {
    background: var(--feedBackgroundColor);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-basis: 1px;
    flex-grow: 1;
    min-width: 16rem;
}

.feed-header {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: var(--mainForeground);
    color: var(--feedBackgroundColor);
}

.feed-header img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 0.5rem;
}

.feed-star {
    margin-left: auto;
    margin-right: 0;
    font-size: 1.5rem;
    color: transparent;
    text-shadow: 0 0 0 var(--nonFavouriteStarColor);

    &:hover {
        text-shadow: 0 0 1px var(--nonFavouriteStarColor);
    }
}

.favourite-star {
    text-shadow: 0 0 0 var(--favouriteStarColor);

    &:hover {
        text-shadow: 0 0 1px var(--favouriteStarColor);
    }
}

.feed-items {
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.feed-items a {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--mainLinkColor);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        color: var(--mainLinkHoverColor);
    }
}

.very-old-article-link {
    opacity: 25%;
}

.old-article-link {
    opacity: 60%;
}

.new-article-link {

}