:root {
    --progPercent; /*[1st ProgressBar] Variable used to store progress from JS.*/

    /*[2nd ProgressBar] Variables*/
    --progPercentTwo;
    --progColourOne;
    --progColourTwo;
    --colourMixPercent;
}

section {
    width: 100%;
    display: block;
    margin-left: 20%;
    text-align: center;
    height: 100%;
    position: relative;
}

/* 2nd Progress Bar */
div.progress-bar-container-two {
    background: black;
    height: 40px;
    width: 100%;
    display: block;
    margin: 0 -20%;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    position: relative;
    background: linear-gradient(to right,
    var(--progColourOne) 0%,
    var(--progColourTwo) var(--colourMixPercent),
    var(--progColourTwo) var(--progPercentTwo),
    rgba(0,0,0,0) var(--progPercentTwo),
    rgba(0,0,0,0) 100%);
}

div.progress-info-two {
    color: rgba(0,0,0,.6);
    height: 100px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 100%;
    font-weight: bolder;
    border: 5px solid transparent;
    border-radius: 0;
    line-height: 30px;
}