@charset "UTF-8";
/* CSS Document */

:root {
 --typing-speed: .5s;        /* Time it takes to type one line */
  --delay-per-line: 0s;       /* Pause before next line starts */
  --steps: 44;        
}

.typewriter {
  list-style: none;
  padding: 0;
  font-family: monospace;
    font-size:10px


}

.typewriter li {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  display: inline-block;
  animation: typing var(--typing-speed) steps(var(--steps), start) forwards;
  animation-delay: calc(var(--i) * (var(--typing-speed) + var(--delay-per-line)));
}

/* Cursor */
.typewriter li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 5px;
  background: #ff0007;
    animation: 
    move-cursor var(--typing-speed) steps(var(--steps)) forwards,
    blink 0.2s step-end 10,
    fadeout 0.01s linear forwards;

  animation-delay: 
    calc(var(--i) * (var(--typing-speed) + var(--delay-per-line))),      /* move-cursor */
    calc(var(--i) * (var(--typing-speed) + var(--delay-per-line))),      /* blink */
/*     calc(var(--i) * (var(--typing-speed) + var(--delay-per-line)) + var(--typing-speed) + 2.5s);  fade after blink (5 blinks × 0.5s) */
    calc(var(--i) * (var(--typing-speed) + var(--delay-per-line)) + var(--typing-speed) + 0.5s)
}    

/* Typing width grow */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* Cursor moves with text */
@keyframes move-cursor {
  from { left: 0; }
  to   { left: calc(var(--chars) * 0.8ch - 0.1ch); }
}

/* Blinking cursor */
@keyframes blink {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@keyframes fadeout {
  to {
    opacity: 0;
      visibility: hidden;
     
     
  }
}



    







    




.blocks::before {
  display: inline-block;
  margin-right: 0.5em;
  font-family: monospace, monospace;
  white-space: pre;      /* enable \A line breaks */
  content: " █ ";  /* 3 lines with \A */
  animation: blockGroupCycle 1s steps(4) infinite;
  vertical-align: top;   /* aligns blocks with text baseline */
  line-height: 1em;
  font-size: 8px;
}

@keyframes blockGroupCycle {
  0% {
    content: "█ █ ";
  }
 33% {
    content: "█ █ █";
  }
  66% {
    content: "█ █ █ █";
    
  }
  100% {
    content: "█ █ █ █ █";
  }
}


.bar{

  font-size:16px;
  line-height:1;
}

.barR{

  font-size:9px;
  line-height:1;
}

.barR:nth-child(2) {

  font-size:15px
}


.barR:nth-child(1)::before { 
  animation-delay: 0s;
                           
}

.bar::before {
  content: "█";
  animation: growBar 1s steps(6) alternate infinite;
  white-space: pre;
  letter-spacing: 0.3ch;
  
  opacity:0.3
}

@keyframes growBar {
    0%     { content: "█"; }
  16.66%   { content: "██"; }
  33.33%   { content: "██ █"; }
    50%    { content: "██ ██"; }
    66.66% { content: "██ ██ █"; }
    83.33% { content: "██ ██ █ █"; }
    100%   { content: "██ ██ █ █"; }
}

.barR::before {
  content: "█";
  animation: RandomBar 1s steps(1) alternate infinite;
  white-space: pre;

  letter-spacing: 0.3ch;
  
}

.barR:nth-child(2)::before { animation-delay: 0.5s; }

@keyframes RandomBar {
  0% {
    content: "▖ ▞ ▙ ▛ ▝ ▜ ▚ ▗ ▘ ▟";
  }
  16.66% {
    content: "▛ ▗ ▝ ▙ ▚ ▟ ▘ ▜ ▖ ▞";
  }
  33.33% {
    content: "▙ ▜ ▘ ▟ ▚ ▖ ▝ ▗ ▞ ▛";
  }
  50% {
    content: "▗ ▙ ▝ ▞ ▜ ▛ ▚ ▟ ▘ ▖";
  }
  66.66% {
    content: "▝ ▟ ▜ ▗ ▞ ▚ ▖ ▙ ▘ ▛";
  }
  83.33% {
    content: "▞ ▘ ▙ ▖ ▟ ▝ ▛ ▚ ▗ ▜";
  }
  100% {
    content: "▗ ▞ ▜ ▘ ▙ ▖ ▝ ▟ ▚ ▛";
  }
}





.progress-container {
width: 80%;
    height: 20px;
    background: #12000170;
    border: 1px solid #ff0007;
    overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #ff0007;
  transition: width 0.05s linear;
    
      width: calc(var(--mouseX, 0) * 100%) !important;

}


.progress-bar:nth-of-type(1) {
  /* styles for the first .progress-bar */
    transition: width 1.05s linear;
}

.progress-bar:nth-of-type(2) {
  /* styles for the second .progress-bar */
    transition: width 3.05s linear;
}

.progress-bar:nth-of-type(3) {
  /* styles for the third .progress-bar */
    transition: width 2.05s linear;
}