body {
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 6px;
  font-weight: 200;
  background-color: black;
}
.clock {
  height: 180px;
  width: 180px;
  background-color: black;
  border-radius: 50%;
  position: relative;
  /* transform: rotate(-3deg); */
  /* text-align: center; */

  filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);
  animation: blinkShadowsFilter 8s ease-in infinite;
}
@keyframes blinkShadowsFilter {
  0% {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
      drop-shadow(-55px -40px 28px #9e30a9);
  }

  25% {
    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-55px 40px 24px #9e30a9);
  }

  50% {
    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
  }

  75% {
    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
  }

  to {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
      drop-shadow(-55px -40px 28px #9e30a9);
  }
}

.second {
  position: absolute;
  height: 100%;
  width: 100%;
  --sdeg: 0deg;
  transform: rotate(calc(var(--sdeg)));
  transition: all 1s linear;
}
.second_main {
  height: 100%;
  width: 100%;
  transform: rotate(90deg) translate(0px, -5px);
}
.second_out {
  position: absolute;
  height: 100%;
  width: 100%;

  text-align: center;
  padding-top: 10px;
}
.minute {
  position: absolute;
  --mdeg: 0deg;
  height: 100%;
  width: 100%;
  transform: rotate(calc(var(--mdeg)));
  transition: all 1s linear;
}
.minute_main {
  height: 100%;
  width: 100%;
  transform: rotate(81deg) translate(0px, -17px);
}
.minute_out {
  position: absolute;
  height: 100%;
  width: 100%;

  text-align: center;
  padding-top: 35px;
}
.hour {
  position: absolute;
  --hdeg: 0deg;
  height: 100%;
  width: 100%;
  transform: rotate(calc(var(--hdeg)));
  transition: all 1s linear;
}
.hour_main {
  height: 100%;
  width: 100%;
  transform: rotate(84deg) translate(0px, -30px);
}
.hour_out {
  position: absolute;
  height: 100%;
  width: 100%;

  text-align: center;
  padding-top: 58px;
  font-size: 12px;
}
.d_clock {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#date {
  font-size: 12px;
  text-align: center;
}
.time {
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  font-size: 14px;
  margin: 6px 0;
}
#day {
  text-align: center;
  font-size: 12px;
}

.text_center {
  text-align: center;
}

.second_out1,
.minute_out1 {
  transform: rotate(-0deg);
}
.second_out2,
.minute_out2 {
  transform: rotate(-6deg);
}
.second_out3,
.minute_out3 {
  transform: rotate(-12deg);
}
.second_out4,
.minute_out4 {
  transform: rotate(-18deg);
}
.second_out5,
.minute_out5 {
  transform: rotate(-24deg);
}
.second_out6,
.minute_out6 {
  transform: rotate(-30deg);
}
.second_out7,
.minute_out7 {
  transform: rotate(-36deg);
}
.second_out8,
.minute_out8 {
  transform: rotate(-42deg);
}
.second_out9,
.minute_out9 {
  transform: rotate(-48deg);
}
.second_out10,
.minute_out10 {
  transform: rotate(-54deg);
}
.second_out11,
.minute_out11 {
  transform: rotate(-60deg);
}
.second_out12,
.minute_out12 {
  transform: rotate(-66deg);
}
.second_out13,
.minute_out13 {
  transform: rotate(-72deg);
}
.second_out14,
.minute_out14 {
  transform: rotate(-78deg);
}
.second_out15,
.minute_out15 {
  transform: rotate(-84deg);
}
.second_out16,
.minute_out16 {
  transform: rotate(-90deg);
}
.second_out17,
.minute_out17 {
  transform: rotate(-96deg);
}
.second_out18,
.minute_out18 {
  transform: rotate(-102deg);
}
.second_out19,
.minute_out19 {
  transform: rotate(-108deg);
}
.second_out20,
.minute_out20 {
  transform: rotate(-114deg);
}
.second_out21,
.minute_out21 {
  transform: rotate(-120deg);
}
.second_out22,
.minute_out22 {
  transform: rotate(-126deg);
}
.second_out23,
.minute_out23 {
  transform: rotate(-132deg);
}
.second_out24,
.minute_out24 {
  transform: rotate(-138deg);
}
.second_out25,
.minute_out25 {
  transform: rotate(-144deg);
}
.second_out26,
.minute_out26 {
  transform: rotate(-150deg);
}
.second_out27,
.minute_out27 {
  transform: rotate(-156deg);
}
.second_out28,
.minute_out28 {
  transform: rotate(-162deg);
}
.second_out29,
.minute_out29 {
  transform: rotate(-168deg);
}
.second_out30,
.minute_out30 {
  transform: rotate(-174deg);
}
.second_out31,
.minute_out31 {
  transform: rotate(-180deg);
}
.second_out32,
.minute_out32 {
  transform: rotate(-186deg);
}
.second_out33,
.minute_out33 {
  transform: rotate(-192deg);
}
.second_out34,
.minute_out34 {
  transform: rotate(-198deg);
}
.second_out35,
.minute_out35 {
  transform: rotate(-204deg);
}
.second_out36,
.minute_out36 {
  transform: rotate(-210deg);
}
.second_out37,
.minute_out37 {
  transform: rotate(-216deg);
}
.second_out38,
.minute_out38 {
  transform: rotate(-222deg);
}
.second_out39,
.minute_out39 {
  transform: rotate(-228deg);
}
.second_out40,
.minute_out40 {
  transform: rotate(-234deg);
}
.second_out41,
.minute_out41 {
  transform: rotate(-240deg);
}
.second_out42,
.minute_out42 {
  transform: rotate(-246deg);
}
.second_out43,
.minute_out43 {
  transform: rotate(-252deg);
}
.second_out44,
.minute_out44 {
  transform: rotate(-258deg);
}
.second_out45,
.minute_out45 {
  transform: rotate(-264deg);
}
.second_out46,
.minute_out46 {
  transform: rotate(-270deg);
}
.second_out47,
.minute_out47 {
  transform: rotate(-276deg);
}
.second_out48,
.minute_out48 {
  transform: rotate(-282deg);
}
.second_out49,
.minute_out49 {
  transform: rotate(-288deg);
}
.second_out50,
.minute_out50 {
  transform: rotate(-294deg);
}
.second_out51,
.minute_out51 {
  transform: rotate(-300deg);
}
.second_out52,
.minute_out52 {
  transform: rotate(-306deg);
}
.second_out53,
.minute_out53 {
  transform: rotate(-312deg);
}
.second_out54,
.minute_out54 {
  transform: rotate(-318deg);
}
.second_out55,
.minute_out55 {
  transform: rotate(-324deg);
}
.second_out56,
.minute_out56 {
  transform: rotate(-330deg);
}
.second_out57,
.minute_out57 {
  transform: rotate(-336deg);
}
.second_out58,
.minute_out58 {
  transform: rotate(-342deg);
}
.second_out59,
.minute_out59 {
  transform: rotate(-348deg);
}
.second_out0,
.minute_out0 {
  transform: rotate(-354deg);
}

#second_num0 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num1 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num2 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num3 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num4 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num5 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num6 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num7 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num8 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num9 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num10 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num11 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num12 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num13 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num14 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num15 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num16 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num17 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num18 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num19 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num20 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num21 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num22 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num23 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num24 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num25 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num26 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num27 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num28 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num29 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num30 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num31 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num32 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num33 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num34 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num35 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num36 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num37 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num38 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num39 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num40 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num41 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num42 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num43 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num44 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num45 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num46 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num47 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num48 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num49 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num50 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num51 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num52 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num53 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num54 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num55 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num56 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num57 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num58 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}
#second_num59 {
  --c1_second: 0deg;
  transform: rotate(calc(var(--c1_second)));
}

#minute_num0 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num1 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num2 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num3 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num4 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num5 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num6 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num7 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num8 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num9 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num10 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num11 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num12 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num13 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num14 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num15 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num16 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num17 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num18 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num19 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num20 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num21 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num22 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num23 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num24 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num25 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num26 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num27 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num28 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num29 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num30 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num31 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num32 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num33 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num34 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num35 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num36 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num37 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num38 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num39 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num40 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num41 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num42 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num43 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num44 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num45 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num46 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num47 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num48 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num49 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num50 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num51 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num52 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num53 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num54 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num55 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num56 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num57 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num58 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}
#minute_num59 {
  --c1_minute: 0deg;
  transform: rotate(calc(var(--c1_minute)));
}

#hour_num1 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num2 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num3 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num4 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num5 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num6 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num7 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num8 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num9 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num10 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num11 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}
#hour_num12 {
  --c1_hour: 0deg;
  transform: rotate(calc(var(--c1_hour)));
}

.hour_out1 {
  transform: rotate(-30deg);
}
.hour_out2 {
  transform: rotate(-60deg);
}
.hour_out3 {
  transform: rotate(-90deg);
}
.hour_out4 {
  transform: rotate(-120deg);
}
.hour_out5 {
  transform: rotate(-150deg);
}
.hour_out6 {
  transform: rotate(-180deg);
}
.hour_out7 {
  transform: rotate(-210deg);
}
.hour_out8 {
  transform: rotate(-240deg);
}
.hour_out9 {
  transform: rotate(-270deg);
}
.hour_out10 {
  transform: rotate(-302deg);
}
.hour_out11 {
  transform: rotate(-332deg);
}
.hour_out12 {
  transform: rotate(-0deg);
}

.view {
  border: 1px solid rgb(232, 232, 232);
  border-right: none;
  border-radius: 8px 0 0 8px;
  height: 14px;
  width: 44px;
  position: absolute;
  right: 0;
  top: 46%;
}
.po_abs {
  position: absolute;
  transition: all 1s linear;
}