HTML/CSS - Glassmorphism Digital Clock Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Digital Clock</title>
    </head>
    <body>
        <div id="DC"></div>
        <footer class="footer">
        <a href="https://youtu.be/tbtmKJcjvQo">Let's Code</a>
    </footer>
        <script>
    
function showtime(){
setTimeout(showtime,1000);
  
var date= new Date();
var h= date.getHours();
var m= date.getMinutes();
var s = date.getSeconds();
var session = "AM";
  if(h==0){
    h=12;
  }
  if(h>12){
    h=h-12;
    session="PM";

css

body{
 background:  rgb(50, 75, 255);
 /**background-image: linear-gradient(to right, #2c3e50, #4ca1af);**/
}
#DC{
  position:absolute;
  padding:12px 24px;
 background:  rgba(255,255,255,0.25);
box-shadow: 20px 20px 40px -6px  rgba(0,0,0,0.2);
backdrop-filter: blur(15.6px);
border-radius:5px;
color: #fff;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  font-size:35px;
}
footer{
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background:  rgba(255,255,255,0.25);
box-shadow: 20px 20px 40px -6px  rgba(0,0,0,0.2);
backdrop-filter: blur(15.6px);
  padding:20px;
  text-align: center;

BROWSER

Console