/* -- TIMETYPE -- */
@font-face {
  font-family: 'TTArchetypePilot';
  src: url('../font/TTArchetypePilotBETA-Bold.woff2') format('woff2'),
       url('../font/TTArchetypePilotBETA-Bold.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

#timetype {
  height: 100dvh;
  padding: .5em;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

#timetype > h3 {
  width: 100%;
}

.clock-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100dvmin;
  height: 100dvmin;
  overflow: hidden;
}

.clock-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100dvmin;
  height: 100dvmin;
  background: #000;
  border-radius: 50%;
}

.number-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'TTArchetypePilot', sans-serif;
  font-size: 12dvmin;
  font-weight: 900;
  color: #fff;
  line-height: 16dvmin;
  z-index: 2;
  font-feature-settings: "kern" 1;
}

.number-box[data-num="10"],
.number-box[data-num="12"] {
  font-feature-settings: "kern" 1, "ss01" 1;
}

.number-box::before {
  content: '';
  position: absolute;
  width: 16dvmin;
  height: 16dvmin;
  border-radius: 0;
  z-index: -1;
}

.number-box[data-num="12"] { top: 8%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); }
.number-box[data-num="1"]  { top: calc(50% - 42% * 0.866); left: calc(50% + 42% * 0.5); transform: translate(-50%, -50%) rotate(30deg); }
.number-box[data-num="2"]  { top: calc(50% - 42% * 0.5); left: calc(50% + 42% * 0.866); transform: translate(-50%, -50%) rotate(60deg); }
.number-box[data-num="3"]  { top: 50%; right: 8%; transform: translate(50%, -50%) rotate(calc(90deg + 180deg)); }
.number-box[data-num="4"]  { top: calc(50% + 42% * 0.5); left: calc(50% + 42% * 0.866); transform: translate(-50%, -50%) rotate(calc(120deg + 180deg)); }
.number-box[data-num="5"]  { top: calc(50% + 42% * 0.866); left: calc(50% + 42% * 0.5); transform: translate(-50%, -50%) rotate(calc(150deg + 180deg)); }
.number-box[data-num="6"]  { bottom: 8%; left: 50%; transform: translate(-50%, 50%) rotate(0deg); }
.number-box[data-num="7"]  { top: calc(50% + 42% * 0.866); left: calc(50% - 42% * 0.5); transform: translate(-50%, -50%) rotate(calc(210deg + 180deg)); }
.number-box[data-num="8"]  { top: calc(50% + 42% * 0.5); left: calc(50% - 42% * 0.866); transform: translate(-50%, -50%) rotate(calc(240deg + 180deg)); }
.number-box[data-num="9"]  { top: 50%; left: 8%; transform: translate(-50%, -50%) rotate(270deg); }
.number-box[data-num="10"] { top: calc(50% - 42% * 0.5); left: calc(50% - 42% * 0.866); transform: translate(-50%, -50%) rotate(300deg); }
.number-box[data-num="11"] { top: calc(50% - 42% * 0.866); left: calc(50% - 42% * 0.5); transform: translate(-50%, -50%) rotate(330deg); }

.hand {
  position: absolute;
  left: 50%;
  z-index: 5;
}

.minute-hand {
  width: 2.4dvmin;
  height: 46dvmin;
  margin-left: -1.2dvmin;
  bottom: 50%;
  margin-bottom: -12dvmin;
  background: #fff;
  transform-origin: 50% calc(100% - 12dvmin);
}

.hour-hand {
  width: 4.8dvmin;
  height: 34dvmin;
  margin-left: -2.4dvmin;
  bottom: 50%;
  margin-bottom: -8dvmin;
  background: #fff;
  transform-origin: 50% calc(100% - 8dvmin);
}

.second-hand {
  width: .8dvmin;
  height: 58dvmin;
  margin-left: -.4dvmin;
  bottom: 50%;
  margin-bottom: -16dvmin;
  background: #FF4400;
  transform-origin: 50% calc(100% - 16dvmin);
}

.second-circle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4dvmin;
  height: 4dvmin;
  margin-left: -2dvmin;
  margin-top: -2dvmin;
  background: #FF4400;
  border-radius: 8dvmin;
}