.python {
    --tag-background: #008aff;
    --tag-color: #32cad6;
}

.ai,
.llm,
.chatgpt,
.ollama {
    --tag-background: #10a37f;
    --tag-color: #55ffbd;
}

.php {
    --tag-background: #7256ff;
    --tag-color: #b35dfd;
}

.java,
.kotlin,
.intellij {
    --tag-background: #ff318c;
    --tag-color: #ff8ebf;
}

.javascript,
.js,
.typescript,
.ts {
    --tag-background: #f7df1e;
    --tag-color: #f7df1e;
    --tag-color: #fff9c4;
}

.html,
.css,
.w3c {
    --tag-background: #e34c26;
    --tag-color: #ffaf96;
}

.docker,
.container {
    --tag-background: #2496ed;
    --tag-color: #89cff0;
}

.git,
.github,
.gitlab {
    --tag-background: #f05032;
    --tag-color: #ffb3a7;
}

.linux,
.bash,
.shell {
    --tag-background: #fcc624;
    --tag-color: #fff4bd;
}

.windows {
    --tag-background: #0078d6;
    --tag-color: #8ed6ff;
}

.ide,
.vscode,
.eclipse {
    --tag-background: #007acc;
    --tag-color: #92d4ff;
}

.api,
.docs,
.tutoriel {
    --tag-background: #8e44ad;
    --tag-color: #d2b4de;
}

.tags div {
    border-radius: 9px;
    border: 1px solid var(--tag-background, #555);
    background: color-mix(in srgb,
            var(--tag-background, #555) 25%,
            transparent);
    padding: 0.25em 0.6em;

    color: var(--tag-color, #ccc);
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tags {
    display: flex;
    gap: 0.5em;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: auto;
    /* Push tags to bottom if flex column */
}