ul.cloud{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;line-height:2.25rem;width:326px}ul.cloud a{--size:4;--color:#a33;color:var(--color);font-size:calc(var(--size) * .25rem + .5rem);display:block;padding:.125rem .25rem;position:relative;text-decoration:none}ul.cloud a[data-weight="1"]{--size:1}ul.cloud a[data-weight="2"]{--size:2}ul.cloud a[data-weight="3"]{--size:3}ul.cloud a[data-weight="4"]{--size:4}ul.cloud a[data-weight="5"]{--size:6}ul.cloud a[data-weight="6"]{--size:8}ul.cloud a[data-weight="7"]{--size:10}ul.cloud a[data-weight="8"]{--size:13}ul.cloud a[data-weight="9"]{--size:16}ul[data-show-value] a::after{content:" (" attr(data-weight) ")";font-size:1rem}ul.cloud li:nth-child(odd) a{--color:#181}ul.cloud li:nth-child(3n+1) a{--color:#33a}ul.cloud li:nth-child(4n+1) a{--color:#c38}ul.cloud a:focus{outline:dashed 1px}ul.cloud 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.cloud a:focus::before,ul.cloud a:hover::before{width:100%}@media (prefers-reduced-motion){ul.cloud *{transition:none!important}}