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)`

`