#icons-page{--size:3rem;width:100%}#icons-page header{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;margin-bottom:2rem}#icons-page header input{width:100%;max-width:400px}#icons-tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;width:100%}.icons-tag{font-size:var(--text-xxs);padding:.2rem .6rem;border-radius:100vh;border:1px solid;opacity:.5;transition:opacity,color,.2s ease}.icons-tag:is(:hover,.hovered,.selected){opacity:1;color:var(--color-primary)!important}#icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size),1fr));gap:calc(var(--size) / 2);width:95%;margin:0 auto}.icon-item{display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);padding:.5rem;box-sizing:border-box;background-color:var(--color-bg-200);border-radius:100vh;border:2px solid var(--color-bg-100);outline:2px solid var(--color-bg-200)}.icon-item svg{width:calc(var(--size) / 2);height:calc(var(--size) / 2)}.icon-item{--stagger:0.2s;--duration:0.8s;transition:opacity .2s ease}.icon-dimmed .icon-item{opacity:.5}@media (max-width:600px){#icons-page{--size:2.5rem}#icons-page header input{width:100%;max-width:600px}}