style.css

*{
    /* margin: 0;
    padding: 0; */
    box-sizing: border-box;
}
body{
    height: 100vh;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin:0;
    /* background-color: rgb(54, 54, 54); */
}
.container{
    text-align: center;
    width: 50%;
}

.progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: 0 auto; 
    margin: 20px;
  }
  .progress-container::before{
    content: '';
    position: absolute;
    background-color: rgb(196, 196, 199);
    height: 5px;
    width: 100%;
    transform: translateY(-50%);
    z-index: -1;
    
  }
  .progress-bar{
    position: absolute;
    background-color: rgb(116, 137, 223);
    height: 5px;
    width: 0%;
    transform: translateY(-50%);
    z-index: -1;
  }
  .circle{
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: rgb(195, 191, 191);
    color: aliceblue;
    align-items: center;
    justify-content: center;
    border: 1px solid grey;
    transition: .4s ease;
  }
  .circle.active{
    background-color: rgb(90, 90, 198);
  }

  .btn{
    margin: 5px;
    outline: none;
    cursor: pointer;
  }
  .btn:disabled{
    cursor: not-allowed;
  }