html{
  background: url("https://img.freepik.com/free-photo/gray-sofa-white-living-room-with-copy-space_43614-918.jpg?w=1380&t=st=1676112861~exp=1676113461~hmac=6ad3e3e190e336396c0884d76d751dae054ceba2ce2793706e6d023cb87e225d");
  background-repeat: no-repeat;
  background-size: cover;
}

.clock{
  width: 9rem;
  height: 9rem;
  position: fixed;
  left: 90vh;
  top: 20vh;
  background: #b30000;
  border: 5px solid #101010;
  border-radius: 50%;
  box-shadow: -3px -3px 25px 2px rgba(40,40,40, 0.7),
    inset 2px 2px 20px -2px rgba(240,240,240, 0.7), 
    inset -2px -2px 10px rgba(240,240,240,0.5),
    4px 4px 10px rgba(0,0,0,0.3);;
}
.dotline {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  left: 50%;
  margin-top: 5px;
  margin-left: -5px;
  transform-origin: 64% 66px;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background: black;
  z-index: 2;
  left: 46.45%;
  bottom: 47%;
  transform-origin: 10% 68px;
  box-shadow: 1px -1px 10px 0.3px white;
  
}

 .hour-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 40px;
  background: black;
  top: 30px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
}
.minute-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 50px;
  background: black;
  top: 20px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
}