body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96e6a1);
  font-family: Arial, sans-serif;
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://yt3.googleusercontent.com/6LVJ7K9SPGKsTbCH9m7p34YAt5D0JzkjrFVm9hJsvLard5U9VFnfo7rvn_SB80g7myQAWWcL2A=s160-c-k-c0x00ffffff-no-rj');
  background-size: 50px 50px;
  background-repeat: repeat;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

.container {
  position: relative;
  z-index: 1;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.rainbow-text {
  animation: rainbow 5s infinite;
  font-size: 2.5em;
}

@keyframes rainbow {
  0% { color: red; }
  25% { color: yellow; }
  50% { color: blue; }
  75% { color: green; }
  100% { color: red; }
}

.bouncing-ball {
  width: 50px;
  height: 50px;
  background: #ff3366;
  border-radius: 50%;
  margin: 20px auto;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-100px); }
}

.fun-box {
  background: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  transition: all 0.3s;
  cursor: pointer;
}

.fun-box:hover {
  transform: scale(1.1) rotate(5deg);
  background: rgba(255, 255, 255, 0.4);
}

#jokeBtn {
  padding: 10px 20px;
  font-size: 1.2em;
  background: #ff3366;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

#jokeBtn:hover {
  transform: scale(1.1);
}

#jokeText {
  font-size: 1.2em;
  margin-top: 20px;
  color: #333;
}

.request-container {
  margin-top: 30px;
}

#requestInput {
  width: 80%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  resize: none;
}

#sendRequestBtn {
  padding: 10px 20px;
  font-size: 1.2em;
  background: #4ecdc4;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

#sendRequestBtn:hover {
  transform: scale(1.1);
}

#requestStatus {
  margin-top: 10px;
  font-size: 1.1em;
  color: #333;
}

.game-container {
  margin: 20px auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .game-container {
    padding: 5px;
    margin: 10px auto;
  }
  
  .game-container h2 {
    font-size: 1.2em;
  }
  
  .controls {
    font-size: 0.9em;
  }
  
  #gameCanvas {
    width: 100%;
    height: auto;
  }
}

.game-container h2 {
  color: #fff;
  margin-bottom: 10px;
}

.controls {
  color: #fff;
  margin-bottom: 20px;
}

#gameCanvas {
  border: 2px solid #fff;
  background: #111;
  max-width: 100%;
}

<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 400;
  canvas.height = 200;

  let trainX = canvas.width / 2;
  let trainY = canvas.height - 20;
  const trainWidth = 20;
  const trainHeight = 20;
  let trainSpeed = 5;

  const laneWidth = canvas.width / 2;

  let zombies = [];
  const numZombies = 5;

  function createZombie() {
    const x = Math.random() < 0.5 ? 0 : laneWidth;
    const y = -20;
    const width = 20;
    const height = 20;
    const speed = 3;
    return { x, y, width, height, speed };
  }

  for (let i = 0; i < numZombies; i++) {
    zombies.push(createZombie());
  }


  function drawTrain() {
    ctx.fillStyle = 'red';
    ctx.fillRect(trainX, trainY, trainWidth, trainHeight);
  }

  function drawZombie(zombie) {
    ctx.fillStyle = 'green';
    ctx.fillRect(zombie.x, zombie.y, zombie.width, zombie.height);
  }

  function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    trainX += trainSpeed;
    if (trainX > laneWidth) {
      trainX = laneWidth
    }
    if (trainX < 0) {
      trainX = 0
    }

    zombies.forEach((zombie, index) => {
      zombie.y += zombie.speed;
      if (zombie.y > canvas.height) {
          zombies[index] = createZombie();
      }

      drawZombie(zombie);

      if (
        trainX < zombie.x + zombie.width &&
        trainX + trainWidth > zombie.x &&
        trainY < zombie.y + zombie.height &&
        trainHeight + trainY > zombie.y
      ) {
        alert('Game Over!');
        location.reload()
      }
    });


    drawTrain();
    requestAnimationFrame(update);
  }

  document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
      trainSpeed *= -1;
    }
  });

  update();
</script>

<div class="game-container">
  <h2>Dead Rails Train Dodging</h2>
  <div class="controls">Use Spacebar to switch lanes</div>
  <canvas id="gameCanvas"></canvas>
</div>