style.css

:root{
    --background-color:rgb(15, 133, 213);
    --white-color:#fff;
}
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
/* #StopUsingPixel */
html{
    font-size: 62.5%;
    /* i.e 1rem=10px; */
}
body{
    width:100vw;
    min-height: 100vh;
    background-color: var(--background-color);
    display: grid;
    place-items: center;

}
.clock{
    width:35rem;
    height:35rem;
    border-radius: 50%;
    background-color: var(--white-color);
    border:2rem solid white;
    position: relative;
    box-shadow:inset 0.2rem 0.2rem 1rem 0 rgba(0,0,0,0.5),inset -0.2rem -0.2rem 1rem  0 rgba(0,0,0,0.5);
}
.number{
    --rotation-degree:0deg;
    width:100%;
    height: 100%;
    position: absolute;
    text-align: center;
    font-size:2.5rem;
    padding:0.7rem;
    transform: rotate(var(--rotation-degree));
}
#number1{--rotation-degree:30deg}
#number2{--rotation-degree:60deg}
#number3{--rotation-degree:90deg}
#number4{--rotation-degree:120deg}
#number5{--rotation-degree:150deg}
#number6{--rotation-degree:180deg}
#number7{--rotation-degree:210deg}
#number8{--rotation-degree:240deg}
#number9{--rotation-degree:270deg}
#number10{--rotation-degree:300deg}
#number11{--rotation-degree:330deg}

.hand{
    --degree-of-rotation:0;
    position: absolute;
    bottom:50%;
    left:50%;
    transform-origin:bottom;
    transform: translateX(-50%) rotate(calc(var(--degree-of-rotation) * 1deg ));
    border:none;
    border-top-left-radius:0.5rem;
    border-top-right-radius:0.5rem;
    z-index:1;
  
}
.clock::before{
    content:'';
    position: absolute;
    left:50%;
    top:50%;
    width:2rem;
    height:2rem;
    transform:translate(-50%,-50%);
    border:none;
    border-radius:50%;
    background-color:rgb(73, 69, 69);
    z-index:2;

}
#hour{
    --degree-of-rotation:30;
    height:32%;
    width:1rem;
    background-color:rgb(73, 69, 69);
}
#minute{
    --degree-of-rotation:90;
    height:35%;
    width:0.6rem;
    background-color: rgb(134, 127, 127);
}
#second{
    height:38%;
    width:0.4rem;
    background-color: red;
}
@media screen and (max-width:996px){
    html{
        font-size:60%;
    }
}
@media screen and (max-width:768px){
    html{
        font-size:58%;
    }
}
@media screen and (max-width:390px){
    html{
        font-size:50%;
    }
}