.font-picker{position:relative;display:inline-block;width:200px;box-shadow:1px 1px 3px #0003}.font-picker *{box-sizing:border-box}.font-picker p{margin:0;padding:0}.font-picker button{background:none;border:0;color:inherit;cursor:pointer;font-size:inherit;outline:none}.font-picker .dropdown-button{height:35px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#cbcbcb}.font-picker .dropdown-button.expanded,.font-picker .dropdown-button:focus,.font-picker .dropdown-button:hover{background:#bebebe}.font-picker .dropdown-button .dropdown-font-name{overflow:hidden;white-space:nowrap}.font-picker .dropdown-button.expanded .dropdown-icon.finished:before{transform:rotate(-180deg)}.font-picker .dropdown-icon{margin-left:10px}.font-picker .dropdown-icon.loading:before{content:"";display:block;height:10px;width:10px;border-radius:50%;border:2px solid #b2b2b2;border-top-color:#000;animation:spinner .6s linear infinite}.font-picker .dropdown-icon.finished:before{content:"";display:block;height:0;width:0;border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid #000;transition:transform .3s;margin:0 2px}.font-picker .dropdown-icon.error:before{content:"⚠"}.font-picker ul{position:absolute;z-index:1;max-height:0;width:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0;padding:0;background:#eaeaea;box-shadow:1px 1px 3px #0003;transition:.3s}.font-picker ul.expanded{max-height:200px}.font-picker ul li{height:35px;list-style:none}.font-picker ul li button{height:100%;width:100%;display:flex;align-items:center;padding:0 10px;white-space:nowrap}.font-picker ul li button:focus,.font-picker ul li button:hover{background:#ddd}.font-picker ul li button.active-font{background:#d1d1d1}@keyframes spinner{to{transform:rotate(1turn)}}*{box-sizing:border-box}body{display:grid;min-height:100vh;margin:0;background:#fff;place-content:center;place-items:center}#app{max-width:1200px;margin:40px auto 60px;padding:0 2rem;color:var(--secondaryColor);font-size:var(--fontSize);font-family:var(--secondaryFont);text-align:left}h1,h2,h3,h4,h5,h6{color:var(--primaryColor);font-family:var(--primaryFont)}.container{display:grid;gap:2rem;width:100%;place-content:start;place-items:start}h1,h2{width:100%;margin-bottom:0}.container.column{grid-auto-columns:max-content;grid-auto-flow:column}label{width:min-content}input{padding:6px;font-size:1.2rem;border:1px solid var(--primaryColor)}.btn,input{border-radius:var(--borderRadius)}.btn{min-width:26ch;padding:1rem;cursor:pointer;transition:.5s}.primary-btn{color:var(--tertiaryColor);background-color:var(--primaryColor);border:1px solid var(--secondaryColor)}.primary-btn:hover{background-color:var(--secondaryColor)}.secondary-btn{color:var(--primaryColor);background-color:var(--tertiaryColor);border:1px solid var(--primaryColor)}.secondary-btn:hover{color:var(--tertiaryColor);background-color:var(--primaryColor)}.fonts{align-items:start}.modal-container{background-color:#00000080}.modal-item{width:80%;margin-left:auto;margin-right:auto;background-color:#fff;padding:1rem 1.5rem;max-height:80%;overflow:auto}pre{display:block;width:100%;padding:1rem;white-space:pre-wrap;word-wrap:break-word;background-color:#efefef;border-radius:8px;-webkit-user-select:all;user-select:all}.vc-chrome,div[id^=font-picker]{border:1px solid #afafaf;box-shadow:none!important}