<div class="cont-reloj">

<div id="reloj"></div>
<div class="datos">
<span id="fec_Datos"></span>
</div>
</div>

body{
margin: 0;
padding: 0;
background: #e5e5e5;
}
.cont-reloj{
margin: 170px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 200px;
width: 500px;
border: 6px solid skyblue;
background: black;
border-radius:40px;
font-weight: bold;
font-family: sans-serif;
color: #00CC9 9;
}
#reloj{
font-size:4.7em;
}
.datos{
font-size: 2.2em;
font-family: 'Courier New', Courier, monospace;
}

let mostrarReloj=()=>{
let reloj=document.getElementById('reloj')
let fec_Datos=document.getElementById('fec_Datos')
let fecha =new Date();
let hora=fecha.getHours()
let minutos=fecha.getMinutes()
let segundos=fecha.getSeconds()
let mes=fecha.getMonth()
let dia=fecha.getDate()
let año=fecha.getFullYear()

let
dias=['lunes','martes','miercoles','jueves','viernes','sabado','domingo']
let
meses=['enero','febrero','marzo','abril','mayo','junnio','julio','agosto','septiemb
re','noviembre','diciembre']

mes=meses[mes]
let hr=(hora>12) ? hora-12 : hora
if(hora<10){hora='0'+hora}
if(minutos<10){minutos='0'+ minutos}
if(segundos<10){segundos='0'+minutos}
dia= dias[dia]
let am=(hora<12)? 'AM' :'PM';

reloj.textContent=`${hr}:${minutos}:${segundos}:${am}`
fec_Datos.textContent=`${dias} ${mes} del ${año}`
}

setInterval(mostrarReloj,1000)