body {
     margin: 0;
     font-family: Arial, sans-serif;
     background: linear-gradient(135deg, #0f172a, #1e293b);
     color: white;
     text-align: center;
 }

 .container {
     padding: 40px 20px;
 }

 h1 {
     margin-bottom: 20px;
 }

 .home a {
     color: #38bdf8;
     text-decoration: none;
     font-weight: bold;
 }

 .card {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 20px 0;
     flex-wrap: wrap;
 }

 .city {
     background: rgba(255, 255, 255, 0.08);
     padding: 15px;
     border-radius: 12px;
     width: 200px;
     backdrop-filter: blur(6px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }

 .selector {
     margin-top: 20px;
 }

 select {
     padding: 10px;
     border-radius: 8px;
     border: none;
     outline: none;
 }

 #selectedCity {
     margin-top: 15px;
     font-size: 18px;
 }

 .local {
     margin-top: 20px;
     font-size: 14px;
     opacity: 0.8;
 }

 .footer {
     margin-top: 40px;
     font-size: 14px;
     opacity: 0.8;
 }

 .footer a {
     color: #38bdf8;
     text-decoration: none;
 }