* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
body {
  height: 100vh;
  width: 100vw;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.clock {
  width: 100vmin;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}

.digital-clock {
  display: flex;
  padding: 10px;
  height: max-content;
  justify-content: center;
  align-items: center;
  font-size: calc(10px + 2vw);
  font-weight: 900;
  box-shadow: 0 0 5px;
  border-radius: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
.analog-clock {
  height: 45vmin;
  width: 45vmin;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 10px;
}
.analog-clock label {
  position: absolute;
  inset: 2px;
  text-align: center;
  transform: rotate(calc(var(--i) * 6deg));
}
.analog-clock label span {
  display: inline-block;
  font-size: calc(5px + 1vw);
  font-weight: 700;
}
.clock-num {
  transform: rotate(calc(var(--i) * -6deg));
  font-size: calc(10px + 1vw);
}
.indicators {
  position: absolute;
  height: 10px;
  width: 10px;
  display: flex;
  justify-content: center;
}
.indicators::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: 100;
  background: white;
  border: 4px solid green;
}
.indicators .hand {
  position: absolute;
  height: 125px;
  width: 4px;
  bottom: 0;
  border-radius: 50px;
  transform-origin: bottom;
  background: green;
}
.hand.minute {
  height: 110px;
  width: 4px;
  background: #fff;
}
.hand.hour {
  height: 95px;
  width: 8px;
  background: red;
}
/* stop watch  */
.stopwatch {
  height: 25vmin;
  width: 60vmin;
  box-shadow: 0 0 10px;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2%;
  overflow: hidden;
  padding: 10px;
}
.stopwatch-container {
  width: 100%;
  height: 8vmin;
  font-size: calc(10px + 2vw);
  text-align: center;
  line-height: 8vmin;
}
#check {
  display: none;
}
.start-stop,
.reset {
  border: 2px solid white;
  height: 6vmin;
  width: 20vmin;
  cursor: pointer;
  line-height: 6vmin;
  text-align: center;
  border-radius: 20px;
  background-color: rgba(0, 111, 139, 0.884);
}
.reset {
  color: blue;
}
.stop-ms {
  font-size: calc(1px + 1vw);
}
.start-stop:active,
.reset:active{
  font-size: 1.5vw;
}