#clockContainer{
    position: relative;
    margin: 50px auto;
    height: 40vw;
    width: 40vw;
    /* height: 440px;
    width: 440px; */
    background: url('clock.png') no-repeat;
    background-size: 100%;
}

#hour, #minute, #second{
    position: absolute;
    background: black;
    border-radius: 10px;
    transform-origin: bottom;
}

#hour{
    width: 1.7%;
    height: 23%;
    top: 27%;
    left: 48.9%;
    opacity: 0.9;
}

#minute{
    width: 0.7%;
    height: 37%;
    top: 13%;
    left: 49.4%;
    opacity: 0.9;
    /* display: none; */
}

#second{
    width: 0.2%;
    height: 28%;
    top: 22%;
    left: 49.67%;
    opacity: 0.9;
    /* display: none; */
}

@media (width<=1400px){
    #clockContainer {
        top: 50px;
    }
}

@media (width<=1100px){
    #clockContainer {
        top: 100px;
    }
}

@media (width<=800px){
    #clockContainer {
        top: 150px;
    }
}

@media (width<=500px){
    #clockContainer {
        top: 200px;
    }
}

@media (width<=400px){
    #clockContainer {
        top: 250px;
        margin: auto;
    }
}