@charset "UTF-8";

p.list-article-tags,
p.tags {
    margin: 0 auto;
    max-width: 800px;
    padding: 0px;
    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

p.list-article-tags {
    justify-content: left;
}

p.tags > a
{
    margin: 2px;
    font-size: 19px;
    color: var(--body-color);
}

p.article-tags 
{
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

p.list-article-tags > span,
p.article-tags > a 
{
    color: var(--body-color);;
    position: relative;

    margin-right: 7px;
    box-sizing: border-box;
    padding-left: 30px;
    
    background-image: url(../icons/tag.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left 5px top 3px;
}

html.dark p.list-article-tags > span,
html.dark p.article-tags > a {
    background-image: url(../icons/black-tag.svg);
}

p.tags > a 
{
    padding: 0px 5px;
}

p.tags > a > span 
{
    color: var(--blue-color);
}

p.tags > a.selected {
    background-color: var(--blue-color);
    color: #fff;
}

p.tags > a.selected > span 
{
    color: rgb(27, 40, 83);
}