/* Clock Styles */
.clock-container {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1;
}

.clock {
    width: 100%;
    height: 100%;
}

.clock-face {
    stroke: #333;
    stroke-width: 0;
}

.clock-face.with-outline {
    stroke-width: 3;
}

.clock-face.classic {
    fill: #f5f5dc;
}

.clock-face.modern {
    fill: white;
}

.tick-minute {
    stroke: #666;
    stroke-width: 2;
}

.tick-hour {
    stroke: #222;
    stroke-width: 4;
}

.number {
    fill: #222;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
}

.number.roman {
    font-size: 36px;
    font-family: Georgia, 'Times New Roman', serif;
}

.number.arabic {
    font-size: 32px;
}

.hand {
    fill: #222;
}

g#hourHandGroup, g#minuteHandGroup, g#secondHandGroup {
    transform-origin: 250px 250px;
    transform-box: view-box;
    transition: transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.second-hand {
    fill: #333;
}

.modern-hands .second-hand {
    fill: #e74c3c;
}

.center-dot {
    fill: #222;
    transition: fill 0.3s;
}

.modern-hands .center-dot {
    fill: #e74c3c;
}

@media (max-width: 768px) {
    .clock-container {
        max-width: 350px;
    }
}