style.css

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html{
    background-color: #55c9ac;
}
#clock{
    margin:auto;
    top:90px;
    border-radius: 100%;
    background-image: url('clock.gif');
    background-size: 100%;
    position: relative;
    width: 40vw;
    height: 40vw;
}

#hour-hand,#minute-hand,#second-hand{
    position: absolute;
}
#hour-hand{
    width: 1.5%;
    height: 29%;
    border-radius: 30%;
    background-color: black;
    top:21%;
    left: 49.2%;
    transform-origin: center bottom;
}

#minute-hand{
    width: 1.3%;
    height: 33%;
    border-radius: 30%;
    background-color: black;
    top:17%;
    left: 49.2%;
    transform-origin: center bottom;
}
#second-hand{
    width: 1%;
    height: 38%;
    border-radius: 30%;
    background-color: black;
    top:12%;
    left: 49.2%;
    transform-origin: center bottom;
}

@media screen and (max-width:1080px) {
    #clock{
        width: 70vw;
        height: 70vw;
    }
}