/* Minimal Analog Clock — styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

.clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Clock face */
.clock-face {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Ticks (hour markers) */
.tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 160px;
}

.tick span {
  position: absolute;
  top: 8px;
  left: -1px;
  width: 2px;
  height: 14px;
  background: #111111;
  border-radius: 1px;
}

/* Position each tick (30° apart, starting from 12 o'clock) */
.tick-12 { transform: rotate(0deg); }
.tick-1  { transform: rotate(30deg); }
.tick-2  { transform: rotate(60deg); }
.tick-3  { transform: rotate(90deg); }
.tick-4  { transform: rotate(120deg); }
.tick-5  { transform: rotate(150deg); }
.tick-6  { transform: rotate(180deg); }
.tick-7  { transform: rotate(210deg); }
.tick-8  { transform: rotate(240deg); }
.tick-9  { transform: rotate(270deg); }
.tick-10 { transform: rotate(300deg); }
.tick-11 { transform: rotate(330deg); }

/* Clock hands */
.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  border-radius: 4px;
  background: #111111;
}

.hour-hand {
  width: 4px;
  height: 80px;
  margin-left: -2px;
  background: #111111;
}

.minute-hand {
  width: 3px;
  height: 110px;
  margin-left: -1.5px;
  background: #111111;
}

.second-hand {
  width: 1.5px;
  height: 130px;
  margin-left: -0.75px;
  background: #333333;
}

/* Center dot */
.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: #111111;
  border-radius: 50%;
}

/* Digital time display */
.digital-time {
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #111111;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0.25rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Subtle responsiveness */
@media (max-width: 400px) {
  .clock-face {
    width: 260px;
    height: 260px;
  }

  .tick {
    transform-origin: 0 130px;
  }

  .tick span {
    top: 6px;
    height: 12px;
  }

  .hour-hand {
    height: 65px;
  }

  .minute-hand {
    height: 90px;
  }

  .second-hand {
    height: 105px;
  }

  .digital-time {
    font-size: 1.75rem;
  }
}