body {
            background: #1a1a2e;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Orbitron', sans-serif;
            text-align: center;
            flex-direction: column;
        }

        .clock-container {
            background: #2b2b45;
            padding: 3rem 4rem;
            border-radius: 1.5rem;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
            border: 2px solid #5a5a70;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .time {
            font-size: 5rem;
            font-weight: 700;
            letter-spacing: 0.5rem;
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
            color: #64ffda; /* Aqua-teal color for numbers */
        }
        
        .date-display {
            font-size: 1.25rem;
            color: #ccc;
            letter-spacing: 0.2rem;
            text-transform: uppercase;
        }

        /* Responsive design for smaller screens */
        @media (max-width: 600px) {
            .clock-container {
                padding: 2rem 2.5rem;
            }
            .time {
                font-size: 3rem;
                letter-spacing: 0.3rem;
            }
            .date-display {
                font-size: 1rem;
            }
        }