*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{align-items:center;background-color:#f2f2f2;color:#333;display:flex;font-family:Arial,sans-serif;font-size:16px;justify-content:center;min-height:100vh}.contenedor{background-color:#fff;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#333;max-width:600px;padding:20px;width:90%}.contenedor,.widget{text-align:center}.widget p{display:inline-block;line-height:1em}.fecha,.reloj,.utc{background-color:#296db2;color:#fff;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;padding:20px;text-align:center;transition:background-color .3s ease;width:100%}.fecha{border-radius:8px 8px 0 0;font-size:1.2em}.reloj{font-size:3em;padding:30px 20px}.reloj .separador{animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.utc{border-radius:0 0 8px 8px;font-size:.9em;padding:15px 20px;text-align:center}.utc p{display:block;margin:5px 0}.reloj .cajaSegundos{display:inline-block;vertical-align:top}.reloj .ampm,.reloj .segundos{display:block;font-size:.4em;line-height:1.2}.contenedor:focus,.fecha:focus,.reloj:focus,.utc:focus,.widget:focus{outline:2px solid #296db2;outline-offset:2px}@media (max-width:480px){.contenedor{padding:10px;width:95%}.fecha{font-size:1em;padding:15px}.reloj{font-size:2em;padding:20px 15px}.utc{font-size:.8em;padding:10px 15px}}