/* ============================================================ FLUX CSS v0.2.0 A lightweight, config-driven design system. oklch() palette generation. < 10KB. No JS. No build step. CONFIGURATION — Set these on your element: ───────────────────────────────────────────────── data-theme="dark" dark | light data-font="dm-sans" dm-sans | outfit | satoshi | space | cabinet | geist | jetbrains | system data-icons="lucide" lucide | phosphor | tabler | bootstrap | none data-radius="soft" sharp | soft | round | pill data-density="normal" compact | normal | spacious Fine-tune in :root { }: ───────────────────────────────────────────────── --accent-hue: 195 Any oklch hue angle (0–360) --anim-speed: 1 0 (instant) → 2 (slow) --shadow-intensity: 1 0 (flat) → 2 (dramatic) Example: ============================================================ */ /* ── RESET ─────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} img,svg{display:block;max-width:100%} button,input,textarea,select{font:inherit;color:inherit} a{color:inherit;text-decoration:none} ul,ol{list-style:none} /* ── CORE TOKENS ───────────────────────────────────────────── */ :root{ --accent-hue:195; --anim-speed:1; --shadow-intensity:1; --L0:15%;--L1:25%;--L2:35%;--L3:45%;--L4:55%; --L5:65%;--L6:75%;--L7:85%;--L8:92%;--L9:97%; --C:0.14;--C-soft:0.07;--C-vivid:0.22; --h-red:25;--h-orange:60;--h-amber:80;--h-yellow:95; --h-lime:130;--h-green:150;--h-teal:175;--h-cyan:195; --h-sky:220;--h-blue:250;--h-indigo:275;--h-purple:300; --h-pink:340;--h-slate:260;--h-zinc:240; --t-xs:clamp(.72rem,.68rem+.2vw,.78rem); --t-sm:clamp(.82rem,.76rem+.3vw,.92rem); --t-base:clamp(.95rem,.9rem+.25vw,1.06rem); --t-md:clamp(1.12rem,1rem+.5vw,1.32rem); --t-lg:clamp(1.4rem,1.2rem+.9vw,1.85rem); --t-xl:clamp(1.8rem,1.4rem+1.5vw,2.6rem); --t-2xl:clamp(2.2rem,1.7rem+2.2vw,3.6rem); --t-3xl:clamp(2.8rem,2rem+3vw,4.8rem); --ff-mono:'JetBrains Mono','Fira Code','Cascadia Code',monospace; --ease:cubic-bezier(.4,0,.2,1); } /* ── FONT PRESETS ──────────────────────────────────────────── */ [data-font="dm-sans"]{--ff-sans:'DM Sans',system-ui,sans-serif} [data-font="outfit"]{--ff-sans:'Outfit',system-ui,sans-serif} [data-font="satoshi"]{--ff-sans:'Satoshi','DM Sans',system-ui,sans-serif} [data-font="space"]{--ff-sans:'Space Grotesk',system-ui,sans-serif} [data-font="cabinet"]{--ff-sans:'Cabinet Grotesk','DM Sans',system-ui,sans-serif} [data-font="geist"]{--ff-sans:'Geist','Inter',system-ui,sans-serif} [data-font="jetbrains"]{--ff-sans:'JetBrains Mono',monospace} [data-font="system"]{--ff-sans:system-ui,-apple-system,'Segoe UI',sans-serif} /* ── RADIUS PRESETS ────────────────────────────────────────── */ [data-radius="sharp"]{--r-sm:0;--r-md:0;--r-lg:0;--r-xl:0;--r-full:0;--r-card:0} [data-radius="soft"]{--r-sm:4px;--r-md:8px;--r-lg:14px;--r-xl:22px;--r-full:9999px;--r-card:14px} [data-radius="round"]{--r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:32px;--r-full:9999px;--r-card:22px} [data-radius="pill"]{--r-sm:9999px;--r-md:9999px;--r-lg:9999px;--r-xl:9999px;--r-full:9999px;--r-card:24px} /* ── DENSITY PRESETS ───────────────────────────────────────── */ [data-density="compact"]{--g1:.2rem;--g2:.4rem;--g3:.6rem;--g4:.8rem;--g5:1.2rem;--g6:1.6rem;--g7:2.4rem;--g8:3.2rem;--g9:4.8rem;--g10:6.4rem;--card-pad:1rem;--section-pad:4rem;--nav-pad:.5rem} [data-density="normal"]{--g1:.25rem;--g2:.5rem;--g3:.75rem;--g4:1rem;--g5:1.5rem;--g6:2rem;--g7:3rem;--g8:4rem;--g9:6rem;--g10:8rem;--card-pad:1.5rem;--section-pad:6rem;--nav-pad:.75rem} [data-density="spacious"]{--g1:.3rem;--g2:.6rem;--g3:.9rem;--g4:1.2rem;--g5:1.8rem;--g6:2.4rem;--g7:3.6rem;--g8:4.8rem;--g9:7.2rem;--g10:9.6rem;--card-pad:2rem;--section-pad:8rem;--nav-pad:1rem} /* ── DARK THEME ────────────────────────────────────────────── */ [data-theme="dark"]{ --surface-0:oklch(10% 0.02 var(--h-slate)); --surface-1:oklch(14% 0.02 var(--h-slate)); --surface-2:oklch(18% 0.025 var(--h-slate)); --surface-3:oklch(22% 0.025 var(--h-slate)); --surface-4:oklch(28% 0.02 var(--h-slate)); --border:oklch(30% 0.03 var(--h-slate)); --border-subtle:oklch(22% 0.02 var(--h-slate)); --text-primary:oklch(93% 0.01 var(--h-slate)); --text-secondary:oklch(72% 0.02 var(--h-slate)); --text-muted:oklch(55% 0.02 var(--h-slate)); --accent:oklch(72% 0.16 var(--accent-hue)); --accent-hover:oklch(78% 0.18 var(--accent-hue)); --accent-subtle:oklch(22% 0.06 var(--accent-hue)); --accent-text:oklch(10% 0.02 var(--accent-hue)); --shadow-base:0% 0 0; --code-bg:oklch(12% 0.02 var(--h-slate)); --input-bg:oklch(14% 0.02 var(--h-slate)); } /* ── LIGHT THEME ───────────────────────────────────────────── */ [data-theme="light"]{ --surface-0:oklch(99% 0.005 var(--h-slate)); --surface-1:oklch(96% 0.008 var(--h-slate)); --surface-2:oklch(93% 0.01 var(--h-slate)); --surface-3:oklch(89% 0.012 var(--h-slate)); --surface-4:oklch(84% 0.01 var(--h-slate)); --border:oklch(85% 0.015 var(--h-slate)); --border-subtle:oklch(90% 0.01 var(--h-slate)); --text-primary:oklch(18% 0.02 var(--h-slate)); --text-secondary:oklch(40% 0.02 var(--h-slate)); --text-muted:oklch(55% 0.02 var(--h-slate)); --accent:oklch(48% 0.16 var(--accent-hue)); --accent-hover:oklch(42% 0.18 var(--accent-hue)); --accent-subtle:oklch(92% 0.04 var(--accent-hue)); --accent-text:oklch(99% 0 0); --shadow-base:25% 0.02 var(--h-slate); --code-bg:oklch(95% 0.008 var(--h-slate)); --input-bg:oklch(99% 0.005 var(--h-slate)); } /* ── BASE ──────────────────────────────────────────────────── */ html{scroll-behavior:smooth} body{ font-family:var(--ff-sans);font-size:var(--t-base); line-height:1.65;color:var(--text-primary); background:var(--surface-0); -webkit-font-smoothing:antialiased; transition:background calc(180ms * var(--anim-speed)) var(--ease),color calc(180ms * var(--anim-speed)) var(--ease); } code,pre{font-family:var(--ff-mono);font-size:.88em} pre{background:var(--code-bg);padding:var(--g5);border-radius:var(--r-md);overflow-x:auto;border:1px solid var(--border-subtle)} /* ── TYPOGRAPHY ────────────────────────────────────────────── */ .t-xs{font-size:var(--t-xs)}.t-sm{font-size:var(--t-sm)}.t-base{font-size:var(--t-base)} .t-md{font-size:var(--t-md)}.t-lg{font-size:var(--t-lg)}.t-xl{font-size:var(--t-xl)} .t-2xl{font-size:var(--t-2xl)}.t-3xl{font-size:var(--t-3xl)} .fw-4{font-weight:400}.fw-5{font-weight:500}.fw-6{font-weight:600}.fw-7{font-weight:700} .mono{font-family:var(--ff-mono)} .upper{text-transform:uppercase;letter-spacing:.08em} .center{text-align:center}.right{text-align:right} .lh-tight{line-height:1.1}.lh-snug{line-height:1.35} /* ── LAYOUT ────────────────────────────────────────────────── */ .wrap{width:min(90%,1200px);margin-inline:auto} .wrap-sm{width:min(90%,800px);margin-inline:auto} .wrap-lg{width:min(94%,1440px);margin-inline:auto} .row{display:flex;flex-wrap:wrap;gap:var(--g4)} .row-tight{display:flex;flex-wrap:wrap;gap:var(--g2)} .col{display:flex;flex-direction:column;gap:var(--g4)} .col-tight{display:flex;flex-direction:column;gap:var(--g2)} .items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end} .justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end} .grow{flex:1 1 0%} .grid{display:grid;gap:var(--g4)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} @media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ── SPACING ───────────────────────────────────────────────── */ .p-0{padding:0}.p-1{padding:var(--g1)}.p-2{padding:var(--g2)}.p-3{padding:var(--g3)} .p-4{padding:var(--g4)}.p-5{padding:var(--g5)}.p-6{padding:var(--g6)}.p-7{padding:var(--g7)}.p-8{padding:var(--g8)} .px-4{padding-inline:var(--g4)}.px-6{padding-inline:var(--g6)}.px-8{padding-inline:var(--g8)} .py-4{padding-block:var(--g4)}.py-6{padding-block:var(--g6)}.py-8{padding-block:var(--g8)}.py-10{padding-block:var(--g10)} .m-0{margin:0}.mt-2{margin-top:var(--g2)}.mt-4{margin-top:var(--g4)}.mt-6{margin-top:var(--g6)}.mt-8{margin-top:var(--g8)} .mb-2{margin-bottom:var(--g2)}.mb-4{margin-bottom:var(--g4)}.mb-6{margin-bottom:var(--g6)}.mb-8{margin-bottom:var(--g8)} .gap-2{gap:var(--g2)}.gap-3{gap:var(--g3)}.gap-4{gap:var(--g4)}.gap-5{gap:var(--g5)}.gap-6{gap:var(--g6)} /* ── SURFACES ──────────────────────────────────────────────── */ .surface-0{background:var(--surface-0)}.surface-1{background:var(--surface-1)} .surface-2{background:var(--surface-2)}.surface-3{background:var(--surface-3)} .bordered{border:1px solid var(--border)}.bordered-subtle{border:1px solid var(--border-subtle)} .rounded{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}.rounded-xl{border-radius:var(--r-xl)} .shadow{box-shadow:0 4px calc(16px * var(--shadow-intensity)) oklch(var(--shadow-base)/calc(.12 * var(--shadow-intensity)))} .shadow-lg{box-shadow:0 8px calc(32px * var(--shadow-intensity)) oklch(var(--shadow-base)/calc(.18 * var(--shadow-intensity)))} /* ── TEXT COLORS ───────────────────────────────────────────── */ .text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)} .text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)} /* ── CARD ──────────────────────────────────────────────────── */ .card{ background:var(--surface-1);border:1px solid var(--border-subtle); border-radius:var(--r-card);padding:var(--card-pad); transition:border-color calc(var(--anim-speed)*180ms) var(--ease),box-shadow calc(var(--anim-speed)*180ms) var(--ease); } .card:hover{border-color:var(--border);box-shadow:0 4px calc(20px * var(--shadow-intensity)) oklch(var(--shadow-base)/calc(.1 * var(--shadow-intensity)))} .card-accent{border-color:var(--accent)} /* ── BUTTON ────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:var(--g2); padding:.6em 1.4em;border:none;border-radius:var(--r-md); font-weight:600;font-size:var(--t-sm);cursor:pointer; transition:all calc(var(--anim-speed)*180ms) var(--ease); } .btn-accent{background:var(--accent);color:var(--accent-text)} .btn-accent:hover{background:var(--accent-hover);transform:translateY(-1px)} .btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-primary)} .btn-outline:hover{border-color:var(--accent);color:var(--accent)} .btn-ghost{background:transparent;color:var(--text-secondary)} .btn-ghost:hover{color:var(--text-primary);background:var(--surface-2)} .btn-sm{padding:.4em 1em;font-size:var(--t-xs)} .btn-lg{padding:.75em 2em;font-size:var(--t-md)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} /* ── INPUT ─────────────────────────────────────────────────── */ .input{ width:100%;padding:.6em 1em;border:1.5px solid var(--border); border-radius:var(--r-md);background:var(--input-bg);color:var(--text-primary); font-size:var(--t-sm); transition:border-color calc(var(--anim-speed)*180ms) var(--ease); } .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)} .input::placeholder{color:var(--text-muted)} .select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;padding-right:2.5em} /* ── BADGE ─────────────────────────────────────────────────── */ .badge{ display:inline-flex;align-items:center;gap:var(--g1); padding:.2em .7em;border-radius:var(--r-full); font-size:var(--t-xs);font-weight:600; background:var(--accent-subtle);color:var(--accent); } /* ── STAT ──────────────────────────────────────────────────── */ .stat{text-align:center} .stat-value{font-size:var(--t-2xl);font-weight:700;line-height:1.1} .stat-label{font-size:var(--t-sm);color:var(--text-muted);margin-top:var(--g1)} /* ── TABLE ─────────────────────────────────────────────────── */ .table{width:100%;border-collapse:collapse;font-size:var(--t-sm)} .table th,.table td{padding:var(--g3) var(--g4);text-align:left;border-bottom:1px solid var(--border-subtle)} .table th{font-weight:600;color:var(--text-secondary);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em} .table tr:hover td{background:var(--surface-2)} /* ── NAV ───────────────────────────────────────────────────── */ .nav{ position:sticky;top:0;z-index:100; background:oklch(from var(--surface-0) l c h/.85); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle);padding:var(--nav-pad) 0; } .nav-inner{display:flex;align-items:center;justify-content:space-between} .nav-brand{font-weight:700;font-size:var(--t-md);color:var(--text-primary)} .nav-links{display:flex;gap:var(--g5);align-items:center} .nav-links a{font-size:var(--t-sm);color:var(--text-secondary);transition:color calc(var(--anim-speed)*180ms) var(--ease)} .nav-links a:hover{color:var(--text-primary)} /* ── SECTION ───────────────────────────────────────────────── */ .section{padding:var(--section-pad) 0} .section-label{font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:var(--g2)} .section-title{font-size:var(--t-xl);font-weight:700;line-height:1.2;margin-bottom:var(--g2)} .section-desc{font-size:var(--t-base);color:var(--text-secondary);max-width:60ch;margin-bottom:var(--g7)} /* ── HERO ──────────────────────────────────────────────────── */ .hero{padding:var(--g10) 0 var(--g9)} .hero-tag{display:inline-block;padding:.3em .9em;border-radius:var(--r-full);font-size:var(--t-xs);font-weight:600;background:var(--accent-subtle);color:var(--accent);margin-bottom:var(--g4)} .hero h1{font-size:var(--t-3xl);font-weight:700;line-height:1.1;max-width:16ch;margin-bottom:var(--g4)} .hero p{font-size:var(--t-md);color:var(--text-secondary);max-width:50ch;margin-bottom:var(--g6);line-height:1.5} /* ── DIVIDER ───────────────────────────────────────────────── */ .divider{border:none;border-top:1px solid var(--border-subtle);margin:var(--g6) 0} /* ── FOOTER ────────────────────────────────────────────────── */ .footer{padding:var(--g8) 0 var(--g6);border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:var(--t-sm)} /* ── MISC ──────────────────────────────────────────────────── */ .w-full{width:100%}.h-full{height:100%} .block{display:block}.inline-block{display:inline-block}.hidden{display:none} .overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto} .relative{position:relative}.absolute{position:absolute}.sticky{position:sticky} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .no-select{user-select:none} .pointer{cursor:pointer} /* ── OKLCH COLORS — ATTRIBUTE APPROACH ─────────────────────── */ /* bg="color" s="0-9" | tc="color" s="0-9" */ [bg="red"]{background:oklch(var(--L5) var(--C) var(--h-red))} [bg="orange"]{background:oklch(var(--L5) var(--C) var(--h-orange))} [bg="amber"]{background:oklch(var(--L5) var(--C) var(--h-amber))} [bg="yellow"]{background:oklch(var(--L5) var(--C) var(--h-yellow))} [bg="lime"]{background:oklch(var(--L5) var(--C) var(--h-lime))} [bg="green"]{background:oklch(var(--L5) var(--C) var(--h-green))} [bg="teal"]{background:oklch(var(--L5) var(--C) var(--h-teal))} [bg="cyan"]{background:oklch(var(--L5) var(--C) var(--h-cyan))} [bg="sky"]{background:oklch(var(--L5) var(--C) var(--h-sky))} [bg="blue"]{background:oklch(var(--L5) var(--C) var(--h-blue))} [bg="indigo"]{background:oklch(var(--L5) var(--C) var(--h-indigo))} [bg="purple"]{background:oklch(var(--L5) var(--C) var(--h-purple))} [bg="pink"]{background:oklch(var(--L5) var(--C) var(--h-pink))} [bg="slate"]{background:oklch(var(--L5) var(--C-soft) var(--h-slate))} [bg][s="0"]{--_L:var(--L0)}[bg][s="1"]{--_L:var(--L1)}[bg][s="2"]{--_L:var(--L2)} [bg][s="3"]{--_L:var(--L3)}[bg][s="4"]{--_L:var(--L4)}[bg][s="5"]{--_L:var(--L5)} [bg][s="6"]{--_L:var(--L6)}[bg][s="7"]{--_L:var(--L7)}[bg][s="8"]{--_L:var(--L8)} [bg][s="9"]{--_L:var(--L9)} [bg="red"][s]{background:oklch(var(--_L) var(--C) var(--h-red))} [bg="orange"][s]{background:oklch(var(--_L) var(--C) var(--h-orange))} [bg="amber"][s]{background:oklch(var(--_L) var(--C) var(--h-amber))} [bg="yellow"][s]{background:oklch(var(--_L) var(--C) var(--h-yellow))} [bg="lime"][s]{background:oklch(var(--_L) var(--C) var(--h-lime))} [bg="green"][s]{background:oklch(var(--_L) var(--C) var(--h-green))} [bg="teal"][s]{background:oklch(var(--_L) var(--C) var(--h-teal))} [bg="cyan"][s]{background:oklch(var(--_L) var(--C) var(--h-cyan))} [bg="sky"][s]{background:oklch(var(--_L) var(--C) var(--h-sky))} [bg="blue"][s]{background:oklch(var(--_L) var(--C) var(--h-blue))} [bg="indigo"][s]{background:oklch(var(--_L) var(--C) var(--h-indigo))} [bg="purple"][s]{background:oklch(var(--_L) var(--C) var(--h-purple))} [bg="pink"][s]{background:oklch(var(--_L) var(--C) var(--h-pink))} [bg="slate"][s]{background:oklch(var(--_L) var(--C-soft) var(--h-slate))} [tc="red"]{color:oklch(var(--L5) var(--C) var(--h-red))} [tc="orange"]{color:oklch(var(--L5) var(--C) var(--h-orange))} [tc="amber"]{color:oklch(var(--L5) var(--C) var(--h-amber))} [tc="yellow"]{color:oklch(var(--L5) var(--C) var(--h-yellow))} [tc="lime"]{color:oklch(var(--L5) var(--C) var(--h-lime))} [tc="green"]{color:oklch(var(--L5) var(--C) var(--h-green))} [tc="teal"]{color:oklch(var(--L5) var(--C) var(--h-teal))} [tc="cyan"]{color:oklch(var(--L5) var(--C) var(--h-cyan))} [tc="sky"]{color:oklch(var(--L5) var(--C) var(--h-sky))} [tc="blue"]{color:oklch(var(--L5) var(--C) var(--h-blue))} [tc="indigo"]{color:oklch(var(--L5) var(--C) var(--h-indigo))} [tc="purple"]{color:oklch(var(--L5) var(--C) var(--h-purple))} [tc="pink"]{color:oklch(var(--L5) var(--C) var(--h-pink))} [tc="white"]{color:oklch(97% 0 0)}[tc="black"]{color:oklch(15% 0 0)} [tc][s="0"]{--_tL:var(--L0)}[tc][s="1"]{--_tL:var(--L1)}[tc][s="2"]{--_tL:var(--L2)} [tc][s="3"]{--_tL:var(--L3)}[tc][s="4"]{--_tL:var(--L4)}[tc][s="5"]{--_tL:var(--L5)} [tc][s="6"]{--_tL:var(--L6)}[tc][s="7"]{--_tL:var(--L7)}[tc][s="8"]{--_tL:var(--L8)} [tc][s="9"]{--_tL:var(--L9)} [tc="red"][s]{color:oklch(var(--_tL) var(--C) var(--h-red))} [tc="orange"][s]{color:oklch(var(--_tL) var(--C) var(--h-orange))} [tc="amber"][s]{color:oklch(var(--_tL) var(--C) var(--h-amber))} [tc="yellow"][s]{color:oklch(var(--_tL) var(--C) var(--h-yellow))} [tc="lime"][s]{color:oklch(var(--_tL) var(--C) var(--h-lime))} [tc="green"][s]{color:oklch(var(--_tL) var(--C) var(--h-green))} [tc="teal"][s]{color:oklch(var(--_tL) var(--C) var(--h-teal))} [tc="cyan"][s]{color:oklch(var(--_tL) var(--C) var(--h-cyan))} [tc="sky"][s]{color:oklch(var(--_tL) var(--C) var(--h-sky))} [tc="blue"][s]{color:oklch(var(--_tL) var(--C) var(--h-blue))} [tc="indigo"][s]{color:oklch(var(--_tL) var(--C) var(--h-indigo))} [tc="purple"][s]{color:oklch(var(--_tL) var(--C) var(--h-purple))} [tc="pink"][s]{color:oklch(var(--_tL) var(--C) var(--h-pink))} /* ── ICON SIZE UTILITIES ───────────────────────────────────── */ .icon-xs{width:14px;height:14px;font-size:14px} .icon-sm{width:18px;height:18px;font-size:18px} .icon-md{width:22px;height:22px;font-size:22px} .icon-lg{width:28px;height:28px;font-size:28px} .icon-xl{width:36px;height:36px;font-size:36px}