* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: #091921;
}

.header {
   position: absolute;
   top: 30px;
   color: green;
   font-family: "Press Start 2P", system-ui;
}
.footer {
   position: absolute;
   bottom: 20px;
   right: 60px;
   color: green;
   font-family: "Press Start 2P", system-ui;
}

.clock {
   width: 45vh;
   height: 45vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url(clock.svg);
   background-size: cover;
   border: 1vh solid #091921;
   border-radius: 50%;
   box-shadow: 0 -2vh 2vh rgba(255, 255, 255, 0.05),
       inset 0 -2vh 5vh rgba(255, 255, 255, 0.05),
       0 2vh 2vh rgba(0, 0, 0, 0.5),
       inset 0 2vh 2vh rgba(0, 0, 0, 0.05);

}

.clock::before {
   content: '';
   position: absolute;
   width: 2vh;
   height: 2vh;
   background: #002700;
   border-radius: 50%;
   z-index: 10000;
}

.clock .hour,
.clock .min,
.clock .sec {
   position: absolute;
}

.clock .hour,
.hr {
   width: 22vh;
   height: 22vh;
}

.clock .min,
.mn {
   width: 27vh;
   height: 27vh;
}

.clock .sec,
.sc {
   width: 33vh;
   height: 33vh;
}

.hr,
.mn,
.sc {
   display: flex;
   justify-content: center;
   position: absolute;
   border-radius: 50%;
}

.hr::before {
   content: '';
   position: absolute;
   width: 1vh;
   height: 12vh;
   background: white;
   z-index: 10;
   border-radius: 0.7vh;
}

.mn::before {
   content: '';
   position: absolute;
   width: 0.5vh;
   height: 13vh;
   background: #777777;
   z-index: 11;
   border-radius: 0.8vh;
}

.sc::before {
   content: '';
   position: absolute;
   width: 0.25vh;
   height: 21vh;
   background: #0b5384;
   z-index: 12;
   border-radius: 0.8vh;
}