:root {
    --tagcloud-colorA: blue;
    --tagcloud-colorB: red;
}

.tagcloud-wrapper {
    font-size: clamp(10px, 1.8vw, 120%);
    font-weight: bold;
    
    font-family: Roboto Slab, serif;
    text-transform: uppercase;
    
}

.tagcloud {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2.8em;
    padding: 1rem 0;
}

.tagcloud li {
    color: #a33;
    display: block;
    padding: 0.125em 0.25em;
    text-decoration: none;
    position: relative;
}





.tagcloud li[weight="1"] { --size: 1; }
.tagcloud li[weight="2"] { --size: 2; }
.tagcloud li[weight="3"] { --size: 3; }
.tagcloud li[weight="4"] { --size: 4; }
.tagcloud li[weight="5"] { --size: 5; }
.tagcloud li[weight="6"] { --size: 6; }
.tagcloud li[weight="7"] { --size: 7; }
.tagcloud li[weight="8"] { --size: 8; }
.tagcloud li[weight="9"] { --size: 9; }

.tagcloud li {
  --size: 4;
  font-size: calc(var(--size) * 0.25em + 0.5em);
  color: color-mix(in srgb, var(--tagcloud-colorA), var(--tagcloud-colorB) calc(12.5% * (var(--size) - 1)));
}