/* khanbabajic.com: one shared look for the home page and the games page.
   White paper, black pixel line-art, and Khan is the only thing in color.
   Everything sits on a 4px grid; Jersey 10 (same font as semirbabajic.com) is drawn on a
   10px grid, so every font-size is a multiple of 10 to keep the letters crisp. */
@font-face{font-family:'Jersey 10';src:url('/fonts/jersey-10.woff2') format('woff2');font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jersey 10';src:url('/fonts/jersey-10-ext.woff2') format('woff2');font-display:block;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#141414; --paper:#ffffff; --soft:#f2f2f2; --line:#d6d6d6; --muted:#6b6b6b;
  --px:4px;
  --font:'Jersey 10',ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:30px;line-height:1.1;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-smooth:never}
img,svg{display:block}
a{color:inherit}

.scene{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}
.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;animation:drift linear infinite}
.cloud svg{width:100%;height:auto}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}

/* The ground: one black line with a dashed chalk line under it, nothing else. */
.pitch{position:relative;background:
  linear-gradient(var(--ink) 0 var(--px),transparent var(--px)),
  repeating-linear-gradient(90deg,var(--line) 0 16px,transparent 16px 32px) 0 28px/100% var(--px) no-repeat}

/* Pixel boxes: the side shadows leave the four corners empty, so every box has stepped corners. */
.box{background:var(--paper);
  box-shadow:0 calc(-1*var(--px)) 0 var(--ink),0 var(--px) 0 var(--ink),
    calc(-1*var(--px)) 0 0 var(--ink),var(--px) 0 0 var(--ink),
    0 calc(3*var(--px)) 0 var(--line)}
.btn{display:inline-flex;align-items:center;gap:16px;padding:12px 28px 14px;text-decoration:none;
  font-family:var(--font);font-size:40px;line-height:1;color:var(--paper);background:var(--ink);
  cursor:pointer;touch-action:manipulation;
  box-shadow:0 calc(-1*var(--px)) 0 var(--ink),0 var(--px) 0 var(--ink),
    calc(-1*var(--px)) 0 0 var(--ink),var(--px) 0 0 var(--ink),0 calc(3*var(--px)) 0 var(--line)}
.btn:hover{background:#333;box-shadow:0 calc(-1*var(--px)) 0 #333,0 var(--px) 0 #333,
  calc(-1*var(--px)) 0 0 #333,var(--px) 0 0 #333,0 calc(3*var(--px)) 0 var(--line)}
.btn:active{transform:translateY(8px);box-shadow:0 calc(-1*var(--px)) 0 var(--ink),0 var(--px) 0 var(--ink),
  calc(-1*var(--px)) 0 0 var(--ink),var(--px) 0 0 var(--ink)}
.btn.ghost{color:var(--ink);background:var(--paper)}
.btn.ghost:hover{background:var(--soft)}
.btn:focus-visible,.card:focus-visible{outline:4px dashed var(--ink);outline-offset:10px}
.btn .tri{width:16px;height:20px}

.title{margin:0;font-weight:400;line-height:.9;letter-spacing:.02em;color:var(--ink);text-shadow:8px 8px 0 var(--line)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}