.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 20px;
}

body {
  background-color: #1e1e1e; /* Dark background */
  color: #ffffff; /* Light text */
  font-family: 'Arial', sans-serif;
}

h1, h2, h3 {
  color: #c9d1d9; /* Light headings */
}

.button {
  background-color: #238636; /* Button background */
  color: #ffffff; /* Button text */
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2ea44f; /* Button hover */
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; // Single column layout on small screens
  }
}