/* progress bar */
.scroll-progress-container {
    position: fixed;
    top: -10px;
    left: 0px;
    transform-origin:0 0;
    width: 100vh;
    /* height: var(--s5-8); */
    background:rgba(0,0,0,0.05);
    transform: rotate(90deg) translate(0%, -50%);
    transform-origin: 0;
    /* display: none; */
    z-index: 2;
    display: flex;
    padding:var(--s3-5) 0;
     
}
.scroll-progress-container:before {
    position:absolute;
    inset:0;
    content:"";
    background:var(--main-text-colour);
    mix-blend-mode:multiply;
    opacity:0.05;

}
.progress-bar-fill {
    width: 0;
    height: calc(var(--s3-5) * 0.5);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%);
    transition: width 0.15s ease-out; /* Smooths out the increments */
    will-change: width;
    border-radius: var(--s5-8);
    filter: drop-shadow(0px 0px 0.5px var(--dark-grey));
    /*border: 0.5px solid rgba(255, 255, 255, 0.5);*/
    /* opacity: 0.5; */
}
/* /progress bar */