style.css

/* .Time{
    width: 60vw;
    height: 60vw;
    background-color: brown;
    margin: auto;
} */

h1{
    font-family: cursive;
    font-size: 2vw;
     text-align: center;
}


#hour,#min,#sec,.circle,#al{
    background-color: #ffffff;
    border-radius: 12px;
    position: absolute;
    
    transform-origin: bottom;
    
}

.circle{
    height: 3%;
    width: 3%;
    background: rgb(255, 255, 255);
    left: 49%;
    top: 48%;
    z-index: 10;
}


.alarm{
    position: relative;
    /* top: 30vh; */
    bottom: 0;
    

    
    
}

#al{
    height: 31%;
    width: 1.3%;
    background-color: rgb(252, 252, 105);
    opacity: 0.8;
    /* z-index: 100; */
    top: 19%;
    left: 49.9%;
   
}

.inp{
    height: 5vw;
    width: 10vw;
    font-size: 1vw;
    margin: 0.5vw;
    text-align: center;
}
#hour{
    top: 23.5%;
    left: 49.7%;
    width: 1.5%;
    height: 26%;
    background-color: rgb(255, 255, 255);
    z-index: 1;
    
    
}

#min{
    width: 1%;
    height: 28.5%;
    top: 21%;
    left: 50%;
    
}

#sec{
    background-color: red;
    width: 0.5%;
    height: 30.5%;
    top: 19%;
    left: 50%;
    z-index: 9;
    
}



.clock{
    position: relative;
    width: 40vw;
    height: 40vw;
    background-color: violet;
    background: url(BCLOCK.jpg);
    background-size: cover;
    margin: auto;
    background-size: 100%;
    
}