*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #eeebeb;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
}

.clock {
  width: 250px;
  height: 250px;
  background: #fff;
  opacity: 0.8;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: -8px 8px 15px rgba(255, 255, 255, 0.05),
    inset -8px 8px 15px rgba(255, 255, 255, 0.05),
    20px 20px 20px rgba(0, 0, 0, 0.2), 
    inset 20px 20px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}
@media only screen and (min-width: 480px) {
  .clock {
    width: 500px;
    height: 500px;
  }
}
.clock::after {
  content: '';
  height: 30px;
  width: 30px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 11;
}

.clock .num {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 20px;
  padding: 18px;
}
.num::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 15px;
  background-color: #000;
}

.clock .number1 {--rotation: 30deg}
.clock .number2 {--rotation: 60deg}
.clock .number3 {--rotation: 90deg}
.clock .number4 {--rotation: 120deg}
.clock .number5 {--rotation: 150deg}
.clock .number6 {--rotation: 180deg}
.clock .number7 {--rotation: 210deg}
.clock .number8 {--rotation: 240deg}
.clock .number9 {--rotation: 270deg}
.clock .number10 {--rotation: 300deg}
.clock .number11 {--rotation: 330deg}
.clock .number12 {--rotation: 0deg}

.number1 div {
  transform: rotate(-30deg);
}
.number2 div {
  transform: rotate(-60deg);
}
.number3 div {
  transform: rotate(-90deg);
}
.number4 div {
  transform: rotate(-120deg);
}
.number5 div {
  transform: rotate(-150deg);
}
.number6 div {
  transform: rotate(-180deg);
}
.number7 div {
  transform: rotate(-210deg);
}
.number8 div {
  transform: rotate(-240deg);
}
.number9 div {
  transform: rotate(-270deg);
}
.number10 div {
  transform: rotate(-300deg);
}
.number11 div {
  transform: rotate(-330deg);
}

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
  transform-origin: bottom;
  border: 1px solid #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #000;
  z-index: 10;
}
.clock .hand.hour {
  width: 10px;
  height: 33%;
  background-color: #000;
}
.clock .hand.minute {
  width: 7px;
  height: 37%;
  background-color: #000;
}
.clock .hand.second {
  width: 5px;
  height: 37%;
  background-color: rgb(179, 22, 5);
}