html{
    font-family: "Open Sans", sans-serif;
}
.main{
    background-color: #4C4C4C;
    width: 100vw;
    height: 94vh;
    display: grid;
    place-content: center;
}

.content-watch{
    width: 400px;
    height: 400px;
    background-color: #242424;
    border-radius: 50%;
    border: 12px solid #3A3A3A;
    display: grid;
    place-content: center;
}
.twist-edge{
    width: 350px;
    height: 350px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    position: relative;
    &::after{
        z-index: 0;
        content: "";
        width: 340px;
        height: 340px;
        left: calc(50% - 170px);
        top: calc(50% - 170px);
        position: absolute;
        background-color: #CD5050;
        border-radius: 50%;
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
        animation: spiner 9s infinite ; 
        rotate: 45deg;
        
    }
    &::before{
        z-index: 1;
        content: "";
        width: 320px;
        height: 320px;
        left: calc(50% - 160px);
        top: calc(50% - 160px);
        position: absolute;
        background-color: #242424;
        border-radius: 50%;
    }
    &:hover{
        border-block-end-color: transparent;
        transition: all 0.5s ;
    }
}

.watch{
    z-index: 2;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px dotted white;
    display: grid;
    place-content: center;
    font-size: 13px;
    color: white;
    .watch__info{
        display: flex;
        justify-content: space-between;
        .heart{
            width: 10px;
            height: 10px;
            fill: #CD5050;
            animation: throb 1s infinite;
        }
    }
    .watch__clock{
        font-size: 40px;
        font-weight: 700;
        line-height: 100%;

    }
    
    
}

@keyframes throb{   
    to{
        scale: 1;
    }
    from{
        scale: 1.5;
    }
}

@keyframes spiner {
    12.5%{
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
    25%{
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
    }
    37.5%{
        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
    }
    50%{
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }

    60.5%{
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }

    75%{
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }
    87.5%{
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }
    100%{
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}