.container{padding-top:40px}.local-time{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:15px;padding:20px;margin:0 auto 40px;max-width:500px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.1)}.local-time h2{margin-bottom:15px;font-weight:500}#local-time-display{font-size:2.5rem;font-weight:300;letter-spacing:2px}.cities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.city-card{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:15px;padding:20px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 8px 32px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.1)}.city-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,0.3);cursor:pointer}.city-name{font-size:1.5rem;margin-bottom:10px;font-weight:500}.country-name{font-size:1rem;opacity:.8;margin-bottom:15px;font-weight:300}.time-display{font-size:1.8rem;margin-bottom:15px;font-weight:300;letter-spacing:1px}.date-display{font-size:.9rem;opacity:.8;font-weight:300}footer{text-align:center;margin-top:50px;padding:20px;opacity:.7;font-size:.9rem}@media(max-width:768px){h1{font-size:2.2rem}#local-time-display{font-size:2rem}.cities-grid{grid-template-columns:1fr}}.day-night{width:20px;height:20px;border-radius:50%;display:inline-block;margin-left:10px;vertical-align:middle}.day{background:#ffce54;box-shadow:0 0 10px #ffce54}.night{background:#4a4a4a;box-shadow:0 0 10px #4a4a4a}