body {
    margin: 0;
   
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    transition: background 0.5s ease;
    text-align: center;
    font-family: 'Manrope', 'Poppins', sans-serif;;
}.airQuality{
   border: 1px solid black;
   border-radius: 12px;
   padding: 20px;
  
}.wind,
.astrodiv{
    border: 1px solid black;
    border-radius: 12px;
    padding: 10px;
}
  
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
.weather_dispay{
   display:flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 20px;
  
    
}#submit_btn{
    margin-left:5px;
    margin-right:10px;
    height:32px;
    border-radius: 12px;
    width: 80px;
    border: 1px solid black;
    background-color: black;
    color:white;
  
}
#currentLocation{
    margin-left:5px;
    margin-right:10px;
    height:32px;
    border-radius: 12px;
    width: 200px;
    border: 1px solid black;
    background-color: black;
    color:white;
}
#input_box{
    text-align: center;
    width: 220px;
    height:30px;
    border-radius: 12px;
    border: 1px solid black;
}

#submit_btn:hover,
#currentLocation:hover{
    background-color:darkgray;   /* Blue background on hover */
    color: black;                /* White text */
    transform: scale(1.05);      /* Slight zoom */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
    transition: all 0.3s ease;
    cursor: pointer;

   
}#input_box:focus {
    outline: none; /* Removes the default blue outline */
    border: 2px solid darkgrey; /* Blue border */
    box-shadow: 0 0 8px rgba(43, 45, 48, 0.5); /* Glowing effect */
    background-color: #f8f9fb; /* Light background for focus */
    transition: all 0.3s ease;
  }