body {
  font-family: Arial, sans-serif;
  background-color: #11141c;
  color: #fff;
  text-align: center;
  padding: 20px;
}

h1 {
  color: #4db8ff;
}

.weather {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.card {
  background-color: #1c1f2b;
  padding: 15px;
  border-radius: 10px;
  width: 180px;
}

.chart {
  width: 400px;
}

.indicators {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.indicator {
  font-size: 1.6rem;
  padding: 12px;
  border-radius: 50%;
  background-color: #3a3f55;
  color: #aaa;
  transition: all 0.3s ease;
}

.indicator.green {
  background-color: #24c879;
  color: #fff;
}
.indicator.amber {
  background-color: #ffb84d;
  color: #fff;
}
.indicator.red {
  background-color: #ff4d4d;
  color: #fff;
}