*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: beige;
}

.clock{
    width: 500px;
    height: 500px;
    border-radius:50%;
    position: relative;
    border: 0.4px solid rgb(187, 156, 120);
    box-shadow: 1px 2px 30px 1px #cccc;
    background-color: white;
}

.clock .clock-face{
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-14px);
}

.clock .clock-face .number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
}


.numberTwevel { top:10%; left:50%; }
/* .numberOne { top:20%; left:78%; } */
.numberThree { top:50%; left:92%; } 
/* .numberThree { top:75%; left:85%; } */
.numberSix { top:96%; left:50%; }
.numberNine { top:55%; left:8%; }


.hand{
    width: 50%;
    background-color: black;
    position: absolute;
    top: 51%;
    left:26%;
    transform-origin: 50%;
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function:cubic-bezier(0.23, 1, 0.320, 1);
}

.hour-hand{
    height: 6px;
}

.minute-hand{
    height: 4px;
    background-color: yellow;
}
.second-hand{
    height: 2px;
    background-color: red;
    
}
