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

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

#horloge{
    border: 3px solid black;
    border-radius: 50%;
    position: relative;
    width: 306px;
    height: 306px;
}
.number{
    /*--rotation: 0deg;*/
    font-size: 1.5rem;
    position: absolute;
    display: block;
    width: 300px;
    height: 300px;
    text-align: center;
    /*transform: rotate(var(--rotation));*/
}
.number1{
    transform: rotate(30deg);
}
.number2{
    transform: rotate(60deg);
}
.number3{
    transform: rotate(90deg);
}
.number4{
    transform: rotate(120deg);
}
.number5{
    transform: rotate(150deg);
}
.number6{
    transform: rotate(180deg);
}
.number7{
    transform: rotate(210deg);
}
.number8{
    transform: rotate(240deg);
}
.number9{
    transform: rotate(270deg);
}
.number10{
    transform: rotate(300deg);
}
.number11{
    transform: rotate(330deg);
}
.number12{
    transform: rotate(0deg);
}

#aiguilles{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
}
#aiguilles::after{
    content: '';
    position: absolute;
    background-color: black;
    z-index: 11;
    width: 15px;
    height: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid white;
    border-radius: 50%;
}
.aiguille {
    /*--rotation: 0;*/
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 10;
    transform: translateX(-50%) rotate(0deg);
}
.aiguille.heures{
    background-color: black;
    width: 10px;
    height: 30%;
}
.aiguille.minutes{
    background-color: black;
    width: 7px;
    height: 40%;
}
.aiguille.secondes{
    background-color: red;
    width: 3px;
    height: 45%;
}