style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');


*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Poppins', sans-serif;
    /* To make others that are inside the body take position according to the body  */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(249,73,181,1) 100%); 
}

body h2{
    margin-bottom: 44px;
}

.clock{
    background-color: rgba(0, 0, 0, 0.911);
    border-radius: 50%;
    border: 5px solid white;
    height: 300px;
    width: 300px;
    color: white;
    font-size: 26px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    box-shadow: 0 0 21px rgba(63,94,251,1), 0 0 41px rgba(249,73,181,1) ;
}

.clock ul li{
    list-style: none;
    position: absolute;
    text-align: center;

    /* To calculate the transformation of numbers inside clock --i is a variable  */
    transform: rotate(calc(30deg * var(--i)));
    inset: 5px;
}


.clock ul li span{
    transform: rotate(calc(-30deg * var(--i)));
    display: inline-block;
}


.clock::after{
    content: " ";
    height: 10px;
    width: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;

}

.needle{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}



.needle span{
    width: 5px;
    height: var(--h);
    background-color: var(--color);
    position: absolute;
    border-radius: 111px;
}