:root{
    --rotation:0deg;
}
*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}
body{
    background: linear-gradient(to right,rgb(210, 210, 255),rgb(252, 140, 140));
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    flex-direction: row;
}

.container{
    margin: 30px;
    border: 2px solid black;
    position: relative;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    
}

.number {
    position: absolute;
    transform: rotate(30);
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotation));
    font-size: 1.5rem;
}

.container .number1{ --rotation:30deg;}
.container .number2{ --rotation:60deg;}
.container .number3{ --rotation:90deg;}
.container .number4{ --rotation:120deg;}
.container .number5{ --rotation:150deg;}
.container .number6{ --rotation:180deg;}
.container .number7{ --rotation:210deg;}
.container .number8{ --rotation:240deg;}
.container .number9{ --rotation:270deg;}
.container .number10{ --rotation:300deg;}
.container .number11{ --rotation:330deg;}

.number1 .num{ transform: rotate(-30deg);}
.number2 .num{ transform: rotate(-60deg);}
.number3 .num{ transform: rotate(-90deg);}
.number4 .num{ transform: rotate(-120deg);}
.number5 .num{ transform: rotate(-150deg);}
.number6 .num{ transform: rotate(-180deg);}
.number7 .num{ transform: rotate(-210deg);}
.number8 .num{ transform: rotate(-240deg);}
.number9 .num{ transform: rotate(-270deg);}
.number10 .num{ transform: rotate(-300deg);}
.number11 .num{ transform: rotate(-330deg);}

/* setting up hands */

.container .hand{
    --rotation:30;
    position: absolute;
    background-color: black ;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
    transform-origin: bottom;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 10;
    border: 1px solid whitesmoke;
} 

.container::after{
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    border-radius:50%;
    background-color: black;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.container .hour{
    width: 10px;
    height: 30%;
}
.container .minute{
    width: 7px;
    height: 35%;
}
.container .second{
    background-color: mediumorchid ;
    width: 3px;
    height: 38%;
}