/* JSoftGames.com Time Machine - late-90s homepage style (tiled wallpaper, blob buttons, cream page) */
@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(fonts/vt323.woff2) format("woff2");font-display:swap}
:root{
  --lime:#9ed738;--lime-dk:#5f8f12;--ink:#1f1a14;--ink2:#4a4238;--cream:#fffbea;--side:#fbe7a1;--side-dk:#f1cf64;
  --purple:#6b2fa3;--link:#0000ee;--vlink:#551a8b;--line:#d8c98f;
  --b1:#e2548f;--b2:#7b61ff;--b3:#2fa39b;--b4:#f29a2e;--b5:#4c9be8;--b6:#9ed738;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:#150c20 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Ctext x='0' y='70' transform='rotate(-18 130 60)' font-family='Arial Black,Arial,sans-serif' font-size='30' font-weight='900' fill='none' stroke='%239ed738' stroke-opacity='.16' stroke-width='1.2'%3EJSOFTGAMES%3C/text%3E%3C/svg%3E") repeat;}
html:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,12,32,.2),rgba(60,14,70,.55))}
body{margin:0;padding:18px 12px 40px;color:var(--ink);font:14px/1.5 Verdana,Tahoma,Geneva,sans-serif}
a{color:var(--link)}a:visited{color:var(--vlink)}
a:focus-visible,button:focus-visible{outline:3px dashed var(--purple);outline-offset:3px}

.page{max-width:900px;margin:0 auto;display:grid;grid-template-columns:230px minmax(0,1fr);background:var(--cream);
  border:3px ridge #cfc07a;box-shadow:0 0 0 1px #000,0 12px 40px rgba(0,0,0,.6)}

/* sidebar */
.side{background:var(--side) linear-gradient(90deg,rgba(255,255,255,.35),transparent 40%);border-right:3px ridge #d9bd55;padding:14px 12px 18px;text-align:center}
.logo{display:block;text-decoration:none;margin:0 0 6px}
.logo svg{display:block;width:100%;height:auto}
.blobs{display:flex;flex-direction:column;gap:12px;margin:14px 0 18px;list-style:none;padding:0}
.blob{display:block;font:32px/1 "Anton",Impact,"Arial Narrow Bold",sans-serif;letter-spacing:1px;color:#fff !important;text-decoration:none;
  padding:12px 8px 11px;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  border:3px solid #000;box-shadow:5px 5px 0 rgba(0,0,0,.35);transition:transform .15s}
.blob:hover{transform:rotate(0) scale(1.05)}
.blob small{display:block;font:15px/1.1 "VT323",monospace;letter-spacing:1px;text-shadow:1px 1px 0 #000;margin-top:3px}
.b1{background:var(--b1);border-radius:42% 18% 38% 22% / 30% 40% 22% 44%;transform:rotate(-3deg)}
.b2{background:var(--b2);border-radius:20% 46% 24% 40% / 44% 26% 40% 30%;transform:rotate(2deg)}
.b3{background:var(--b3);border-radius:36% 22% 44% 20% / 24% 44% 28% 40%;transform:rotate(-2deg)}
.b4{background:var(--b4);border-radius:24% 40% 20% 46% / 40% 24% 44% 26%;transform:rotate(3deg)}
.b5{background:var(--b5);border-radius:40% 24% 36% 26% / 28% 42% 26% 42%;transform:rotate(-2deg)}
.b6{background:var(--b6);border-radius:26% 42% 26% 38% / 42% 28% 40% 30%;transform:rotate(2deg)}
.b0{background:#8c8c8c;border-style:dashed;border-radius:30% 30% 30% 30% / 40% 40% 40% 40%;transform:rotate(-1deg)}

.box{background:#fff8d6;border:2px inset #e9d68c;margin:0 0 14px;padding:8px;font-size:12px}
.box h3{margin:0 0 6px;font:18px/1 "VT323",monospace;letter-spacing:1px;color:var(--purple)}
.odo{display:inline-flex;gap:2px;margin:4px 0 2px}
.odo b{display:inline-block;width:17px;padding:2px 0;background:#000;color:var(--lime);font:22px/1 "VT323",monospace;border:1px solid #444}
.ring{font-size:12px}
.ring a{font-weight:bold}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.b88{width:88px;height:31px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px outset #ddd;
  font:bold 9px/1.05 Verdana,sans-serif;text-transform:uppercase;text-decoration:none;color:#fff !important;text-shadow:1px 1px 0 #000}
.b88 i{font:13px/1 "VT323",monospace;font-style:normal;letter-spacing:.5px}
.b88.a{background:linear-gradient(#3a3a3a,#000)}.b88.b{background:linear-gradient(#2f5da8,#12306b)}.b88.c{background:linear-gradient(#7fbf2a,#3e6f0c)}.b88.d{background:linear-gradient(#b04ad6,#5b1780)}

/* main column */
.main{padding:14px 22px 22px;min-width:0}
.banner{margin:0 0 4px;text-align:center}
.banner svg{display:block;width:100%;height:auto;max-width:620px;margin:0 auto}
.tag1999{font:22px/1.1 "VT323",monospace;color:var(--ink2);text-align:center;margin:0 0 10px}
.marquee{overflow:hidden;white-space:nowrap;border:2px inset #e3d48d;background:#000;color:var(--lime);font:20px/1.4 "VT323",monospace;padding:2px 0;margin:0 0 16px}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 22s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee span{animation:none;padding-left:10px}.blob{transition:none}}
.lead{margin:0 0 18px}
.sc{font-variant:small-caps;color:var(--purple);font-weight:bold}
h2.era{margin:26px 0 12px;font:bold 22px/1.2 Verdana,sans-serif;font-variant:small-caps;letter-spacing:.5px;color:var(--purple);text-align:center;
  border-top:3px double var(--line);border-bottom:3px double var(--line);padding:6px 0}
h2.era img,h2.era .star{vertical-align:-2px}

.stop{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;margin:0 0 22px;padding:0 0 18px;border-bottom:2px dotted var(--line);scroll-margin-top:16px}
.stop:last-child{border-bottom:0}
.frame{display:block;border:4px outset #e8e0c0;background:#000;line-height:0;align-self:start}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top}
.frame:hover{border-style:inset}
.info h3{margin:0 0 4px;font:bold 20px/1.25 Verdana,sans-serif;font-variant:small-caps;color:var(--purple)}
.info .when{font:20px/1 "VT323",monospace;color:var(--ink2)}
.info .tag{display:inline-block;margin-left:6px;padding:1px 6px;font:bold 10px/1.4 Verdana,sans-serif;text-transform:uppercase;color:#fff;background:#d6247a;border:1px solid #000;transform:rotate(-2deg)}
.info .tag.new{background:#e6b800;color:#000}
.info p{margin:8px 0}
.news{margin:6px 0 10px;padding:0 0 0 2px;list-style:none;font-size:12px}
.news li{padding-left:18px;position:relative}
.news li:before{content:"\2605";position:absolute;left:0;color:#e6a100}
.enter{display:inline-block;padding:5px 14px;background:#c0c0c0;color:#000 !important;text-decoration:none;font:bold 12px Verdana,sans-serif;border:2px outset #eee;box-shadow:1px 1px 0 #000}
.enter:active{border-style:inset}
.pages{font:15px "VT323",monospace;color:var(--ink2);margin-left:8px}

/* the missing 2005 site: a period-correct error page */
.gone{border:4px outset #e8e0c0;background:#fff;color:#000;padding:10px 12px;font:11px/1.35 Tahoma,Verdana,sans-serif;min-height:172px;align-self:start}
.gone b{display:block;font:bold 15px/1.2 Tahoma,Verdana,sans-serif;margin:2px 0 8px}
.gone hr{border:0;border-top:1px solid #999;margin:6px 0}
.gone ul{margin:4px 0 0 16px;padding:0}
.gone .ie{display:flex;gap:8px;align-items:flex-start}
.gone .ie span{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #d20000;color:#d20000;font:bold 18px/22px Arial,sans-serif;text-align:center}

.foot{margin-top:24px;padding-top:12px;border-top:3px double var(--line);font-size:11px;color:var(--ink2);text-align:center}
.foot p{margin:0 0 6px}

@media (max-width:760px){
  body{padding:10px 8px 30px}
  .page{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:3px ridge #d9bd55}
  .blobs{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .blob{font-size:22px;padding:9px 12px;min-width:84px}
  .box.opt{display:none}
  .main{padding:12px 14px 18px}
  .stop{grid-template-columns:1fr;gap:10px}
  .frame,.gone{max-width:420px}
}