body {
  margin: 0;
  padding: 0 0 40px;
  color: #ffff00;
  font: 16px/1.5 "Comic Sans MS", "Comic Sans", cursive;
  background-color: #000033;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 70px, #fff, transparent),
    radial-gradient(2px 2px at 150px 20px, #ff0, transparent),
    radial-gradient(1px 1px at 60px 140px, #0ff, transparent),
    radial-gradient(1px 1px at 170px 160px, #fff, transparent);
  background-size: 200px 200px;
  cursor: crosshair;
}
marquee { background: #000080; color: #00ff00; font-weight: bold; padding: 4px 0; border-bottom: 3px ridge #c0c0c0; }
a { color: #00ffff; }
a:visited { color: #ff00ff; }
a:hover { color: #ff0000; background: #ffff00; }

.frame { width: 100%; max-width: 820px; margin: 20px auto; border: 6px ridge #c0c0c0; background: rgba(0, 0, 0, .7); border-collapse: separate; }
.side { width: 170px; vertical-align: top; background: #000080; border: 3px inset #c0c0c0; }
.side a { display: block; margin: 6px 0; font-weight: bold; }
.menu-title { color: #ff00ff; font-weight: bold; text-align: center; margin-top: 0; }
.main { vertical-align: top; }

h1 { font: bold 2.6rem "Times New Roman", serif; text-align: center; margin: 10px 0; }
.rainbow {
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbow 3s linear infinite;
}
@keyframes rainbow { to { background-position: 200% center; } }

.blink { text-align: center; color: #ff0000; font-weight: bold; font-size: 1.3rem; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.construction {
  text-align: center; font-weight: bold; color: #000; padding: 8px; margin: 16px 0;
  background: repeating-linear-gradient(45deg, #ffcc00 0 20px, #000 20px 40px);
  text-shadow: 0 0 4px #ffcc00, 0 0 4px #ffcc00;
}
.construction span { text-shadow: none; }

hr { border: 0; height: 4px; background: linear-gradient(90deg, #f0f, #0ff, #ff0); }
h2 { color: #ff00ff; font-size: 1.3rem; margin: 20px 0 6px; }
.games li { margin: 6px 0; font-size: 1.1rem; }
.center { text-align: center; }
.small { font-size: .8rem; }
.emoji { font-size: 2rem; letter-spacing: 8px; }
.counter { font: bold 1.8rem "Courier New", monospace; background: #000; color: #00ff00; border: 3px inset #808080; padding: 2px 10px; letter-spacing: 4px; }
.badge { display: inline-block; margin: 4px 2px; padding: 1px 6px; background: #c0c0c0; color: #000; border: 2px outset #fff; font: bold 11px Verdana, sans-serif; }

@media (max-width: 600px) {
  .frame, .frame tbody, .frame tr, .frame td { display: block; width: auto; }
  .frame { margin: 12px 16px; }
  h1 { font-size: 1.9rem; }
}