html,body{
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
.wrap{
  width: 100%;
  height: 100%;
  min-width: 500px;
  min-height: 500px;
  background: #293B29;
  display: flex;
  justify-content:center;
  align-items: center;
}
.clock{
  height: 500px;
  width: 500px;
  background-size: 100% 100%;
  background-image: url(../img/clock-bg.svg);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.hour{
  height: 8px;
  width: 72px;
  position: absolute;
  z-index: 2;
  top: 48.6%;
  left: 49.2%;
  transform: rotate(0deg);
  background-size: 72px 8px;
  background-image: url(../img/hour-hand.svg);
  transform-origin: 4px 4px;
}
.min{
  height: 96px;
  width: 8px;
  position: absolute;
  z-index: 3;
  bottom: 49.8%;
  transform: rotate(0deg);
  background-size: 8px 96px;
  background-image: url(../img/minute-hand.svg);
  transform-origin: 4px 92px;
}
.sec{
  height: 126px;
  width: 12px;
  position: absolute;
  z-index: 1;
  top: 49.34%;
  transform: rotate(0deg);
  background-size: 100% 100%;
  background-image: url(../img/second-hand.svg);
  transform-origin: center 0.5px;
}