body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    margin-top: 250px;
    font-size: 30px;
    background-color: rgb(248, 235, 208);
}

.main {
    height: 450px;
    width: 450px;
    background-color: rgb(191, 192, 192);
    border-radius: 50%;

    display: flex;
    justify-content: center;
    border: 7px solid rgb(16, 17, 17);
}
.container{
    display: flex;
    margin: 20px;
    height: 400px;
    width: 400px;
    justify-content: center;
    background-color: rgb(140, 213, 223);
    border-radius: 50%;
    border: 4px solid rgb(5, 76, 82);
    position: relative;    
}

.one{
    position: absolute;
    top: 30px;
    right: 108px;
}

.two{
    position: absolute;
    top: 90px;
    right: 60px;
}

.three{
    position: absolute;
    top: 155px;
    right: 38px;
}


.four{
    position: absolute;
    bottom: 90px;
    right: 60px;
}

.five{
    position: absolute;
    bottom: 30px;
    right: 108px;
}

.six{
    position: absolute;
    bottom: 2px;
    right: 192px;
}

.seven{
    position: absolute;
    bottom: 30px;
    left: 108px;
}

.eight{
    position: absolute;
    bottom: 90px;
    left: 60px;
}

.nine{
    position: absolute;
    top: 155px;
    left: 38px;
}

.ten{
    position: absolute;
    top: 90px;
    left: 60px;
}

.eleven{
    position: absolute;
    top: 30px;
    left: 108px;
}

.twelve{
    position: absolute;
    top: 2px;
    right: 182px;
}

.hour{
    width: 9px;
    height: 75px;
    background-color: black;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;

    position: absolute;
    bottom: 186px;
    right: 214px;

    transform: rotate(330deg);
}

.minute{
    width: 7px;
    height: 105px;
    background-color: black;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;

    position: absolute;
    top: 202px;
    right: 198px;

    transform: rotate(180deg);
}

.second{
    width: 3px;
    height: 140px;
    background-color: rgb(65, 9, 77);
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;

    position: absolute;
    top: 65px;
    left: 200px;

    transform: rotate(90deg);
    transform-origin: bottom center;
    animation-name: second-animation;
    animation-duration: 60s;
    animation-iteration-count: infinite linear;
    /* animation: second-animation 60s linear infinite; */
}

.main:hover{
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(18, 99, 99, 0.7), 0 0 40px rgba(18, 99, 99, 0.5), 0 0 50px rgba(18, 99, 99, 0.3);
}

@keyframes second-animation{
    from{
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}