*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#1e3c72,#2a5298);

}

.weather-container{

display:flex;

justify-content:center;

align-items:center;

}

.weather-card{

width:350px;

background:rgba(20,30,60,0.9);

padding:30px;

border-radius:20px;

color:white;

box-shadow:0 20px 40px rgba(0,0,0,0.3);

text-align:center;

}

.top{

text-align:left;

margin-bottom:20px;

font-size:18px;

opacity:0.9;

}

.main-weather img{

width:80px;

margin-bottom:10px;

}

.main-weather h1{

font-size:50px;

margin-bottom:5px;

}

.main-weather p{

opacity:0.8;

}

.weather-info{

display:flex;

justify-content:space-between;

margin:25px 0;

background:rgba(255,255,255,0.08);

padding:15px;

border-radius:15px;

}

.info-box{

text-align:center;

}

.info-box p{

font-size:13px;

opacity:0.7;

}

.search-box{

display:flex;

gap:10px;

margin-top:15px;

}

.search-box input{

flex:1;

padding:10px;

border-radius:10px;

border:none;

outline:none;

}

.search-box button{

padding:10px 15px;

border:none;

background:#4facfe;

color:white;

border-radius:10px;

cursor:pointer;

font-weight:bold;

}

.search-box button:hover{

background:#2c8ef4;

}