/* styles.css */ /* CRITICAL FIX: Use a CSS Variable for dynamic scaling */ transform: translate(-50%, -50%) scale(var(--scale-factor)); /* Ensure placement and visibility */ position: fixed; top: 50%; left: 50%; z-index: 9999; /* Increase the base font size to make the digits bigger relative to the container */ font-size: 10vw; /* Keep the font size huge and responsive */ transition: all 0.3s ease-in-out; background-color: #000033; color: #FFFFFF; } .clock-zoom { box-shadow: 0 0 70px rgba(97, 218, 251, 1); transform: translate(-50%, -50%) scale(var(--scale-factor)); position: fixed; top: 50%; left: 50%; z-index: 9999; font-size: 10vw; transition: all 0.3s ease-in-out; background-color: #000033 !important; color: #FFFFFF !important; } /* footer Base Styling --- */ .footer-style { position: relative; margin-top: 4rem; width: 100%; max-width: 1000px; padding: 1rem; background-color: #1f2937; text-align: center; font-size: 0.875rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); } .footer-text-primary { color: #2dd4bf; font-family: monospace; } .footer-text-secondary { color: #9ca3af; margin-top: 0.25rem; } .divider { width: 25%; margin: 3rem 0; border-top: 2px solid #374151; }