@media screen and (max-width: 670px){
    
    .container{
    border-radius: 40px;
    width: 300px;
    }
} 


@media screen and (max-width: 450px){
    
    .container{
    border-radius: 40px;
    width: 280px;
    min-height: 100px ;
    }

    .form{
        height: 20px;
        max-width: 400px;
    }

    #weather-data{
        margin-top: 6rem;
        padding: 2rem;
    }

    #weather-data h2 span{
        margin: .1rem 0;
        font-size: 1rem;
        font-weight: 600;
    }
} 


@media screen and (max-width: 350px){

    .container{
        width: 220px;
        height:560px ;
    }

    #weather-data{
        margin-top: 1rem;
        padding: 1rem;
        height: 250px;
    }

    #weather-data h2 i{
        font-size: 1rem;
    }

    #weather-data h2 span{
        margin: .1rem 0;
        font-size: 1rem;
        font-weight: 600;
    }

    #weather-data #temperature{
        font-size: 2rem;
        font-weight: 600;
    }

    .form{
        height: 100px;
        max-width: 220px;
    }

    #description-container{
        margin: .5rem;
    }

    #description-container p{
    font-size: 1rem;
    }

    #details-container{
        margin-top: 20px;
        gap: 50px;
        font-size: 1.5rem;
        font-weight: 600;
        text-shadow: 0px 0px 10px #000;
        color: #fff;
    }

    #details-container i{
        color: #7ff6ff;
    }
}