*, *::after, *::before{
    box-sizing: border-box;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 100;
    font-style: bold;
}

body{
    background-image: linear-gradient(to right,rgb(177, 247, 73), rgb(4, 248, 252));
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.clock{
    width: 500px;
    height: 500px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    border: 5px solid black;
    position: relative;
}

.clock .number{
    --rotation: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotation));
}
.clock .num1 {--rotation: 30deg;}
.clock .num2 {--rotation: 60deg;}
.clock .num3 {--rotation: 90deg;}
.clock .num4 {--rotation: 120deg;}
.clock .num5 {--rotation: 150deg;}
.clock .num6 {--rotation: 180deg;}
.clock .num7 {--rotation: 210deg;}
.clock .num8 {--rotation: 240deg;}
.clock .num9 {--rotation: 270deg;}
.clock .num10 {--rotation: 300deg;}
.clock .num11 {--rotation: 330deg;}

.clock .hands{
    --rotation: 30;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    transform: translateX(-50%) rotate(calc(var(--rotation)*1deg));
}
.clock::after{
    content:'';
    position: absolute;
    background-color: black;
    z-index: 4;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}
.clock .hands.sec{
width: 3px;
height: 45%;
background-color:red;
z-index: 3;
}

.clock .hands.min{
    width: 10px;
    height: 40%;
    background-color:rgb(0, 0, 0);
    z-index: 2;
}

.clock .hands.hour{
    width: 15px;
    height: 30%;
    background-color:rgb(0, 0, 0);
    z-index: 0;
}