body{
    background-image: url(background.avif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#clockContainer{
    top: 3vw;
    position: relative;
    width: 15vw;
    height: 15vw;
    background: url(clock.png) no-repeat;
    background-size: 100%;
    margin: auto;
    opacity: 0.8;
    /* border: 2px solid red; */
}

#hour, #minute, #second{
    position: absolute;
    background-color: black;
    border-radius: 10px;
    transform-origin: bottom;
}
#hour {
    height: 26%;
    width: 1.8%;
    top: 24%;
    left: 48.9%;
    opacity: 1;
    background-color: rgb(7, 1, 61);

}
#minute {
    height: 32%;
    width: 1.2%;
    top: 17%;
    left: 49%;
    opacity: 0.7;
    background-color: rgb(7, 1, 61);
}

#second {
    background-color: red;
    height: 38%;
    width: 0.8%;
    top: 12%;
    left: 49.4%;
    opacity: 0.7;
}

#clock-time-digit {
    direction: ltr;
    color: black;
    font-size: 30px;
    margin-top: 70px;
    font-weight: bold;
    background: rgb(255, 255, 255, 0.5);
    padding: 4px 0px;
}

@media screen and (max-width: 1200px) {
    #clockContainer {
        width: 22vw;
        height: 22vw;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1299px) {
    #clockContainer {
        width: 19vw;
        height: 19vw;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1399px) {
    #clockContainer {
        width: 18vw;
        height: 18vw;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
    #clockContainer {
        width: 14vw;
        height: 14vw;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1800px) {
    #clockContainer {
        width: 12vw;
        height: 12vw;
    }
}

@media screen and (min-width: 1800px) and (max-width: 2000px) {
    #clockContainer {
        width: 11vw;
        height: 11vw;
    }
}

@media screen and (min-width: 2000px) and (max-width: 2200px) {
    #clockContainer {
        width: 10vw;
        height: 10vw;
    }

    #clock-time-digit {
        margin-top: 90px;
        background: orange;
    }
}

@media screen and (min-width: 2200px) and (max-width: 2400px) {
    #clockContainer {
        width: 10vw;
        height: 10vw;
    }

    #clock-time-digit {
        margin-top: 100px;
    }
}

@media screen and (min-width: 2400px) and (max-width: 2900px) {
    #clockContainer {
        width: 9vw;
        height: 9vw;
    }

    #clock-time-digit {
        margin-top: 120px;
    }
}

@media screen and (min-width: 2900px) and (max-width: 3200px) {
    #clockContainer {
        width: 8vw;
        height: 8vw;
    }

    #clock-time-digit {
        margin-top: 120px;
    }
}

@media screen and (min-width: 3200px){
    #clockContainer {
        width: 7vw;
        height: 7vw;
    }

    #clock-time-digit {
        margin-top: 120px;
    }
}