#weatherContainer{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    margin-top: 105px;
}
input{
    width: 100%;
    max-width: 350px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.weather-info{
    margin-top: 20px;
}

@media (max-width: 800px) {
    #main{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #weatherContainer{
        max-width: 80%;
    }
    input{
        max-width: 75%;
    }
}