.font-results-box{width:100%;max-width:56rem;margin:2rem auto;padding:1.5rem 1.75rem;background:var(--bg2);border-radius:12px;border:1px solid var(--border);box-sizing:border-box}.font-results-box .fontCards{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1em;gap:1em;margin-top:0}@media(max-width:900px){.font-results-box .fontCards{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.font-results-box .fontCards{grid-template-columns:1fr}}.fontCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:1em;gap:1em;margin-top:2em}.fontCards .font{position:relative;width:100%;min-width:0;overflow:hidden;background-color:#4d4e51;border-radius:10px;padding:.5em .5em 2.25em;transition:all .2s ease-in-out}.fontCards .font:hover{background-color:#5e5f62}.fontCards .font .output{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;color:#fff;font-size:1rem;margin-bottom:.5em;letter-spacing:1px;width:100%;max-width:100%;min-width:0;white-space:pre-wrap;overflow:hidden;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.fontCards .font .font_name{color:#b1b1bb;font-size:.8rem}.fontCards .font .copy{width:2em;height:2em;padding:0;background:transparent;border:none;position:absolute;right:.6em;bottom:.6em;cursor:pointer}.fontCards .font .copy svg{width:16px;height:16px;stroke:#929aff;transition:stroke .05s ease}.fontCards .font .copy:active svg{stroke:#6b7280}.loadMore{margin-top:2em;font-size:1rem;color:#fff;background:#2462eb;border-radius:10px;padding:.5em;border:none;display:flex;align-items:center;font-weight:700;cursor:pointer;transition:all .2s ease-in-out;opacity:1;transition:all .5s ease-in-out;transform:translateY(0)}.loadMore:hover{background:#1e4db8}.loadMore svg{width:1.1rem;height:auto;position:relative;margin-left:.5em;fill:#fff}.newFont{opacity:0;transform:translateY(1em)}