.layout{flex-direction:column;min-height:100vh;display:flex}.sidebar{gap:var(--sp-m);margin-bottom:var(--sp-xl);flex-wrap:wrap;justify-content:center;display:flex;position:sticky;top:0}.colors-section{align-items:center;gap:var(--sp-s);background-color:var(--c-button);border-radius:10rem;padding:.3rem .3rem .3rem .6rem;display:flex}.shape-selection{grid-gap:var(--sp-s);grid-template-columns:auto auto;align-items:center;display:grid}.code{gap:var(--sp-m);padding:var(--sp-m)var(--pagePadding)var(--sp-l);grid-template-columns:repeat(10,1fr);display:grid}.code h2{margin-bottom:0;font-size:.85rem}@media (max-width:1000px){.code{grid-gap:inherit;grid-template-columns:1fr}}.code>div:first-child{grid-column:span 4}.code>div:last-child{grid-column:span 6}.main{display:grid}.avatars-grid{grid-gap:var(--sp-m);padding:var(--sp-l)var(--pagePadding);grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));display:grid}.avatar-container{font-size:.8rem;display:grid}.avatar-container:hover .button-section{opacity:1;transition:all .2s .1s}.avatar-section{justify-content:center;align-items:center;display:flex}.button-section{opacity:0;place-items:center;transition:all .5s;display:grid}.avatar-input{padding:var(--textbox);font:inherit;color:inherit;text-align:center;width:100%;margin-top:var(--sp-s);background:0 0;border:1px solid #0000;border-radius:100rem;transition:all .5s}.avatar-input:hover{border-color:var(--c-fieldHover);transition:all .2s}.avatar-input:focus{border-color:var(--c-fieldFocus);outline:none}