:root{ --maxw:1100px; --accent:linear-gradient(90deg,#f09433,#bc1888); --bg:#eef3f9; --card:#ffffff; --countit:#6b7280; --glass: rgba(255,255,255,0.6); --radius:12px; --gap:12px; --main-color: #1a99e9; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background: radial-gradient(1100px 400px at 10% 10%, rgba(11,116,222,0.08), transparent 8%), radial-gradient(1000px 300px at 90% 90%, rgba(123,225,199,0.06), transparent 8%), var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#111827; padding-bottom:36px; line-height: 1.5; } header{ backdrop-filter: blur(6px); background: var(--main-color); color:#fff; padding-top:5px; box-shadow: 0 6px 6px 0 rgb(0 0 0 / 35%); } header .inner{ max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; flex-direction:column; gap:10px; } .brand h1{ margin:0; font-size:2rem; letter-spacing:0.2px; } .tagline{ margin:4px 0 0; color:rgba(255,255,255,0.92); font-size:0.92rem; opacity:0.95; } nav{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:2px; align-items:center; background: #00000012;} nav a,#menusec a,.floatmenu a{ scroll-snap-align:start; display:inline-block; white-space:nowrap; padding:8px 12px; border-radius:999px; text-decoration:none; background: rgba(255,255,255,0.06); color:#ffffff93; transition:transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 2px 6px rgba(2,6,23,0.06); font-size:1rem; } nav a:hover,#menusec a:hover,.floatmenu a:hover{ transform:translateY(-2px); background: rgba(255,255,255,0.12); box-shadow: 0 8px 20px rgba(2,6,23,0.12); color:#fff;} #results { flex: 1;} .font-list h2:first-of-type { margin-top: 0; } #fMN { overflow: scroll; } .floatmenu { height: 100%; text-align: right; display: inline-block; margin-top: 20%; overflow: scroll; } .floatmenu a{ background: #fff; color: #000; display: inline-block; font-size: 1.5rem; margin: 5px; } .floatmenu a:hover{ background: var(--main-color);color: #fff; } #menu{ color: var(--main-color); } #menusec a{ margin-top: 8px; color: #444; } #menusec a:hover{ background: #fff; color: #000; } .right-menu { margin-top: 20px; } .container{ max-width:var(--maxw); margin:22px auto; padding:20px; box-sizing:border-box; } /* Input area */ .input-section{ display: flex ; margin-bottom: 10px; position: sticky; top: 0; z-index: 40; justify-content: center; flex-direction: row;} .input-section div{ width: 100%; position: relative; } button#menu { font-size: 1.8rem; height: 45px; box-shadow: none; background:transparent; } .input-section input{ flex:1; width:100%; padding:14px 16px; border-radius:25px; border:2px solid var(--main-color); font-size:1.2rem; outline:none; box-shadow: 0 4px 18px rgba(2,6,23,0.03); transition:box-shadow .12s ease, transform .12s ease; } .input-section input:focus{ box-shadow: 0 8px 28px rgba(11,116,222,0.12); transform:translateY(-2px); border-color: rgba(11,116,222,0.14); } /* Overlay clear button styles */ .clear-overlay{ position: absolute; right: 0px; top: 42%; transform: translateY(-50%); display: inline-flex ; align-items: center; gap: 8px; padding: 8px 10px; height: 40px; width: 40px; border-radius: 20px; cursor: pointer; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(11, 116, 222, 0.10); box-shadow: 0 8px 22px rgba(11, 116, 222, 0.08); font-weight: 700; color: var(--main-color); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; z-index: 10; } .clear-overlay:hover{ transform:translateY(-50%) translateY(-2px); box-shadow: 0 12px 30px rgba(11,116,222,0.12); } .share-section { position: relative; display: flex ; justify-content: flex-end; align-items: center; } .share-section span { color: #444; margin-right: 5px; text-transform: uppercase; font-size: 13px; } .share-options { display: flex; gap: 4px; flex-wrap: wrap; } .share-options button { border-radius: 50%; padding: 8px; margin: 2px; height: 35px; width: 35px; cursor: pointer; display: flex ; align-items: center; justify-content: center; } .share-options button:hover { background: #fff; } .btn{ padding:12px 16px; width: auto; color: #fff; background: #19b454; position: relative; border-radius:10px; border:0; cursor:pointer; font-weight:600; box-shadow: 0 8px 22px rgba(11,116,222,0.12); transition:transform .12s ease, box-shadow .12s ease; } .btn:hover{ transform:translateY(-3px); box-shadow: 0 12px 30px rgba(11,116,222,0.14); } .btn.secondary{ background:transparent; border:1px solid rgba(11,116,222,0.16); color:var(--main-color); box-shadow:none; } button.btn.closeit { background: #c40707; } .result-card{ margin-top:6px; padding:18px 0; display:flex; flex-direction:column; gap:12px; } .grid ul{ display:grid; gap:var(--gap); margin:0; padding: 0; } /* each tile */ .fAT li{ display: flex; justify-content: space-between; flex-direction: row; } .fAT li .text-sec{ background:linear-gradient(180deg, #fff, #fcfeff); border-radius:25px; padding:12px; border:1px solid rgba(15,23,42,0.04); box-shadow: 0 6px 18px rgba(2,6,23,0.03); cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; user-select: none; width: 100%; } /* Hover / focus effect (visible and large for touch-friendly feel) */
 .fAT li .text-sec:hover, .fAT .text-sec:focus{ transform: translateY(-6px) scale(1.01);  background: linear-gradient(180deg, rgba(11,116,222,0.03), #ffffff); outline: none; color: var(--main-color); } .fAT li .text{ font-size: 1.2rem; margin: 0; } .name{ font-size:0.78rem; color:var(--countit); font-weight:700; letter-spacing:0.6px; text-transform:uppercase; } .fancy-text{ font-size:1.25rem; line-height:1.3; word-break:break-word; align-items:center; } .info { display: flex;gap: 8px; margin-top: 5px; } .countit{ color:var(--countit); font-size:0.75rem; } .repeatit { color: #777; cursor: pointer; padding: 14px; font-size: 1.6rem; line-height: 1.6; display: flex ; flex-wrap: wrap; justify-content: center; flex-direction: row-reverse; } .repeatit:hover { color: #000000; } .buttons{ display: flex; position: fixed; right: 0; bottom: 20%; flex-direction: column-reverse; } #bulbBtn svg{stroke: #f6a709;} button ,#othertools a{ display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 4px; border: none; border-radius: 8px; background: #f1f5f9; cursor: pointer; transition: background 0.2s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* prevent zoom / double-tap */ font-size: 18px; /* important for iOS to avoid zoom */ line-height: 1; touch-action: manipulation; /* tells browser: clicks, not gestures */ -webkit-tap-highlight-color: transparent; } button:hover { background: #e2e8f0; } #othertools a{ width: auto; padding: 10px; text-decoration: none; background: #444; color: #f1f1f1; } #othertools a:hover{ background: #000; color: #fff; } svg { width: 22px; height: 22px; stroke: #555; stroke-width: 1.6; fill: none; } footer{ margin-top:28px; background: #333333; color:#fff; padding:18px 0; } footer .inner{ max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; justify-content:space-between; gap:12px; align-items:center; } footer a{ color:rgba(255,255,255,0.95); text-decoration:underline } .text-repeater { position: fixed; top: 0; width: 100%; height: 100%; background: #ffffffcf; align-items: center; transition: right 0.3s; z-index: 9999; display: none; } .content-sec { background: #ffff; padding: 12px; border-radius: 20px; position: relative;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .content-sec h3{ margin: 3px; } .close-button { top: 10px; position: fixed; right: 10px; padding: 8px 16px; font-size: 30px; border: none; border-radius: 20px; color: #444; background: #fff; } .text-repeater #quoteDisplay { overflow: scroll; height: 100%; width: 100%; } textarea#outputtwo,textarea#input { width: 100%; border: 2px solid #e3dddd; border-radius: 10px; min-height: 50px; padding: 10px; font-family: sans-serif; font-size: 1.1rem; } textarea#outputtwo{ min-height: 150px; } #submit { width: 120px; background: #ffff; } .input label { padding: 5px 0; color: #777; display: inline-block; font-size: 1.1rem; } input#max-quantity { font-size: 1.2rem; border: none; border-radius: 10px; text-align: center; padding: 10px; margin: 5px; background: #e2e6eb; } .sharebts { display: flex ; justify-content: flex-end; } button#submit:hover { background: #f3f4f6; box-shadow: 0 6px 16px rgba(0,0,0,.08); } button#submit:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(0,0,0,.10); } button#submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.35), 0 6px 16px rgba(0,0,0,.08); border-color: #6366f1; } .copied{ background: #000; color: #fff; display: block; width: auto; height: auto; padding: 5px 10px; position: absolute; top:-20px; } .ads { display: block; width: 100%; margin: 5px 0; height: auto; clear: both; } /* HTML:<div class=loader></div>*/ .loader { width: 120px; height: 20px; background: linear-gradient(#000 50%,#0000 0), linear-gradient(#0000 50%,#000 0), linear-gradient(#000 50%,#0000 0), linear-gradient(#0000 50%,#000 0), linear-gradient(#000 50%,#0000 0), linear-gradient(#0000 50%,#000 0) #ddd; background-size: calc(100%/6 + 1px) 200%; background-repeat: no-repeat; animation: l12 2s infinite; } @keyframes l12 { 0% {background-position: calc(0*100%/5) 100%,calc(1*100%/5) 0%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%} 16.67% {background-position: calc(0*100%/5) 0%,calc(1*100%/5) 0%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%} 33.33% {background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%} 50% {background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%} 66.67% {background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 100%,calc(5*100%/5) 0%} 83.33% {background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 0%,calc(5*100%/5) 0%} 100% {background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 0%,calc(5*100%/5) 100%} } .page-load-status,.aryapage{ display: none; align-items: center; width: 100%; margin-top: 20px; margin-left: calc(50% - 60px); margin-bottom: 20px; } .loadmore { text-align: center; } #randombutton { width: auto; border-radius: 20px; padding: 25px; margin-top: 10px; } .info-text img { max-width: 100%; } .dark-toggle { padding: 10px 20px; border: none; float: right; width: auto; border-radius: 25px; cursor: pointer; background: #00000075; position: absolute; top: 10px; right: 10px; color: white; font-size: 14px; transition: background 0.3s, color 0.3s; } body.dark-mode .dark-toggle { background: #f1f1f18a; color: #121212; } .dark-mode,.dark-mode .input-section input{ background: #000; color: #9e9e9e; } .dark-mode .fAT li .text-sec,.dark-mode button{ background: #222; } .dark-mode #menusec a,.dark-mode button { color: #ddd; } .dark-mode #menusec a:hover{ background: #333; } .dark-mode svg { stroke: #999; } .f-m-q,.f-m { position: fixed; top: 0; width: 100%; height: 100%; background: var(--bg); align-items: center; transition: right 0.3s; z-index: 9999; display: none; } /* Responsive */ @media (max-width:920px){ .brand h1{ font-size:1.5rem } .container{ margin:14px 12px; padding:13px; border-radius:10px } } @media (max-width:640px){ .fAT li{ min-height:72px;} } @media (min-width:720px){ main { display: flex ;} #menusec { width: 320px; }  .right-menu { position: sticky; top: 65px; } }