#clickerBox {
    width: 100px;
    height: 100px;
    outline: 4px solid black;
    border-radius: 5px;
}

#clickerBox:active{
  background-color: grey;
}

.clockBody {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
  margin: 0;
}

.clock {
  width: 300px;
  height: 300px;
  border: 20px solid black;
  border-radius: 50%;
  position: relative;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  background: white;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); 
}

.hand {
  width: 50%;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand { 
  height: 6px; 
}

.minute-hand { 
  height: 4px; 
}

.second-hand { 
  height: 2px; 
  background: red; 
}

.number {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 24px;
    padding: 5px; /* Keeps them from touching the border */
}

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

.number span {
    display: block;
}

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