ul.tagcloud {display:flex;flex-wrap:wrap;width:100%;margin:0 auto;padding:.4em;align-items:center;justify-content:center;line-height: 2.4rem;list-style:none;border: 0px solid orange;}ul.tagcloud a {--size: 4;--min-font-size: .8rem;--max-font-size: 2rem;--color: var(--color-primary);color: var(--color);position:relative;display:block;padding: 0.125rem 0.25rem;font-size: clamp(var(--min-font-size), calc(var(--size) * 0.2rem + 0.5rem), var(--max-font-size));text-decoration: none;opacity: calc((15 - (9 - var(--size))) / 15);}ul.tagcloud a[data-weight="1"] {--size: 2;}ul.tagcloud a[data-weight="2"] {--size: 3;}ul.tagcloud a[data-weight="3"] {--size: 4;}ul.tagcloud a[data-weight="4"] {--size: 6;}ul.tagcloud a[data-weight="5"] {--size: 8;}ul.tagcloud a[data-weight="6"] {--size: 10;}ul.tagcloud a[data-weight="7"] {--size: 12;}ul.tagcloud a[data-weight="8"] {--size: 14;}ul.tagcloud a[data-weight="9"] {--size: 16;}ul[data-show-value] a::after {content: " (" attr(data-weight) ")";font-size:1rem;}ul.tagcloud li:nth-child(2n+1) a {--color:rgb(0,0,0,.4);}ul.tagcloud li:nth-child(3n+1) a {--color:var(--color-primary);}ul.tagcloud li:nth-child(4n+1) a {--color:hsl(0 69% 54%);}ul.tagcloud li:nth-child(5n+1) a {--color:#181;}ul.tagcloud a:focus {outline:1px dashed;}ul.tagcloud a::before {content:'';position:absolute;top:0;left:50%;width:0;height:100%;background: var(--color);transform: translate(-50%, 0);opacity:.15;transition: width .25s;}ul.tagcloud a:focus::before, ul.tagcloud a:hover::before {width:100%;}@media (prefers-reduced-motion) {ul.tagcloud * {transition: none !important;}}