.article-card-tags {
    display: flex;
    flex-flow: row wrap;
    gap: 0.3em;
}

.article-card-tags * {
    font-size: small;
    font-family: "Satoshi-Medium",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;

    border-radius: 0.2em;
    background-color: red; /* Dynamically changed, this is a fallback incase tag color isn't defined */
    padding: 0.1em 0.2em;
    color: rgb(255, 255, 255);
}

/* Tag colors are defined in light.css or dark.css, located in the themes folder */
.tag-red { background-color: var(--tag-red); }
.tag-orange { background-color: var(--tag-orange); }
.tag-yellow { background-color: var(--tag-yellow); }
.tag-green { background-color: var(--tag-green); }
.tag-light-blue { background-color: var(--tag-light-blue); }
.tag-blue { background-color: var(--tag-blue); }
.tag-purple { background-color: var(--tag-purple); }
.tag-pink { background-color: var(--tag-pink); }

/* Special tags */
.tag-rainbow {
    background-image: 
        linear-gradient(
        45deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

.tag-gold {
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
    background: #ffeda6;
    background: linear-gradient(45deg,rgba(255, 237, 166, 1) 0%, rgba(252, 176, 69, 1) 100%);
}

.tag-dnn {
    background-color: var(--accent);
}