/*بـسـم الله الـرحـمـن الـرحـیـم*/





*{
    font-family: vazir;
}



.timer-card{

    

    width:100%;
    
    max-width:420px;
    
    margin: 140px auto;
    
    padding:35px;
    
    direction:rtl;
    
    text-align:center;
    
    
    background:
    
    linear-gradient(
        145deg,
        #07111d,
        #020617
    );
    
    
    border-radius:30px;
    
    border:1px solid rgba(255,255,255,.08);
    
    box-shadow:
    
    0 20px 50px rgba(0,0,0,.4);
    
    }
    
    
    
    
    .timer-card h2{
    
    color:white;
    
    font-size:26px;
    
    margin-bottom:30px;
    
    }
    
    
    
    
    .timer-display{
    
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
    
    font-size:70px;
    
    font-weight:800;
    
    color:#22c55e;
    
    letter-spacing:3px;
    
    margin-bottom:35px;
    
    font-family:monospace;
    
    }
    
    
    
    
    
    .timer-buttons{
    
    display:flex;
    
    gap:12px;
    
    justify-content:center;
    
    }
    
    
    
    
    
    .timer-buttons button{
    
    border:none;
    
    cursor:pointer;
    
    padding:12px 22px;
    
    border-radius:15px;
    
    font-size:15px;
    
    font-weight:bold;
    
    transition:.3s;
    
    color:white;
    
    background:#172033;
    
    }
    
    
    
    
    
    .timer-buttons button:hover{
    
    transform:translateY(-3px);
    
    }
    
    
    
    
    
    #startTimer{
    
    background:#22c55e;
    
    color:#052e16;
    
    }
    
    
    
    #pauseTimer{
    
    background:#f59e0b;
    
    }
    
    
    
    #resetTimer{
    
    background:#ef4444;
    
    }
    
    
    
    
    
    @media(max-width:500px){
    
    
    .timer-card{
    
    
    
    padding:25px;
    
    }
    
    
    
    .timer-display{
    
    font-size:55px;
    
    }
    
    
    .timer-buttons{
    
    flex-direction:column;
    
    }
    
    
    .timer-buttons button{
    
    width:100%;
    
    }
    
    
    }