.clock-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; font-family: 'Courier New', monospace; }
.clock-container h1 { color: white; font-size: 3rem; margin-bottom: 50px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); font-weight: 700; letter-spacing: 2px; }
.clocks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; width: 100%; max-width: 1200px; }
.clock-card { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); text-align: center; transition: all 0.3s ease; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.clock-card:hover { transform: translateY(-10px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 1); }
.clock-location { font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.clock-time { font-size: 3rem; font-weight: bold; color: #667eea; margin: 20px 0; font-family: 'Courier New', monospace; letter-spacing: 3px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.clock-timezone { font-size: 0.85rem; color: #666; margin-top: 15px; font-style: italic; opacity: 0.7; }
/* Responsive Design */ @media (max-width: 768px) { .clock-container h1 { font-size: 2rem; margin-bottom: 30px; }
.clocks-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.clock-card { padding: 20px; }
.clock-time { font-size: 2rem; letter-spacing: 2px; }
.clock-location { font-size: 1.2rem; } }
@media (max-width: 480px) { .clock-container { padding: 20px 10px; }
.clock-container h1 { font-size: 1.5rem; margin-bottom: 20px; }
.clocks-grid { grid-template-columns: 1fr; gap: 15px; }
.clock-time { font-size: 1.8rem; } }