*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color:black;
    display: flex;
    
    
   
    
}

.mobile span{
   
    :root{
        --bg-color:#1f242d;
        --seceond-bg-color:#323946;
        --main-color:#7cf03d;
        --white-color:#fff;
        --disabled-color:#fff3;
        --transparant-color:var(--transparant-color);
        
    
    }
   
    .container{
        position: relative;
        padding:20px;
        margin: 0 auto;
        
        top: 150px;
        
        
    
    }
    .watch{
        position: relative;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: vst(--bg-color);
        border: 8px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0px 0px 0px rgba(243, 2, 2, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    .watch span{
        position: absolute;
        transform: rotate( calc(30deg*var(--i)));
        text-align: center;
        inset: 15px;
    }
    .watch span b{
        transform: rotate(calc(-30deg * var(--i)));
        display: inline-block;
        font-size: 28px;
    }
    .watch::before{
        content: "";
        position: absolute;
        width: 10px;
        height: 10px; 
        border-radius: 50%; 
       background-color: var(--white-color);
       z-index: 1;
    
    
    }
    .kata{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    
    /* watch center style */
    
    .min{
        position: absolute;
        width: 5px;
        height: 100px;
        
        border-radius: 9px;
        background-color: green;
    }
    .hour{
        background-color: rgb(128, 0, 60);
        position: absolute;
        width: 5px;
        height: 70px;
        
        border-radius: 9px;
    }
    .sec{
        background-color: rgb(180, 33, 8);
        position: absolute;
        width: 5px;
        height: 120px;
        
        border-radius: 9px;
    }
    .title{
        position: relative;
        justify-content: first baseline;
        top: 260px;
    }
    
}
.loader{
    visibility: hidden;
    
}