*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:16px 8px 60px;
  background:#000 url("/assets/retro/bg-stars.gif") repeat;
  color:#e8e8ff;
  font-family:"Times New Roman",Times,serif;
  font-size:16px;line-height:1.5;
  text-align:center;
}
img{border:0;display:inline-block;vertical-align:middle;image-rendering:pixelated}
a{color:#00ffff}
a:visited{color:#ff8cf0}
a:hover{color:#ffff00}

.page{
  max-width:800px;margin:0 auto;
  background:rgba(0,0,32,.86);
  border:6px ridge #ff00ff;
  padding:16px 22px 26px;
}

.mq{
  display:block;background:#000;color:#00ff00;border:2px inset #00ff00;
  font-family:"Courier New",monospace;font-weight:bold;padding:4px 0;margin-bottom:16px;font-size:15px;
}

.banner{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 4px}
.flames{height:88px}
.titlewrap{display:flex;flex-direction:column;align-items:center}
.logo{width:64px;height:64px;filter:drop-shadow(2px 2px 0 #000)}
.title{
  margin:2px 0 0;font-family:"Comic Sans MS","Comic Sans",cursive;font-size:64px;font-weight:bold;line-height:1;
  background:linear-gradient(90deg,#ff0040,#ff8a00,#ffe600,#39ff14,#00e5ff,#c04bff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#39ff14;
  text-shadow:3px 3px 0 rgba(0,0,0,.6);letter-spacing:1px;
}
.sub{font-family:"Comic Sans MS",cursive;color:#ffff00;font-size:18px;text-shadow:1px 1px 0 #000}

.uc{margin:8px 0 12px;font-family:"Comic Sans MS",cursive;color:#ffcc00;font-weight:bold;font-size:13px}
.uc img{height:34px;margin:0 8px}

.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.nav{font-family:"Comic Sans MS",cursive;font-weight:bold;font-size:17px;color:#fff;margin:10px 0}
.nav img{height:26px;margin:0 6px}
.nav a{margin:0 4px}

.rule{display:block;width:100%;height:14px;margin:16px 0;object-fit:fill}

.blurb{max-width:640px;margin:6px auto;font-size:17px;color:#eaeaff}
.blurb .inline,.copy .inline{height:26px}

.section{
  font-family:"Comic Sans MS",cursive;font-size:30px;color:#ffff00;margin:6px 0 14px;
  text-shadow:2px 2px 0 #b000b0;
}
.section img{height:30px;margin:0 8px}

.loading{font-family:"Courier New",monospace;color:#39ff14}
.head-ico{height:30px;vertical-align:middle}

/* downloads directory (landing) */
.dirwrap{overflow-x:auto}
.dir{width:100%;border-collapse:collapse;border:4px ridge #00e5ff;background:#000a2a;text-align:left}
.dir-row td{border-bottom:1px solid #16324f;padding:12px 14px;vertical-align:middle}
.dir-row:last-child td{border-bottom:0}
.dir-row:hover{background:#001a4a}
.c-ico{width:60px}
.c-ico img{width:48px;height:48px;filter:drop-shadow(2px 2px 0 #000)}
.dir-name{font-family:"Comic Sans MS",cursive;font-size:22px;color:#39ff14;text-shadow:1px 1px 0 #000}
.dir-name:hover{color:#ffff00;text-decoration:underline}
.dir-sub{font-family:"Courier New",monospace;font-size:12px;color:#88ddee;margin:3px 0}
.dir-tag{font-style:italic;color:#ffff99;font-size:15px}
.c-dl{text-align:center;white-space:nowrap}
.c-dl .mini{display:inline-block;font-family:"Comic Sans MS",cursive;font-weight:bold;font-size:15px;color:#000;
  background:#ffe600;border:3px outset #ffef7a;padding:6px 15px;text-decoration:none;text-shadow:1px 1px 0 #fff;
  animation:pulse .7s steps(1,end) infinite}
.c-dl .mini:visited{color:#000}
.c-dl .mini:hover{background:#fff200;color:#000}
.c-dl .soon{font-family:"Comic Sans MS",cursive;font-weight:bold;color:#ff6ec7}
.c-dl .info{display:block;font-size:12px;margin-top:7px}
.dircount{font-family:"Comic Sans MS",cursive;color:#88ddee;margin:14px 0 0}

.back{display:inline-block;margin:2px 0 14px;font-family:"Comic Sans MS",cursive;font-size:15px;color:#00ffff}
.back:last-child{margin:16px 0 2px}
.soonbig{background:#333;color:#ff6ec7;border-color:#555;animation:none;cursor:default;text-shadow:none}

@media (max-width:560px){
  .dir-name{font-size:19px}
  .c-ico img{width:38px;height:38px}
}

/* download entries (injected) */
.entry{
  border:4px ridge #00e5ff;background:#000a2a;
  padding:16px;margin:0 0 20px;text-align:left;
}
.entry-top{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.entry-ico{width:56px;height:56px;filter:drop-shadow(2px 2px 0 #000)}
.entry-name{
  font-family:"Comic Sans MS",cursive;font-size:26px;color:#39ff14;margin:0;
  text-shadow:2px 2px 0 #000;
}
.entry-name .new{height:22px;margin-left:8px}
.stars{color:#ffd700;font-size:15px;letter-spacing:2px}
.stars small{color:#9aa;letter-spacing:0;font-family:"Times New Roman",serif}
.tag{font-size:18px;color:#ffff88;margin:2px 0 12px;font-style:italic}

.shots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0}
.shots img{max-width:100%;width:340px;border:3px ridge #ff00ff;background:#000}

.desc{margin:12px 0}
.feat{margin:8px 0 12px;padding-left:26px}
.feat li{margin:4px 0;list-style:"➤ "}
.feat li::marker{color:#39ff14}

.specs{border-collapse:collapse;margin:10px 0;font-family:"Courier New",monospace;font-size:14px;color:#cfe}
.specs td{border:1px solid #244;padding:3px 12px}
.specs td:first-child{color:#00e5ff}

.reqs{font-size:14px;color:#cde;margin:8px 0}
.clog{font-size:14px;color:#cde;margin:8px 0}
.clog b{color:#ffcc00}

.getit{text-align:center;margin:18px 0 4px}
.dlbig{
  display:inline-flex;align-items:center;gap:12px;
  font-family:"Comic Sans MS",cursive;font-weight:bold;font-size:24px;
  color:#000;background:#ffe600;border:4px outset #ffef7a;padding:10px 22px;
  text-shadow:1px 1px 0 #fff;animation:pulse .7s steps(1,end) infinite;
}
@keyframes pulse{50%{background:#ff8a00;border-color:#ffc76a}}
.dlbig:visited{color:#000}
.dlbig:hover{background:#fff200;color:#000}
.dlbig img{height:32px}
.note{font-family:"Courier New",monospace;font-size:12px;color:#ffb0b0;margin-top:10px}

/* footer */
.footer{text-align:center;margin-top:8px}
.counter{font-family:"Courier New",monospace;color:#39ff14;font-size:14px;margin:8px 0}
.odo{height:22px;border:1px solid #333;margin:0 4px;vertical-align:middle}
.guest{margin:12px 0;font-family:"Comic Sans MS",cursive;font-size:16px}
.guest img{height:26px}
.webring{margin:14px 0;font-size:15px;color:#cde;line-height:1.9}
.webring img{height:20px}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0}
.badges img{height:31px;border:1px solid #000}
.copy{font-family:"Courier New",monospace;font-size:12px;color:#9ab;margin-top:12px}

@media (prefers-reduced-motion:reduce){.blink,.dlbig{animation:none}}
@media (max-width:560px){
  .title{font-size:44px}
  .flames{height:64px}
  .banner{gap:6px}
  .dlbig{font-size:19px}
}