HTML

<div class="container"><div id="clock"></div></div>

CSS

`*{
margin: 0px;
padding: 0px;
}

.container{
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(67, 66, 66);
}

clock{

font-size: 5vw;
font-family: orbitron;
background-color: rgb(16, 16, 16);
border: 1vw solid black;
color: green;
width: 30vw;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;

}
@media(max-width:800px)and (orientation:portrait){
#clock{
width: 98vw;
height: 25vh;
font-size: 18vw;
}
}

@media(max-width:786px)and (orientation:landscape){
#clock{
width: 98vw;
height: 50vh;
font-size: 18vw;
}
}

JS

` function Clock(){
let d= new Date();
hours = d.getHours()
minutes = d.getMinutes()
seconds = d.getSeconds()
document.getElementById('clock').innerText = hours + ':' + minutes + ':' + seconds;
}

Clock()

setInterval(()=>{Clock()},1000)`

`