* {
    box-sizing: border-box;
}
html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    background-color: #1A1A1A;
    margin: 0 auto;
}


.initial-loader {
    --progress-bar-height: 20px;
    --progress-bar-inner-offset: 4px;

    min-height: 50dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}
.initial-loader img {
    margin-bottom: 100px;
}
.initial-loader #loader-text-label {
    text-align: center;
    color: #000;
}
.page-loader-container {
    width: min(300px, 90dvw);;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.initial-loader #page-loader {
    position: relative;
    width: min(300px, 70dvw);
    height: var(--progress-bar-height);
    border-radius: 12px;
    border: 1px solid #868e96;
    display: flex;
    align-items: center;
    /* background-color: red; */
}
.initial-loader #page-loader #loader-inner {
    position: absolute;
    height: calc(var(--progress-bar-height) - var(--progress-bar-inner-offset));
    margin: 0 calc( var(--progress-bar-inner-offset) / 2 );
    border-radius: 20px;
    width: 20%;
    background-color: #5571FF;

    animation-name: loader-inner;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes loader-inner {
    0% {
        left: 0;
    }
    100% {
        left: calc( 100% - 20% );
    }
}