body{
    background: #242524;
    font-family: Arial, Helvetica, sans-serif;
    
}

header{
    color: aliceblue;
    text-align: center;
}

/* */
img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -125px;
}


  /* Loader con puntos*/
  .dots-bars-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 120px -20px 0 -20px;

    width: 40px;
    height: 15px;
    --c: linear-gradient(#ffbc04 0 0);
    --r1: radial-gradient(farthest-side at bottom,#ffbc04 93%,#ffbc04);
    --r2: radial-gradient(farthest-side at top   ,#ffbc04 93%,#ffbc04);
    background: 
      var(--c) ,
      var(--r1),
      var(--r2),
      var(--c) ,  
      var(--r1),
      var(--r2),
      var(--c) ,
      var(--r1),
      var(--r2);
    background-repeat: no-repeat;
    animation: db1 1s infinite  alternate;
  }
  
  @keyframes db1 {
    0%,10% {
      background-size: 8px 0,8px 4px,8px 4px;
      background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
   }
   90%,100% {
      background-size: 8px 100%,8px 4px, 8px 4px;
      background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
   }
  }