body{
    background: linear-gradient(to bottom, #FF6F61, #FFDAB9, #87CEEB); /* Soft Coral to Light Peach to Sky Blue */
    display:flex;
    align-items: center;
    justify-content: center;
    height:100vh;
    margin:0;
}
#weather-container{
    background-color: rgba(255,255,255,0.3);
    max-width:400px;
    padding: 20px;
    border-radius:15px;
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    text-align:center;
}
h2,label,p{
   color:#fff;
   margin: 8px 0;
}
input {
    width: 100%; /* Stretch input field to full width */
    padding: 8px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 20px;
}

button {
    background-color: #debff4;
    color: gray;
    padding: 10px;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 30px; /* Increased margin to move the button down */
    width: 100px; /* Keep the button width fixed */
    font-size: 15px;
}
button:hover{
    background:#8b48d7;
}
#temp-div p{
    font-size:60px;
    margin-top:-30px;
}
#weather-info{
    font: size 20px;
}
#weather-icon{
    width:200px;
    height:200px;
    margin:0 auto 10px;
    margin-bottom:0;
    display:none;
    
}

#hourly-forecast{
    margin-top:50px;
    overflow-x:auto;
    white-space:nowrap;
    display:flex;
    justify-content:space-between
}
.hourly-item{
    flex:0 0 auto;
    width:80px;
    display:flex;
    flex-direction: column;
    align-items:center;
    margin-right:10px;
    color:white;
}
.hourly-item img{
    width:30px;
    height:30px;
    margin-bottom:5px;

}
#hourly-heading{
    color:#fff;
    margin-top:10px;
}