body{
    font-family:Arial,sans-serif;
    background-color:purple;
    margin: 0;
    padding:0;
    color:black;
}
header{
    background-color: rgb(134, 219, 238);
    color:rgb(165, 41, 9);
    padding: 1 rem;
    text-align:center;
}
h1{
    margin:0;
}
main{
    padding:2rem;
    max-width:800px;
    margin:auto;
}
#search{
    margin-bottom:2rem;
}
#weather-form{
    display:flex;
    gap:1 rem;

}
#city-input{
    flex:1;
    padding:0.5rem;
    border: 1px solid rgb(78, 36, 176);
    border-radius: 4px;
}
button{
    padding:0.5rem 1rem;
    border-color: rgb(22, 159, 201);
    background-color: rgb(236, 221, 5);
    color:rgb(6, 39, 6);
    border-radius: 4px;
    cursor: pointer;
}
button:hover{
    background-color: rgb(255, 118, 20);
}
#weather-display{
    background-color: rgb(65, 182, 188);
    padding: 1rem;
    border-radius:8px;
    box-shadow: 0 2px 5px black;
}
#weather-container{
    font-size: 1.2 rem;

}
p{
    margin:0.5 rem 0;

}
footer{
    background-color:rgb(55, 195, 226) ;
    color: rgb(4, 41, 43);
    text-align:center;
    padding:2 rem;
    position: absolute;
    bottom: 0;
    width:100%;
}