.weatherBGCloudy {
  background: linear-gradient(to top right, #b6c6c9, #8fa3ad);
}

.weatherBGSunny {
  background: linear-gradient(to bottom left, #ffffd0, #007cf0);
}

.weatherBGRainy {
  background: linear-gradient(to top, #647d8e, #a8c0c0);
}

.weatherBGSnowy {
  background: linear-gradient(to bottom, #ffffff, #acc2d9);
}

.weatherBGWindy {
  background: linear-gradient(to right, #c4e0e5, #4ca1af);
}

.weatherWidget {
  width: 100%;
  height: 100%;
  padding: 4px;
  padding: 20px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  align-items: center;
  justify-content: center;
  display: flex;
}

.weatherWidgetData {
  display: flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.weatherEmptyState {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(
    --emptyStateBackground,
    linear-gradient(to top right, #b6c6c9, #8fa3ad)
  );
}

.weatherWidgetData h2 {
  font-size: 8em;
  font-weight: 500;
}