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

:root{
    --line-border-fill: #3498db;
    --line-border-empty: #e0e0e0;
}


.container{
    /* background-color: yellow; */
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.progress_container{
    /* background-color: crimson; */
    width: 30%;
    height: 15vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.progress{
    background-color:var(--line-border-fill);
    height: 0.3vw;
    width:0%;
    position: absolute;
    z-index: -1;
    
}
.progress_container::before{
    content: '';/* this line is important */
    background-color: var(--line-border-empty);
    height: 0.3vw;
    width:30vw ;
    position: absolute;
    z-index: -1;
    
}

.circle{
    border:3px solid #e0e0e0;
    border-radius: 50%;
    width: 2vw;
    height:2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #999;
}


button{
    padding:0.5vw 2vw;
    background-color: lightskyblue;
    border: none;
    border-radius: 5px;

}


.circle.active{
    border-color:var(--line-border-fill);
}