@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@200;300;400;500;600;700&display=swap');
  
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}
 
body{background:linear-gradient(135deg,#515050,#c3c3c3); min-height: 100vh;}
 
.flex{display: flex;}
.card{width: 90%; max-width: 470px; background: linear-gradient(135deg,#00feba, #5b548a); color: #fff; margin: 10px auto 0; border-radius: 20px; padding: 40px 35px; text-align: center;}
 
/* for without form */
/* .search{width: 100%; display: flex; align-items: center; justify-content: center;} */  

.search{width: 100%;}

.search input{outline: 0; border: 0; background: #ebfffc; color: #555; padding: 10px 25px; height: 60px; border-radius: 30px; flex:1; margin-right: 16px; font-size: 18px;}

.search button{border: 0; outline: 0; background: #ebfffc;   border-radius: 50%; width: 60px; height: 60px; cursor: pointer;}

.search button img{width: 20px;}

.err{text-align: left; color: brown; display: none;}
.err p{margin: 10px 10px 0; }
.weather-detail{position: relative;}
.buffering{ display: none; position: absolute;top: 0; transform: translateX(-50%);left: 50%;}
.buffering img{ margin-top: 5px; width: 50px; border-radius: 50%;}

.weather-icon{width: 170px; margin-top: 25px;}

.weather-detail h1{font-size: 80px; font-weight: 500;}
.weather-detail h2{font-size: 45px; font-weight: 400; margin-top: -10px;}

.loc{display: flex; ; align-items: center; padding: 0 19px; margin-top: 30px; text-align: left; font-size: 20px;}
.loc img{width: 55px; margin-right: 10px;}

.details{display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding: 0 20px;}

.col{display: flex; align-items: center; text-align: left ;}

.col img{width: 40px; margin-right: 10px;}

.humidity, .wind{font-size: 28px; margin-top: -6px;}

@media (max-width:426px){
    
    .search input {padding: 10px 12px; height: 50px; margin-right: 8px; width: 80%;}
    .search button { width: 50px; height: 50px;}
    .card {padding:15px;}
    .weather-detail h1 { font-size: 60px;}
    .weather-detail h2 { font-size: 40px;}
    .loc {padding: 0;}
    .details {padding: 0;}
} 


@media (max-width:391px){
}
@media (max-width:376px){
    .search button{width: 50px; height: 50px;}
    .humidity, .wind { font-size: 20px;}
    .loc{font-size: 18px;}
}


@media (max-width:321px){
    .card { padding: 10px; }
    .search input { height: 45px; margin-right: 6px; font-size: 16px;}
    .search button { width: 45px; height: 45px;}
    .weather-icon { width: 150px;}
    .latlon{font-size: 15px;}
    .details p{ font-size: 16px;}
    .details { flex-direction: column; align-items: unset; margin-top: 0;}
    .col img { margin-right: 20px; margin-left: 5px;}
    .col{  margin-top: 15px;}

}