Code CSS

style.css

    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    :root{
        --p-width: 200px;
        --p-height: 200px;
        --button-width : 60px;
        --button-height : 60px;
        --primary-color: rgba(156, 90, 147, 0.295);
        --primary-hover: rgba(156, 90, 147, 0.486);
        --secondary-color:  rgba(156, 127, 90, 0.548);
        --background-settings: no-repeat center center / contain;
    }

    body
    {
        background-image: url('../assets/blue-sky.jpeg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .wraper{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .rec
    {
        width: 30%;
        height: 90%;
        border-radius: 2%;
        border: 1px ;
        box-shadow: 0px 0px 40px 20px
        rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .progress
    {
        width: var(--p-width);
        height: var(--p-height);
        border-radius: 50%;
        border: solid 11px rgba(235, 147, 34, 0.856);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: x-large;
    }

    .outer{
        width: var(--p-width);
        height: var(--p-height);
        padding: 10px;
        border: 0px solid rgba(156, 127, 90, 0.548);
        border-radius: 100%;
        box-shadow: 6px 6px 10px -1px rgba(0,0,0,.15), 
                -6px -6px 10px -1px rgb(255, 255, 255), 
                6px -6px 10px -1px rgb(255, 255, 255);
    }

    .inner{
        width: 180px;
        height: 180px;
        padding: 15px;
        border-radius: 100%;
        border: 0px solid rgba(156, 127, 90, 0.548);
    }

    .timer
    {
        background-color: var(--primary-color);
        width: 150px;
        height: 150px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: x-large;
        gap: 5px;
    }

    .timer p,
    .timer span{
        font-size: 2.5rem;
        font-weight: bold;
    }