#progress-container {
    position: relative;           /* stays in place wherever you put it */
    margin-top: 350px !important;
    width: 300px;                 /* fixed width */
    height: 22px;                 /* enough for bar + text overlay */
    margin: 0 auto;               /* center horizontally */
    background: rgba(0, 0, 0, 1); /* semi-transparent black background */
    box-shadow: inset 0px 0px 15px rgba(140, 140, 140, 0.7); 
    border-radius: 999px;        
    overflow: hidden;
}

#page-progress {
    width: 0%;
    height: 20px;
    background: linear-gradient(to bottom, rgba(170,0,195,1), rgba(70,0,79,1)); /* progress bar colours */
    margin: 2px;
    border-radius: 999px;
    position: absolute;           /* absolute inside container */
    left: 0;                      /* flush to left */
    top: 0px;                    /* center vertically inside container */
}

#progress-text {
    position: absolute;
    top: 50%;                     /* vertically center over container */
    left: 50%;                    /* horizontally center */
    transform: translate(-50%, -50%);
    color: white;
    margin-top: 2px;
    font-size: 18px;
    font-weight: bold;
    font-family: "Arial";
    text-shadow: 0 0 3px black;   /* 3px black shadow behind text */
    pointer-events: none;
    user-select: none;
    z-index: 2;                   /* ensure text is on top of bar */
}