*{
    margin: 0;
    padding: 0;
box-sizing: border-box;
}
 body{
        background: url(2.jpg) no-repeat center center fixed;
        background-size:cover;
        
 }

.container {
    background-color: #ffdd00;
    /* border: 2px solid #ec1de2; */
    height: 263px;
    width: 263px;
    border-radius: 151px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: 2px 3px 20px #665800, -15px -15px 30px #ffff11;
}

.clock{
width: 225px;
height: 225px;
/* border: 2px solid black; */

position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 151px;
    background: url("1.png");
    background-size: cover;
    box-shadow: inset 15px 15px 30px  #665800,inset -15px  -15px 30px  #ffff00;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hour{
    width: 75px;
    height: 75px;
    /* background-color: black; */
}
.min{
    width: 98px;
    height: 98px;
    /* background-color: black; */
}
.sec{
    width: 114px;
    height: 114px;
    /* background-color: black; */
}
.hour,.min,.sec{
    /* border: 2px solid black; */
    position: absolute;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}


.clock::before{
content: " ";
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
border:2px solid white ;

}


.hour::before {
    position: absolute;
    content: " ";
    width: 10px;
    height: 36px;
    background-color: black;
    z-index: 13;
    border-radius: 50%;
}
.min::before {
    position: absolute;
    content: " ";
    width: 7px;
    height: 52px;
    background-color:black;
    z-index: 11;
    border-radius: 50%;
}
.sec::before {
    position: absolute;
    content: " ";
    width: 2px;
    height: 73px;
    background-color: black;
    z-index: 12;
    border-radius: 50%;
}