body, html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
  
  body { font-family: "JetBrains Mono";  font-size: 14px; margin: 0; min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background-color: light-dark(var(--light-bg), var(--dark-bg)); color: light-dark(var(--light-color), var(--dark-color)); }
  a, a:active, a:link, a:visited { color: light-dark(var(--light-color), var(--dark-color)); text-decoration: none;  }
  a:hover { transition: all .4s ease; -webkit-transition: all .4s ease; font-weight: bold; }
  .container { width: 80%; margin: 0 auto; }
  #navigation { height: 100%; top: 0; width: 100%; padding: 30px 0; }
  #navigation table { margin: 0; padding: 0; border: 0; }
  #navigation td { margin:0; padding: 0; }
  #navigation .links { padding: 9px; text-align: center; }
  #navigation .links a, a:links { text-decoration: none; font-size: 14px; }
  #content {  width:100%; height: 100%; flex-grow: 1;  }
  #content .container { text-align: center; }
  #content .fluid { display: flex; align-items: center; justify-content: center;  overflow: hidden; }
  #footer { padding: 30px 0; text-align: center; position: absolute; bottom: 0; width: 100%; }
    
h2 { font-size: 40px; }
.smileyface { float:right; }
blockquote {  padding: 20px; border: 1px solid oklch(0.9 0.012 250); background: linear-gradient(175deg,oklch(0.985 0.005 250),oklch(0.95 0.012 250)); }
.tags { padding: 7px 15px; border: 1px solid #DCE3EC; background: #F1F5F9; font-size: 11px; font-family: "JetBrains Mono"; color: #0F172A; border-radius: 15px; }
    
#navigation a.three:hover { background-color:#d31f1f; }
#navigation a:hover { }
a.four { position: relative; }
a.four:hover { padding-bottom: 2px; }
a.four::before { content: ''; position: absolute; width: 100%; height: 4px; border-radius: 0px; padding-bottom: 2px; background-color: #47c277; bottom: 0; left: 0; transform-origin: left; transform: scaleX(0); transition: transform .3s ease-in-out; }
a.four:hover::before { transform-origin: right; transform: scaleX(1); }
#navigation a.one {  position: relative; text-decoration: none; }
a.one::before { background: #496EFC; content: ""; inset: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease-in-out; z-index: -1; }
a.one:hover::before { transform: scaleX(1); transform-origin: left; }
a.extend { text-decoration: none; font-weight: 700; position: relative; }
a.extend::before { content: ''; background-color: hsl(45 100% 70%); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; }
a.extend:hover::before { bottom: 0; height: 100%; }
a.waves :root { --mainColor: #ff9800; }
a.waves { text-decoration: none; }
a.waves:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 6px; background-repeat: repeat-x; text-decoration: none; }
.cle-26, .cle-26 *, .cle-26 *::before, .cle-26 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cle-26 { width: 100%; min-height: 100vh; --ink: oklch(0.3 0.02 250); --accent: oklch(0.52 0.17 250); font-family: ui-monospace,'Cascadia Code',Menlo,Consolas,monospace; }
.cle-26__stage { width: 100%; height: 100vh; display: grid; align-content: center; justify-items: center; gap: 46px; border: 1px solid oklch(0.9 0.012 250); background: linear-gradient(175deg,oklch(0.985 0.005 250),oklch(0.95 0.012 250)); padding: 44px 32px; }
.cle-26__var { font-size: 40px; color: light-dark(var(--light-color), var(--dark-color)); display: grid; gap: 13px; }
.cle-26__cap { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.55 0.03 250); font-family: 'Segoe UI',system-ui,sans-serif; }
.cle-26 a { color: var(--ink); text-decoration: none; font-size: clamp(20px,2.8vw,26px); font-weight: 600; transition: color .3s; }
.cle-26 a:hover, .cle-26 a:focus-visible { color: #496EFC; }
.cle-26 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
.cle-26__added { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: pre; width: 0; color: var(--accent); border-right: 2px solid transparent; }
.cle-26__type:hover .cle-26__added, .cle-26__type:focus-visible .cle-26__added { color: #496EFC; animation: clh26-typeA .7s steps(9) forwards,clh26-caret 1s steps(1) infinite; }
@keyframes clh26-typeA { to { width: 9ch;  } }
@keyframes clh26-caret {  0%, 49% { border-right-color: var(--accent); } 50%, 100% { border-right-color: transparent; } }
.cle-26__retype .cle-26__old, .cle-26__retype .cle-26__new { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: pre; }
.cle-26__retype .cle-26__old { width: 8ch; }
.cle-26__retype .cle-26__new { width: 0; color: var(--accent); }
.cle-26__retype .cle-26__edge { display: inline-block; vertical-align: bottom; width: 2px; height: 1.15em; background: transparent; }
.cle-26__retype:hover .cle-26__old, .cle-26__retype:focus-visible .cle-26__old { animation: clh26-del .35s steps(8) forwards; }
.cle-26__retype:hover .cle-26__new, .cle-26__retype:focus-visible .cle-26__new { animation: clh26-typeB .5s steps(13) .45s forwards; }
.cle-26__retype:hover .cle-26__edge, .cle-26__retype:focus-visible .cle-26__edge { animation: clh26-edge 1s steps(1) infinite; }
@keyframes clh26-del { to {  width: 0; } }
@keyframes clh26-typeB { to { width: 13ch;  } }
@keyframes clh26-edge { 0%, 49% { background: var(--accent); } 50%, 100% { background: transparent; } } .cle-26__chunk { position: relative; font-family: 'Segoe UI',system-ui,sans-serif; font-weight: 800; letter-spacing: -.01em; } .cle-26__chunk::after { content: attr(data-text); position: absolute; inset: 0; color: var(--accent); clip-path: inset(0 100% 0 0); transition: clip-path .6s steps(12,end); } .cle-26__chunk:hover::after, .cle-26__chunk:focus-visible::after { clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .cle-26 * { animation: none !important; transition-duration: .01s !important; } .cle-26__type:hover .cle-26__added { width: 9ch; } .cle-26__retype:hover .cle-26__old { width: 0; }
.cle-26__retype:hover .cle-26__new { width: 13ch; } }