body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
    background-image: url('clouds.png'); /* Add this line */
    background-size: cover; /* Add this line */

    /*background: linear-gradient(to right, #e0e0e0, #c0c0c0, #a0a0a0);*/

}

@keyframes cloud-animation {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Placeholder color shift animations */
@keyframes morning-colors {
  0%   { background-color: #f0f9ff; } /* Light blue */
  100% { background-color: #ccebff; } /* Slightly darker blue */

}

@keyframes afternoon-colors {
    0% {background-color: #fff5e6;}
    100% {background-color: #ffebcc;}
}

@keyframes evening-colors {
  0%   { background-color: #ffe6cc; } /* Light orange */
  100% { background-color: #e6b8af; } /* Dusky rose */
}

@keyframes night-colors {
    0% {background-color: #121212;}
    100% {background-color: #1f1f1f;}
}

.wind-slow {
  animation: cloud-animation 60s linear infinite;
}

.wind-medium {
  animation: cloud-animation 40s linear infinite;
}

.wind-fast {
  animation: cloud-animation 20s linear infinite;
}

.weather-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

#weather-info {
  display: flex;
  flex-direction: column; /* Stack rows vertically */
}

#weather-row, #maps-row {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    width: 100%;
    margin-bottom: 20px;
}

#weather-row > div {
    flex: 1; /* Each item takes equal space */
    max-width: 30%; /* Limit maximum width */
    margin: 0 10px;
}

.map-container {
    height: 180px;
    width: 100%;
}