body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f0f8ff;
  background: #deeefc;
  font-family: 'Roboto', sans-serif;
}

h1{
    font-family: 'Roboto', sans-serif;
}

#canvas {
  display: block;
}
#ui {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}
#score, #timer, #highscore {
  background: rgba(255, 255, 255, 0.8);
  padding: 6px 10px;
  border-radius: 10px;
  margin-bottom: 5px;
  font-size: 18px;
}
#startButton {
  padding: 8px 16px;
  border-radius: 8px;
  background: #4CAF50;
  color: white;
  border: none;
  font-size: 16px;
}


     /* Container für Wolken */
    .cloud {
      position: absolute;
      background-color: white;
      border-radius: 50%;
      opacity: 0.8;
      box-shadow: -30px 10px white, -60px 20px white, -90px 10px white, -60px -10px white;
      animation: floatClouds linear infinite;
      z-index: 0;
    }

    /* Wolken-Animation */
    @keyframes floatClouds {
      0% {
        transform: translateX(-150%); /* Wolke startet weit außerhalb des Bildschirms */
      }
      100% {
        transform: translateX(100vw); /* Wolke bewegt sich vollständig nach rechts */
      }
    }