.container {
    justify-content: center;
    text-align: center;
}

#hour-hand, #minute-hand, #second-hand, .circle, .marker{
    position: absolute;
}
#hour-hand, #minute-hand, #second-hand, .marker{
    left: 200px;
}
.circle {
    text-align: center;
    width: 400px;
    height: 400px;
    border: 1px solid black;
    border-radius: 50%;
    top: 20px;
    left: 440px;
}
.marker{
    top: 3px;
    width: 10px;
    height: 20px;
    border-radius: 2px;
    background: black;
    transform-origin: 5px 197px;
}

.marker:nth-child(2){
    transform: rotate(30deg);
}
.marker:nth-child(3){
    transform: rotate(60deg);
}
.marker:nth-child(4){
    transform: rotate(90deg);
}
.marker:nth-child(5){
    transform: rotate(120deg);
}
.marker:nth-child(6){
    transform: rotate(150deg);
}
.marker:nth-child(7){
    transform: rotate(180deg);
}
.marker:nth-child(8){
    transform: rotate(210deg);
}
.marker:nth-child(9){
    transform: rotate(240deg);
}
.marker:nth-child(10){
    transform: rotate(270deg);
}
.marker:nth-child(11){
    transform: rotate(300deg);
}
.marker:nth-child(12){
    transform: rotate(330deg);
}

#hour-hand{
    background: red;
    height: 100px;
    width: 10px;
    top: 100px;
    transform-origin: 5px 100px;
    z-index: 3;
}

#minute-hand, #second-hand{
    height: 200px;
    width: 10px;
    transform-origin: 5px 200px;
}
#minute-hand{
    background: rgb(255, 230, 2, 0.8);
    z-index: 1;
}
#second-hand{
    background: rgba(1, 1, 107, 0.50);
    z-index: 2;
    
}

#digital-box{
    position: relative;
    padding: 2rem;
    top: 430px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 3rem;
}