:root {
  --background-color: #f4f4f4;
  --text-color: #333;
  --header-color: #0056b3;
  --button-bg-color: #007bff;
  --button-text-color: white;
  --button-hover-bg-color: #0056b3;
  --div-bg-color: #e9ecef;
  --border-color: #ccc;
}

body.dark-mode {
  --background-color: #333;
  --text-color: #f4f4f4;
  --header-color: #90caff;
  --button-bg-color: #0056b3;
  --button-text-color: white;
  --button-hover-bg-color: #007bff;
  --div-bg-color: #555;
  --border-color: #777;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: var(--background-color);
  color: var(--text-color);
}

h1, h2 {
  color: var(--header-color);
}

button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  margin-top: 10px;
}

button:hover {
  background-color: var(--button-hover-bg-color);
}

#lottoNumbers {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--div-bg-color);
}