*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background-color:#f0f2f5;padding-top:70px}

.header{position:fixed;top:0;left:0;right:0;height:70px;background:#dff3fd;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;align-items:center;padding:0 20px;z-index:1000}
.logo{height:50px;display:flex;align-items:center}
.logo img{height:40px}.menu-toggle{display:none;font-size:24px;background:0 0;border:none;cursor:pointer;padding:10px;margin-right:10px}.nav{margin-left:40px}

.nav a{color:#333;text-decoration:none;padding:10px 20px;display:inline-block}
.nav a:hover{color:#054085}
.content{padding:10px}

.city-links-container{background:#fff;border-radius: 12px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding:20px;margin-bottom:20px;}
.city-links-title{font-size: 1.5em;margin-bottom: 15px;color: #4d638e;}
.city-links{display:flex;flex-wrap:wrap;gap:10px;}
.city-links a {background:#ddd;color:#444;text-decoration:none;padding:10px 15px;border-radius:6px;font-size: 1em;display:inline-block;}

@media (max-width:768px){
.menu-toggle,.nav a{display:block}
.nav{position:fixed;top:70px;left:-250px;width:250px;height:calc(100vh - 70px);background:#f2f8fb;margin:0;padding:20px 0;transition:left .3s;box-shadow:2px 0 4px rgba(0,0,0,.1)}
.nav.active{left:0}.nav a{padding:15px 20px;border-bottom:1px solid #eee}
.city-links{flex-direction:column;}
.city-link{width:100%;text-align:center;}
}

.temp-15{border-bottom:2px solid #C9C}
.temp-10{border-bottom:2px solid #96F}
.temp-5{border-bottom:2px solid #39F}
.temp0{border-bottom:2px solid #9CF}
.temp5{border-bottom:2px solid #6C6}
.temp10{border-bottom:2px solid #FE8}
.temp15{border-bottom:2px solid #FC3}
.temp20{border-bottom:2px solid #F93}
.temp25{border-bottom:2px solid #F60}
.temp30{border-bottom:2px solid #F00}
.temp35{border-bottom:2px solid #900}
 
.current-conditions,.scroll-container{background:#fff;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.forecast-container{margin-bottom:20px}
.forecast-title{margin:45px 0 14px 8px;font-size:1.5em;color:#4d638e}
.scroll-container{width:100%;height:400px;overflow-x:auto;overflow-y: hidden;-ms-overflow-style:none;scrollbar-width:none}
.scroll-container::-webkit-scrollbar{display:none}

.forecast-items{height:100%;display:flex;padding:20px}.forecast-item{min-width:160px;height:100%;padding:15px;border-right:1px solid #eee;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.forecast-item:last-child{border-right:none}
 .current-conditions{padding:20px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.current-main{display:flex;align-items:center;gap:20px}
.current-temp{font-size:3em;font-weight:700;color:#013f77}
.current-details{color:#666;font-size:1.1em;min-width:120px;}
 
@media (max-width:480px){
.current-conditions{flex-direction:column;gap:20px;}
.current-main{gap:10px;}
}
.time{font-size:1.1em;color:#333;font-weight:700}
.weather-icon{width:96px;height:96px;margin:10px 0}
.temperature{font-size:1.8em;color:#013f77;font-weight:700}
.details{font-size:.9em;color:#666;text-align:center}
.night-item{background-color:#f8f9fa}

.share-buttons{
display:flex;flex-wrap:wrap;
gap:8px;
margin:10px;
align-items:center;
}
.share-button{
padding:6px 12px;
border:none;
border-radius:5px;
color:white;
font-family:Arial, sans-serif;font-size: 14px; 
display:flex;
align-items:center;
gap:5px;
text-decoration:none;white-space:nowrap;
}
.share-label{margin-right:8px;color:#333;font-family:Arial, sans-serif;font-size:14px;}
.facebook{background-color:#1877F2}
.whatsapp{background-color:#25D366}