/* 
  .text {
    text-align: center;
    /* margin-bottom: 10vw; */
  /* }
  
  .text p {S
    margin-top: 5vw;
  } */

  .loader-bar {
    position: absolute;
    /* align-items: center;
    text-align: center; */


    bottom:10px;
    right:20px;
    display: grid;
    grid-template-columns: repeat(3,6px) repeat(10, 6px 6px) repeat(2,6px);
    grid-template-rows: repeat(6,6px);
  }
  
  .block-border {
    background-color: rgb(255, 255, 255);
  }
  
  .block-meter {
    animation: fade 1s linear;
    animation-iteration-count: infinite;
    background-color: rgb(255, 36, 84);
  }
  
  @keyframes fade {
    0%,100% { opacity: 0 }
    50% { opacity: 1 }
  }

  .block-border:nth-of-type(1) {
    grid-row: 1;
    grid-column: 3/-3;
  }
  
  .block-border:nth-of-type(2) {
    grid-row: -2;
    grid-column: 3/-3;
  }
  
  .block-border:nth-of-type(3) {
    grid-row: 3/5;
    grid-column: 1;
  }
  
  .block-border:nth-of-type(4) {
    grid-row: 3/5;
    grid-column: -2;
  }
  
  .block-border:nth-of-type(5) {
    grid-row: 2;
    grid-column: 2;
  }
  
  .block-border:nth-of-type(6) {
    grid-row: 2;
    grid-column: -3;
  }
  
  .block-border:nth-of-type(7) {
    grid-row: 5;
    grid-column: 2;
  }
  
  .block-border:nth-of-type(8) {
    grid-row: 5;
    grid-column: -3;
  }
  
  .block-meter:nth-of-type(9) {
    grid-row: 3/5;
    grid-column: 4;
  }
  
  .block-meter:nth-of-type(10) {
    grid-row: 3/5;
    grid-column: 6;
  }
  
  .block-meter:nth-of-type(11) {
    grid-row: 3/5;
    grid-column: 8;
  }
  
  .block-meter:nth-of-type(12) {
    grid-row: 3/5;
    grid-column: 10;
  }

  .block-meter:nth-of-type(13) {
    grid-row: 3/5;
    grid-column: 10;
  }
  
  .block-meter:nth-of-type(14) {
    grid-row: 3/5;
    grid-column: 10;
  }
  .block-meter:nth-of-type(15) {
    grid-row: 3/5;
    grid-column: 10;
  }
  
  
  
  /* .block-meter:nth-of-type(13) {
    grid-row: 3/5;
    grid-column: 12;
    opacity: 0;
    animation: blinky1 2s linear forwards;
  }
  
  .block-meter:nth-of-type(14) {
    grid-row: 3/5;
    grid-column: 14;
    opacity: 0;
    animation: blinky1 2s 4s linear forwards;
  }
  
  .block-meter:nth-of-type(15) {
    grid-row: 3/5;
    grid-column: 16;
    opacity: 0;
    animation: blinky1 2s 8s linear forwards;
  }
  .block-meter:nth-of-type(16) {
    grid-row: 3/5;
    grid-column: 18;
    opacity: 0;
    animation: blinky1 2s 8s linear forwards;
  } */
  /* .block-meter:nth-of-type(16) {
    grid-row: 3/5;
    grid-column: 18;
    opacity: 0;
    animation: blinky1 3s 14s linear forwards;
  }
   */
  @keyframes blinky1 {
    99% {opacity: 0;}
    100% {opacity: 1;}
  }
  
  @keyframes blinky2 {
    49% {opacity: 0;}
    50% {opacity: 1;}
    90% {opacity: 1;}
  }