:root{
  --bg:#0f1421;
  --panel:#101820e6;
  --text:#e7f2ff;
  --accent:#ff71ce;
  --accent2:#01cdfe;
  --accent3:#b967ff;
  --shadow:#000000bb;
}
*{box-sizing:border-box}
html,body{height:100%}
@keyframes bgscroll {
  0% { background-position: 0 0; }
  100% { background-position: 150px 150px; }
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Press Start 2P","VT323","Trebuchet MS",Arial,sans-serif;
  background-color: #0f1421;
  background-image: url("./assets/background.gif");
  background-repeat: repeat;
  background-size: auto;
  image-rendering: pixelated;
  animation: bgscroll 10s linear infinite;
}

.container{max-width:980px;margin:0 auto;padding:28px}
.header{ text-align:center; padding:42px 0 8px 0; }
.title{
  font-size: clamp(22px, 4vw, 42px);
  letter-spacing:1px;
  line-height:1.2;
  text-transform:uppercase;
  text-shadow: 0 0 10px var(--accent3), 0 0 18px var(--accent2);
}
.banner{
  margin:22px auto;
  border:3px groove var(--accent);
  background: linear-gradient(180deg, #1a0f20dd, #0c0f1bdd);
  padding:18px 16px;
  text-align:center;
  box-shadow: 6px 6px 0 var(--shadow);
}
.banner h2{ margin:0; font-size: clamp(16px, 2.8vw, 24px); color: var(--accent2); }
.panel{
  background: var(--panel);
  border: 2px ridge #6b6b6b;
  margin: 26px 0;
  padding: 18px;
  text-align:center;
}
.gif-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin:26px 0;
}
.gif-row img{ height:96px; image-rendering: pixelated }
.footer-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px 0 10px }
.footer-strip img{ height:42px; image-rendering: pixelated }
.footer{ text-align:center; opacity:.95; margin:16px 0 4px }
.footer .badges img{ height:31px; margin:2px; image-rendering: pixelated }
.footer-banner{ text-align:center; margin:10px 0 6px }
.footer-banner img{ height:60px; image-rendering: pixelated }
hr{border:0;border-top:2px dashed #3b3b3b;margin:24px 0}