Small visual changes

index.html

@@ -1322,6 +1322,13 @@
                     minute: 'linear-gradient(to right, #39ff14, #7fff00, #39ff14)', // Bright glowing green
                     second: 'linear-gradient(to bottom, #00ff00, #39ff14, #00ff00)' // Glowing green
                 },
+                clockContainer: {
+                    background: 'rgba(0, 0, 0, 0.15)',
+                    backdropFilter: 'blur(20px)',
+                    borderRadius: '20px',
+                    border: '1px solid rgba(90, 0, 0, 0.5)',
+                    boxShadow: '0 8px 32px rgba(0, 255, 0, 0.3)'
+                },
                 handGlow: '0 0 10px #39ff14, 0 0 20px #00ff00, 0 0 30px #00ff00' // Green glow effect
             },
             movember: {
@@ -1358,6 +1365,13 @@
                     hour: 'linear-gradient(to right, #0f5e0f, #228b22, #0f5e0f)', // Green
                     minute: 'linear-gradient(to right, #8b0000, #dc143c, #8b0000)', // Red
                     second: 'linear-gradient(to bottom, #ffd700, #ffed4e, #ffd700)' // Gold
+                },
+                clockContainer: {
+                    background: 'rgba(0, 0, 0, 0.15)',
+                    backdropFilter: 'blur(20px)',
+                    borderRadius: '20px',
+                    border: '1px solid rgba(90, 0, 0, 0.5)',
+                    boxShadow: '0 8px 32px rgba(160, 0, 0, 0.3)'
                 }
             },
             saami: {
@@ -1508,7 +1522,7 @@
                 Object.keys(theme.cityNames).forEach(cityKey => {
                     const cityNameElement = document.querySelector(`#clock-${cityKey}`).closest('.clock-container').querySelector('.city-name');
                     if (cityNameElement) {
-                        cityNameElement.textContent = theme.cityNames[cityKey];
+                        cityNameElement.textContent = theme.cityNames[cityKey].toUpperCase();
                     }
                 });
             } else {