/* --------------------------------------------------------------------------- The Age Rabbit Hole — stylesheet Copied verbatim into dist/assets/ by build/generate-site.js. Kept as its own file (rather than inlined) so browsers cache it once and reuse it across the homepage and all ~127 birth-year pages. THEMING "Playful" is the light default; "Cosmic" is the dark one. The tone toggle writes data-theme onto . Three states matter: an explicit choice stamps data-theme, and the default "system" setting stamps nothing — so every colour is defined on bare :root first, then re-declared under both the prefers-color-scheme media query AND [data-theme="dark"]. Never give a colour its only definition inside a media block. CATEGORY COLOURS Each card carries --hue (a number, set inline by the generator). One formula turns it into --cc. Same saturation and lightness across all 24, hues spaced evenly round the wheel, so many colours still read as one system rather than confetti. --------------------------------------------------------------------------- */ :root { --ground:#F7F5FC; --surface:#FFFFFF; --surface-2:#EFEBF8; --ink:#1A1230; --ink-soft:#514668; --ink-faint:#8E86A8; --line:#E0D9F0; --accent:#FF5C3A; --accent-on:#FFFFFF; --teal:#009B96; --violet:#6C4BF6; --shadow:0 1px 2px rgba(26,18,48,.05), 0 5px 16px -12px rgba(26,18,48,.22); --display:'Century Gothic','Futura','Avenir Next','URW Gothic',system-ui,sans-serif; --num:'Bahnschrift','DIN Alternate','Oswald','Segoe UI Variable Display',var(--display); --body:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --mono:'Cascadia Mono','SF Mono',Consolas,'Liberation Mono',monospace; --r:13px; --maxw:1280px; } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --ground:#0C0A18; --surface:#16132A; --surface-2:#201B3B; --ink:#F3EFFC; --ink-soft:#C4BBDE; --ink-faint:#8C82AA; --line:#2C2550; --accent:#FF6B45; --accent-on:#1A0D07; --teal:#2FD8C6; --violet:#9B87FF; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8); } } :root[data-theme="dark"] { --ground:#0C0A18; --surface:#16132A; --surface-2:#201B3B; --ink:#F3EFFC; --ink-soft:#C4BBDE; --ink-faint:#8C82AA; --line:#2C2550; --accent:#FF6B45; --accent-on:#1A0D07; --teal:#2FD8C6; --violet:#9B87FF; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8); } .card { --cc: hsl(var(--hue) 78% 37%); } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .card { --cc: hsl(var(--hue) 85% 68%); } } :root[data-theme="dark"] .card { --cc: hsl(var(--hue) 85% 68%); } /* ---------- base ---------- */ * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } .wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; } h1,h2,h3,h4 { font-family:var(--display); text-wrap:balance; margin:0; font-weight:700; } p { margin:0; } a { color:var(--accent); } .num { font-family:var(--num); font-variant-numeric:tabular-nums; letter-spacing:.01em; } :focus-visible { outline:2.5px solid var(--accent); outline-offset:2px; border-radius:5px; } .eyebrow { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ---------- header ---------- */ .topbar { border-bottom:1px solid var(--line); background:var(--surface); } .topbar .wrap { display:flex; align-items:center; gap:14px; justify-content:space-between; min-height:52px; flex-wrap:wrap; } .brandmark { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); text-decoration:none; } .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); } .seg { display:flex; background:var(--surface-2); border-radius:999px; padding:3px; border:1px solid var(--line); } .seg button { font:inherit; font-family:var(--display); font-weight:700; font-size:11.5px; border:0; background:transparent; color:var(--ink-soft); padding:5px 13px; border-radius:999px; cursor:pointer; } .seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-on); } .toneswitch { display:flex; align-items:center; gap:8px; } /* ---------- pre-rendered intro (birth-year pages) ---------- */ .intro { padding:26px 0 4px; } .intro h1 { font-size:clamp(25px,4vw,38px); line-height:1.1; letter-spacing:-.015em; } /* Homepage hero: a single centred instruction, with room around it so it reads as a prompt rather than a headline. */ .intro.centred { text-align:center; padding:34px 0 10px; } .intro.centred h1 { font-size:clamp(30px,5vw,46px); } .intro .lede { margin-top:12px; max-width:70ch; color:var(--ink-soft); font-size:16px; } .intro .lede b { color:var(--ink); } .intro .facts { margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; } .intro .facts span { background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13.5px; color:var(--ink-soft); } .intro .facts span b { color:var(--ink); } /* ---------- the two questions ---------- */ .questions { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 0 12px; } @media (max-width:760px){ .questions { grid-template-columns:1fr; } } .qbox { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; } .qbox .label { font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); } .qbox input[type=text] { font:inherit; font-family:var(--display); font-size:17px; font-weight:700; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:11px 13px; width:100%; } .answer { margin-top:auto; } .ageline { display:flex; align-items:baseline; gap:9px; } .ageline .big { font-family:var(--num); font-size:60px; font-weight:700; line-height:.86; color:var(--accent); font-variant-numeric:tabular-nums; } .ageline .unit { font-family:var(--display); font-size:16px; font-weight:700; } .agesub { font-family:var(--display); font-size:26px; font-weight:700; color:var(--ink); margin-top:11px; line-height:1.25; } .agesub b { font-family:var(--num); font-size:33px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; } .ageclock { font-family:var(--display); font-size:21px; font-weight:700; color:var(--ink); margin-top:5px; line-height:1.25; } .ageclock b { font-family:var(--num); font-size:27px; font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; } /* Typed entry is the primary way in; the calendar sits beside it as an option. Walking a picker back several decades to reach a birth year is slow, and typing 06 / 15 / 1976 is not — but people reach for different ones, so both drive the same value and stay in sync. align-items:flex-end keeps the calendar button level with the inputs rather than with their labels. */ .dobrow { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .fld { display:flex; flex-direction:column; gap:6px; } /* This is the most important input on the site, so the labels are set like headings rather than like form captions — display face, near-black, sized to be read rather than skimmed past. */ .fld > label, .fld > .flabel { font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding-left:2px; } .tf { font:inherit; font-family:var(--num); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; text-align:center; background:var(--surface-2); color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:0 8px; width:92px; height:64px; } .tf.yr { width:124px; } .tf:focus { border-color:var(--accent); } .tf.bad { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)); } #tMeridiem { font:inherit; font-family:var(--display); font-weight:700; font-size:18px; background:var(--surface-2); color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:0 12px; height:64px; cursor:pointer; } .dobecho { font-size:14.5px; color:var(--ink-soft); margin-top:2px; } .dobecho b { color:var(--ink); font-weight:600; } .timetoggle { font:inherit; font-family:var(--display); font-weight:700; font-size:13.5px; background:transparent; border:0; color:var(--accent); cursor:pointer; padding:0; text-align:left; align-self:flex-start; } .timetoggle:hover { text-decoration:underline; } .timerow { display:flex; align-items:center; gap:11px; flex-wrap:wrap; } .timerow[hidden] { display:none; } .timerow input { font:inherit; font-family:var(--display); font-size:16px; font-weight:700; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; } .timenote { font-size:12.5px; color:var(--ink-faint); flex:1 1 140px; min-width:120px; } .origin { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--teal); border:1px solid color-mix(in srgb,var(--teal) 40%,transparent); padding:3px 8px; border-radius:5px; } .meaning { font-family:var(--display); font-weight:700; font-size:25px; line-height:1.2; margin-top:8px; } .nmrows { margin-top:10px; display:flex; flex-direction:column; } .nmrow { display:flex; justify-content:space-between; gap:14px; padding:5px 0; border-top:1px solid var(--line); font-size:14px; } .nmrow .k { color:var(--ink); font-weight:600; } .nmrow .v { color:var(--ink-soft); text-align:right; } .nmask { margin-top:9px; font-size:13.5px; color:var(--ink-soft); background:var(--surface-2); border-radius:8px; padding:9px 11px; } .nmask b { color:var(--ink); } /* ---------- date picker ---------- */ .datepick { position:relative; } .dpbtn { font:inherit; background:var(--surface-2); color:var(--ink); border:1.5px solid var(--line); border-radius:10px; width:64px; height:64px; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:27px; line-height:1; } .dpbtn:hover { border-color:var(--accent); } .dppop { position:absolute; z-index:60; top:calc(100% + 7px); left:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px; width:302px; max-width:calc(100vw - 40px); box-shadow:0 12px 40px -12px rgba(26,18,48,.45), 0 0 0 1px var(--line); } .dppop[hidden] { display:none; } .dphead { display:flex; gap:8px; margin-bottom:10px; } .dphead select { font:inherit; font-family:var(--display); font-weight:700; font-size:14px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:7px 8px; flex:1; min-width:0; cursor:pointer; } .dpdow, .dpgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .dpdow span { text-align:center; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); padding-bottom:4px; text-transform:uppercase; } .dpgrid button { font:inherit; font-family:var(--num); font-size:14px; font-weight:700; background:transparent; color:var(--ink); border:0; border-radius:7px; aspect-ratio:1; cursor:pointer; font-variant-numeric:tabular-nums; } .dpgrid button:hover:not(:disabled) { background:var(--surface-2); } .dpgrid button.sel { background:var(--accent); color:var(--accent-on); } .dpgrid button.empty { visibility:hidden; cursor:default; } .dpgrid button:disabled { color:var(--ink-faint); opacity:.35; cursor:not-allowed; } .dpfoot { margin-top:9px; padding-top:9px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:8px; } .dpfoot .hint { font-size:11.5px; color:var(--ink-faint); } .dpfoot button { font:inherit; font-family:var(--display); font-weight:700; font-size:12.5px; background:transparent; border:0; color:var(--accent); cursor:pointer; padding:2px 4px; } /* ---------- counters ---------- */ .counters { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:16px; } @media (max-width:620px){ .counters { grid-template-columns:1fr; } } .ctr { background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:12px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:1px; } .ctr .lbl { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); } .ctr .val { font-family:var(--num); font-size:29px; font-weight:700; line-height:1.06; font-variant-numeric:tabular-nums; } .ctr.c1 .val { color:var(--accent); } .ctr.c2 .val { color:var(--teal); } .ctr.c3 .val { color:var(--violet); } /* ---------- shuffle ---------- */ .shuffle { background:linear-gradient(100deg, var(--violet), var(--accent)); border-radius:var(--r); padding:20px 24px; margin-bottom:20px; color:#fff; display:flex; align-items:center; gap:24px; flex-wrap:wrap; box-shadow:0 10px 30px -14px rgba(0,0,0,.55); } /* The pulse is held back until the visitor has actually chosen their birthday. On arrival the one thing they need to do is pick a date; a pulsing button somewhere else is pulling the eye away from it. Once a date is in, the pulse becomes an invitation to explore rather than a distraction. */ .shuffle button { font:inherit; font-family:var(--display); font-weight:700; font-size:19px; background:#fff; color:#1A1230; border:0; border-radius:999px; padding:16px 32px; cursor:pointer; white-space:nowrap; flex:none; transition:transform .14s ease; } body.date-chosen .shuffle button { animation:pulse 2.1s ease-out infinite; } /* Until then, the date button is the thing that stands out. */ .dpbtn { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); } body.date-chosen .dpbtn { border-color:var(--line); } /* Back to top — 24 cards is a long page on a phone. */ .totop { position:fixed; right:16px; bottom:16px; z-index:70; width:46px; height:46px; border-radius:50%; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:0 6px 20px -8px rgba(0,0,0,.35); font-size:20px; line-height:1; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .22s ease; } .totop.show { opacity:1; pointer-events:auto; } .totop:hover { border-color:var(--accent); color:var(--accent); } .shuffle button:hover { transform:scale(1.05); } .shuffle button:active { transform:scale(.96); } @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.85); } 70% { box-shadow:0 0 0 16px rgba(255,255,255,0); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } } .shuffle .out { flex:1 1 340px; min-width:0; } .shuffle .out .k { font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; opacity:.92; margin-bottom:2px; } .shuffle .out .v { font-family:var(--num); font-weight:700; font-size:52px; line-height:1.02; font-variant-numeric:tabular-nums; word-break:break-word; } .shuffle .out .v.word { font-family:var(--display); font-size:31px; line-height:1.15; } .shuffle .out .v.flash { animation:flash .45s ease; } @keyframes flash { 0%{opacity:.15; transform:translateY(6px);} 100%{opacity:1; transform:none;} } /* ---------- cards ---------- */ .cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); padding-bottom:18px; align-items:start; } @media (max-width:1140px){ .cards { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); } } @media (max-width:700px){ .cards { grid-template-columns:1fr; } } .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:17px 19px 14px; box-shadow:var(--shadow); } /* Titles are black and larger; the category colour lives on the rule beneath and on the numbers. Tested both ways in the mockups — coloured headings read as busier, and black is easier on the eye for the many visitors who will scan the whole page. */ .cat-title { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:20px; line-height:1.2; color:var(--ink); } .cat-title .em { font-size:21px; line-height:1; flex:none; } .rule { height:2.5px; border-radius:2px; margin:10px 0 3px; background:var(--cc); opacity:.85; } .stat { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:8.5px 0; border-bottom:1px solid var(--line); } .stat:last-child { border-bottom:0; } .stat .k { font-size:15px; color:var(--ink); font-weight:600; line-height:1.35; } .stat .v { font-family:var(--num); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--cc); } .stat .v.word { font-size:15px; white-space:normal; text-align:right; line-height:1.3; color:var(--ink-soft); } .est { font-family:var(--mono); font-size:8px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:1px; font-weight:400; } .more { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; } .more > .inner { overflow:hidden; } .card.open .more { grid-template-rows:1fr; } .toggle { font:inherit; font-family:var(--display); font-weight:700; font-size:13.5px; background:transparent; border:0; cursor:pointer; padding:10px 0 2px; display:flex; align-items:center; gap:6px; width:100%; color:var(--cc); } .toggle .arrow { transition:transform .3s ease; display:inline-block; font-size:10px; } .card.open .toggle .arrow { transform:rotate(180deg); } /* card lead blocks */ .versus { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:9px 0 3px; } .vs { padding:10px 12px; border-radius:9px; background:var(--surface-2); } .vs.truth { background:color-mix(in srgb,var(--cc) 14%,var(--surface)); border:1px solid color-mix(in srgb,var(--cc) 34%,transparent); } .vs .tag { font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .vs.truth .tag { color:var(--cc); } .vs .n { font-family:var(--num); font-size:26px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; } .vs .sm { font-size:11.5px; color:var(--ink-soft); } .closer { font-family:var(--display); font-size:17px; font-weight:700; line-height:1.3; padding:9px 0 6px; } .closer b { color:var(--cc); } .bar { display:flex; height:12px; border-radius:4px; overflow:hidden; border:1px solid var(--line); margin-bottom:5px; } .bar .a { background:var(--cc); } .bar .b { background:var(--surface-2); } .cmpin { font:inherit; font-family:var(--display); font-size:14px; font-weight:700; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%; margin:9px 0 4px; cursor:pointer; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:8px; } .cmpbig { font-family:var(--num); font-size:34px; font-weight:700; line-height:1; color:var(--cc); font-variant-numeric:tabular-nums; } .cmpsub { font-size:13px; color:var(--ink-soft); margin-top:3px; padding-bottom:4px; } .leadrow { display:flex; align-items:center; gap:14px; padding:9px 0 5px; } .leadrow .glyph { font-size:46px; line-height:1; } .leadrow .lname { font-family:var(--display); font-weight:700; font-size:20px; color:var(--cc); line-height:1.2; } .leadrow .lsub { font-size:13.5px; color:var(--ink-soft); } .raritylead { padding:9px 0 5px; } .raritybig { font-family:var(--num); font-size:34px; font-weight:700; line-height:1; color:var(--cc); font-variant-numeric:tabular-nums; } .raritysub { font-size:13.5px; color:var(--ink-soft); margin-top:3px; } .rbar { height:10px; border-radius:3px; background:var(--surface-2); margin-top:8px; overflow:hidden; border:1px solid var(--line); } .rbar span { display:block; height:100%; background:var(--cc); } .headline { font-family:var(--display); font-weight:700; font-size:18px; line-height:1.3; color:var(--cc); padding:9px 0 4px; } .famlist { padding:9px 0 4px; display:flex; flex-direction:column; gap:7px; } .fam { display:flex; align-items:baseline; gap:10px; } .fam .nm { font-family:var(--display); font-weight:700; font-size:17px; color:var(--cc); line-height:1.2; } .fam .yr { font-family:var(--num); font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-left:auto; flex:none; } /* ---------- share ---------- */ .sharebar { display:flex; gap:11px; flex-wrap:wrap; align-items:center; padding:4px 0 20px; } .sharebar button { font:inherit; font-family:var(--display); font-weight:700; font-size:14.5px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:11px 20px; cursor:pointer; } .sharebar button:hover { border-color:var(--accent); color:var(--accent); } .sharebar .msg { font-size:13.5px; color:var(--teal); font-family:var(--display); font-weight:700; } /* ---------- reminder + year links ---------- */ .remind { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:0 var(--r) var(--r) 0; padding:17px 19px; margin:4px 0 16px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow); } .remind .copy { flex:1 1 320px; min-width:260px; } .remind h2 { font-size:17px; } .remind p { font-size:14px; color:var(--ink-soft); margin-top:5px; } .remind .form { display:flex; gap:9px; flex:1 1 320px; min-width:260px; } .remind input { font:inherit; font-size:14px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px 12px; flex:1; min-width:0; } .remind button { font:inherit; font-family:var(--display); font-weight:700; font-size:14px; background:var(--teal); color:#fff; border:0; border-radius:8px; padding:10px 18px; cursor:pointer; white-space:nowrap; } .remind .done { font-size:14px; color:var(--teal); font-family:var(--display); font-weight:700; } .yearnav { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:17px 19px; margin-bottom:22px; box-shadow:var(--shadow); } .yearnav h2 { font-size:16px; } .yearnav p { font-size:14px; color:var(--ink-soft); margin-top:5px; } .yearnav .list { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } .yearnav a { font-family:var(--mono); font-size:12px; text-decoration:none; color:var(--violet); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:6px 10px; } .yearnav a:hover { border-color:var(--violet); } .yearnav a.now { background:var(--violet); color:#fff; border-color:var(--violet); } /* ---------- prose + footer ---------- */ .prose { padding:24px 0; border-top:1px solid var(--line); } .prose h2 { font-size:21px; margin-bottom:9px; } .prose h3 { font-size:16px; margin:18px 0 6px; } .prose p { color:var(--ink-soft); font-size:15px; max-width:74ch; margin-bottom:10px; } .prose p b { color:var(--ink); } footer { padding:24px 0 50px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:12.5px; } footer .flinks { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; } footer a { color:var(--ink-soft); text-decoration:none; } footer a:hover { color:var(--accent); } @media (prefers-reduced-motion:reduce) { * { animation:none !important; transition-duration:.001ms !important; } }