style.css

body {
  background-color: black;
}

.digi-clock {
  font-family: 'Orbitron', sans-serif;
  font-size: 5em;
  text-align: center;
  color: rgba(0, 0, 0, 0);
  animation-name: blur;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin: 0.5em 0 1.5em 0;
}

@keyframes blur {
  from { text-shadow: 10px 2px 5px white;
  }
  to { text-shadow: 10px 2px 8px white;
  }
}

.clock-container {
  width: 20rem;
  height: 20rem;
  border-radius:50%;
  margin:50px auto;
  position: relative;
  padding:2rem;
  animation-name: blur-box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); 
}

.hand {
  width: 50%;
  height: 6px;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.02;
  transition-timing-function: cubic-bezier(0, 2.32, 0.2, 1.35);
  animation-name: blur-text;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blur-box {
  from { box-shadow: 0em 0em -5em white;
  }
  to { box-shadow: 0em 0em 5em 5em white;
  }
}

@keyframes blur-text {
  from { box-shadow: inset 0 0 0.1em black;
  }
  to { box-shadow: inset 0 0 1em 0.1em white;
  }
}