:root {
  /* 添加主题色变量 */
  --theme-color: #f8ca08;
  
  /*horizontal*/
  --margin-x: 12vw;
  --margin-t: 12vh;
  --x: 24vw;
  --w: calc(var(--x) / 12.8);
}

#margin {
  margin: 0 var(--margin-x);
  padding-top: var(--margin-t);
}

#semi-circle {
  width: var(--x);
  height: calc(var(--x) / 2);
}

#clock-container {
  height: var(--x);
}

#clock {
  width: var(--x);
}

.tag {
  position: absolute;
}

/* clock */
#clock,
#semi-circle,
#axis {
  background-color: white;
}

@font-face {
  font-family: "FranceTVBrown-Bold";
  src: url("./FranceTVBrownTT-Bold.ttf") format("truetype");
}

#number,
#info {
  font-family: FranceTVBrown-Bold;
  color: white;
}

#number {
  font-size: 10vw;
}

#info {
  font-size: 2vw;
}

#background {
  background-color: var(--theme-color);
}

#hour-hand,
#minute-hand,
#axis {
  background-color: var(--theme-color);
  width: var(--w);
  will-change: transform;
}

#hour-hand {
  height: calc(var(--x) / 4);
}

#minute-hand {
  height: calc(var(--x) / 3.2);
}

#axis {
  height: var(--w);
}

#hour-hand.animate {
  animation: hour-hand-rotate 8s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

#minute-hand.animate {
  animation: minute-hand-rotate 1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@keyframes minute-hand-rotate {
  from {
    transform: translateX(-50%) translateY(-100%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) translateY(-100%) rotate(360deg);
  }
}

@keyframes hour-hand-rotate {
  0% {
    transform: translateX(-50%) translateY(-100%) rotate(0deg);
  }

  12.5% {
    transform: translateX(-50%) translateY(-100%) rotate(45deg);
  }

  25% {
    transform: translateX(-50%) translateY(-100%) rotate(90deg);
  }

  37.5% {
    transform: translateX(-50%) translateY(-100%) rotate(135deg);
  }

  50% {
    transform: translateX(-50%) translateY(-100%) rotate(180deg);
  }

  62.5% {
    transform: translateX(-50%) translateY(-100%) rotate(225deg);
  }

  75% {
    transform: translateX(-50%) translateY(-100%) rotate(270deg);
  }

  87.5% {
    transform: translateX(-50%) translateY(-100%) rotate(315deg);
  }

  100% {
    transform: translateX(-50%) translateY(-100%) rotate(360deg);
  }
}

/* 添加超时样式 */
.overdue {
  --theme-color: #ed6607;
}