:root {
  --neon: inset 0 0 50px #fff,
  inset 20px 0 80px #f0f,
  inset -20px 0 80px #0ff,
  inset 20px 0 300px #f0f,
  inset -20px 0 300px #0ff,
  0 0 50px #fff,
  -10px 0 80px #f0f,
  10px 0 80px #0ff;
}
html {
  box-sizing: border-box;
  background: #000;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 5vmin;
}
.neon {
  position: absolute;
  left: 50%;
  top: 8vmin;
  transform: translateX(-50%);
  z-index: 1;
  color: #fff;
  text-align: center;
  font-family: 'Absolute Neon Script', sans-serif;
  font-size: 20vmin;
  font-weight: 400;
  margin: 0;
  animation: flicker 1.5s infinite alternate;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
}
.clock {
  position: relative;
  width: 80vmin;
  height: 80vmin;
  margin: 0 auto;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--neon);
}
.clock:before {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 2vmin);
  left: calc(50% - 2vmin);
  border: 1px solid #ddd;
  background: white;
  width: 4vmin;
  height: 4vmin;
  z-index: 5;
  border-radius: 50%;
  box-shadow: var(--neon);
}
.clock > div {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: top center;
  animation: tick 60s infinite linear;
  outline: 1px solid transparent;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: var(--neon);
}
.clock .h {
  width: 5px;
  transform: translateX(-50%);
  height: 26vmin;
  animation-duration: 43200s;
  --rotation: calc((var(--hours) * 60 + var(--minutes) + var(--seconds) / 60) * .5deg);
}
.clock .m {
  width: 3px;
  transform: translateX(-50%);
  height: 32vmin;
  animation-duration: 3600s;
  --rotation: calc((var(--minutes) + var(--seconds) / 60) * 6deg);
}
.clock .s {
  width: 1px;
  transform: translateX(-50%);
  height: 36vmin;
  animation-duration: 60s;
  --rotation: calc(var(--seconds) * 6deg);
}
.clock .tick {
  display: block;
  height: 50%;
  border-bottom: 10px solid #FFF;
  background: none;
  width: 1px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
}

  .clock .tick:nth-of-type(5n) {
    opacity: 1;
    border-bottom: 30px solid #FFF;
  }

  .clock .tick:nth-of-type(1) {
    transform: rotateZ(calc(6deg * 1));
  }

  .clock .tick:nth-of-type(2) {
    transform: rotateZ(calc(6deg * 2));
  }

  .clock .tick:nth-of-type(3) {
    transform: rotateZ(calc(6deg * 3));
  }

  .clock .tick:nth-of-type(4) {
    transform: rotateZ(calc(6deg * 4));
  }

  .clock .tick:nth-of-type(5) {
    transform: rotateZ(calc(6deg * 5));
  }

  .clock .tick:nth-of-type(6) {
    transform: rotateZ(calc(6deg * 6));
  }

  .clock .tick:nth-of-type(7) {
    transform: rotateZ(calc(6deg * 7));
  }

  .clock .tick:nth-of-type(8) {
    transform: rotateZ(calc(6deg * 8));
  }

  .clock .tick:nth-of-type(9) {
    transform: rotateZ(calc(6deg * 9));
  }

  .clock .tick:nth-of-type(10) {
    transform: rotateZ(calc(6deg * 10));
  }

  .clock .tick:nth-of-type(11) {
    transform: rotateZ(calc(6deg * 11));
  }

  .clock .tick:nth-of-type(12) {
    transform: rotateZ(calc(6deg * 12));
  }

  .clock .tick:nth-of-type(13) {
    transform: rotateZ(calc(6deg * 13));
  }

  .clock .tick:nth-of-type(14) {
    transform: rotateZ(calc(6deg * 14));
  }

  .clock .tick:nth-of-type(15) {
    transform: rotateZ(calc(6deg * 15));
  }

  .clock .tick:nth-of-type(16) {
    transform: rotateZ(calc(6deg * 16));
  }

  .clock .tick:nth-of-type(17) {
    transform: rotateZ(calc(6deg * 17));
  }

  .clock .tick:nth-of-type(18) {
    transform: rotateZ(calc(6deg * 18));
  }

  .clock .tick:nth-of-type(19) {
    transform: rotateZ(calc(6deg * 19));
  }

  .clock .tick:nth-of-type(20) {
    transform: rotateZ(calc(6deg * 20));
  }

  .clock .tick:nth-of-type(21) {
    transform: rotateZ(calc(6deg * 21));
  }

  .clock .tick:nth-of-type(22) {
    transform: rotateZ(calc(6deg * 22));
  }

  .clock .tick:nth-of-type(23) {
    transform: rotateZ(calc(6deg * 23));
  }

  .clock .tick:nth-of-type(24) {
    transform: rotateZ(calc(6deg * 24));
  }

  .clock .tick:nth-of-type(25) {
    transform: rotateZ(calc(6deg * 25));
  }

  .clock .tick:nth-of-type(26) {
    transform: rotateZ(calc(6deg * 26));
  }

  .clock .tick:nth-of-type(27) {
    transform: rotateZ(calc(6deg * 27));
  }

  .clock .tick:nth-of-type(28) {
    transform: rotateZ(calc(6deg * 28));
  }

  .clock .tick:nth-of-type(29) {
    transform: rotateZ(calc(6deg * 29));
  }

  .clock .tick:nth-of-type(30) {
    transform: rotateZ(calc(6deg * 30));
  }

  .clock .tick:nth-of-type(31) {
    transform: rotateZ(calc(6deg * 31));
  }

  .clock .tick:nth-of-type(32) {
    transform: rotateZ(calc(6deg * 32));
  }

  .clock .tick:nth-of-type(33) {
    transform: rotateZ(calc(6deg * 33));
  }

  .clock .tick:nth-of-type(34) {
    transform: rotateZ(calc(6deg * 34));
  }

  .clock .tick:nth-of-type(35) {
    transform: rotateZ(calc(6deg * 35));
  }

  .clock .tick:nth-of-type(36) {
    transform: rotateZ(calc(6deg * 36));
  }

  .clock .tick:nth-of-type(37) {
    transform: rotateZ(calc(6deg * 37));
  }

  .clock .tick:nth-of-type(38) {
    transform: rotateZ(calc(6deg * 38));
  }

  .clock .tick:nth-of-type(39) {
    transform: rotateZ(calc(6deg * 39));
  }

  .clock .tick:nth-of-type(40) {
    transform: rotateZ(calc(6deg * 40));
  }

  .clock .tick:nth-of-type(41) {
    transform: rotateZ(calc(6deg * 41));
  }

  .clock .tick:nth-of-type(42) {
    transform: rotateZ(calc(6deg * 42));
  }

  .clock .tick:nth-of-type(43) {
    transform: rotateZ(calc(6deg * 43));
  }

  .clock .tick:nth-of-type(44) {
    transform: rotateZ(calc(6deg * 44));
  }

  .clock .tick:nth-of-type(45) {
    transform: rotateZ(calc(6deg * 45));
  }

  .clock .tick:nth-of-type(46) {
    transform: rotateZ(calc(6deg * 46));
  }

  .clock .tick:nth-of-type(47) {
    transform: rotateZ(calc(6deg * 47));
  }

  .clock .tick:nth-of-type(48) {
    transform: rotateZ(calc(6deg * 48));
  }

  .clock .tick:nth-of-type(49) {
    transform: rotateZ(calc(6deg * 49));
  }

  .clock .tick:nth-of-type(50) {
    transform: rotateZ(calc(6deg * 50));
  }

  .clock .tick:nth-of-type(51) {
    transform: rotateZ(calc(6deg * 51));
  }

  .clock .tick:nth-of-type(52) {
    transform: rotateZ(calc(6deg * 52));
  }

  .clock .tick:nth-of-type(53) {
    transform: rotateZ(calc(6deg * 53));
  }

  .clock .tick:nth-of-type(54) {
    transform: rotateZ(calc(6deg * 54));
  }

  .clock .tick:nth-of-type(55) {
    transform: rotateZ(calc(6deg * 55));
  }

  .clock .tick:nth-of-type(56) {
    transform: rotateZ(calc(6deg * 56));
  }

  .clock .tick:nth-of-type(57) {
    transform: rotateZ(calc(6deg * 57));
  }

  .clock .tick:nth-of-type(58) {
    transform: rotateZ(calc(6deg * 58));
  }

  .clock .tick:nth-of-type(59) {
    transform: rotateZ(calc(6deg * 59));
  }

  .clock .tick:nth-of-type(60) {
    transform: rotateZ(calc(6deg * 60));
  }

  @keyframes tick {
    from {
      transform: rotate(calc(var(--rotation) - 180deg));
    }
    to {
      transform: rotate(calc(360deg + var(--rotation) - 180deg));
    }
  }

  @keyframes gradient {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes flicker {
    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
      text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
    }
    20%,
    24%,
    55% {
      text-shadow: none;
    }
  }