* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(0, 0, 0);
}

.clock {
  position: relative;
  width: 20vw;
  height: 20vw;
  border: 4px solid rgb(255, 255, 255);
  border-radius: 50%;
}

.hour-hand {
  position: absolute;
  width: 3%;
  height: 37%;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  top: 16%;
  left: 49.8%;
  transform-origin: bottom;
}

.minute-hand {
  position: absolute;
  width: 2%;
  height: 45%;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  top: 7%;
  left: 49%;
  transform-origin: bottom;
}

.second-hand {
  position: absolute;
  width: 0.8%;
  height: 54%;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  top: 5%;
  left: 50%;
  transform-origin: 80% 85%;
}