@import url("/static/css/fonts.css");
@import url("/static/css/vars.css");

.hand {
    position: absolute;
    top: 50%;
    transform-origin: 100%; /* pivot from the bottom of the hand  */
    transform: translate(-50%, -50%) rotate(90deg); /* center it */

    width: 50%;
    background-color: var(--hand-color, #fff);
    transition: transform 0.5s ease;

    /* round the end of it off */
    border-top-left-radius: 20% 100%;
    border-bottom-left-radius: 20% 100%;

    z-index: 2;
}

#clock {
    position: relative;

    width: calc(10vw * var(--ui-width-scale));
    aspect-ratio: 1;

    border: calc(0.1vw * var(--ui-width-scale)) solid var(--clock-border-color);
    border-radius: 50%;

    background-color: var(--clock-background-color);
    
    box-shadow: calc(0.2vw * var(--ui-width-scale)) calc(0.2vw * var(--ui-width-scale)) calc(0.1vw * var(--ui-width-scale)) rgba(0,0,0,0.2);

    display: flex;
    justify-content: center;
    align-items: center;

    margin: calc(3vw * var(--ui-width-scale));
}

#clock-center {
    width: calc(1vw * var(--ui-width-scale));
    aspect-ratio: 1;

    background-color: var(--clock-center-point-color);
    border-radius: 50%;

    z-index: 2;
}

#hour-hand {
    background-color: var(--clock-hour-hand-color);
    width: 30%;
    height: calc(0.4vw * var(--ui-width-scale));

    transform: translate(-50%, -50%) rotate(45deg);
}
#minute-hand {
    background-color: var(--clock-minute-hand-color);
    width: 40%;
    height: calc(0.3vw * var(--ui-width-scale));

    transform: translate(-50%, -50%) rotate(90deg);
}
#second-hand {
    background-color: var(--clock-second-hand-color);
    width: 50%;
    height: calc(0.2vw * var(--ui-width-scale));

    transform: translate(-50%, -50%) rotate(135deg);
}

.number {
    position: absolute;
    font-size: calc(1vw * var(--ui-width-scale));
    color: black;
    transform-origin: 50% 50%;
    text-align: center;
    width: 100%;
    height: 100%;
}

/* on behalf of every CSS dev ever, i am sorry */
#number1 {
    transform: rotate(30deg) translateY(-50%) rotate(-30deg) translate(-2%, 50%);
}
#number2 {
    transform: rotate(60deg) translateY(-50%) rotate(-60deg) translate(-5%, 48%);
}
#number3 {
    transform: rotate(90deg) translateY(-50%) rotate(-90deg) translate(-6%, 44%);
}
#number4 {
    transform: rotate(120deg) translateY(-50%) rotate(-120deg) translate(-5%, 42%);
}
#number5 {
    transform: rotate(150deg) translateY(-50%) rotate(-150deg) translate(-3%, 38%);
}
#number6 {
    transform: rotate(180deg) translateY(-50%) rotate(-180deg) translate(0%, 38%);
}
#number7 {
    transform: rotate(210deg) translateY(-50%) rotate(-210deg) translate(3%, 38%);
}
#number8 {
    transform: rotate(240deg) translateY(-50%) rotate(-240deg) translate(5%, 42%);
}
#number9 {
    transform: rotate(270deg) translateY(-50%) rotate(-270deg) translate(6%, 44%);
}
#number10 {
    transform: rotate(300deg) translateY(-50%) rotate(-300deg) translate(5%, 48%);
}
#number11 {
    transform: rotate(330deg) translateY(-50%) rotate(-330deg) translate(2%, 50%);
}
#number12 {
    transform: rotate(0deg) translateY(-50%) rotate(0deg) translate(0%, 50%);
}