.feed-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: black;
}



.feed-item {
    margin-bottom: 20px;
}

.feed-item h2 {
    margin-bottom: 5px;
}

.feed-item p {
    margin: 5px 0;
}

.read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}


/* Tag styling */
.tag {
    display: inline-block;
    background-color: #e0e0e0; /* Light gray background */
    color: #333333; /* Dark text color for readability */
    padding: 0.25em 0.6em;
    margin: 0 0.3em 0.3em 0;
    font-size: 0.85em;
    font-weight: 500;
    border-radius: 0.25em;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for tags */
.tag:hover {
    background-color: #d5d5d5; /* Slightly darker gray on hover */
    color: #000000; /* Darker text on hover */
}

/* Tag links styling (if tags are links) */
.tag a {
    color: inherit; /* Inherit text color from .tag */
    text-decoration: none;
}

.tag a:hover {
    text-decoration: underline;
}

/* Optional: Active or Selected Tag Styling */
.tag.active,
.tag.selected {
    background-color: #b0b0b0; /* Different background for active/selected tags */
    color: #ffffff; /* White text for contrast */
}

/* Responsive adjustments (optional) */
@media (max-width: 600px) {
    .tag {
        font-size: 0.75em;
        padding: 0.2em 0.5em;
    }
}