<div class="container">
  <div class="item" style="font-size:20vw;">C</div>
  <div class="item" style="font-size:20vw;">h</div>
  <div class="item" style="font-size:20vw;">e</div>
  <div class="item" style="font-size:20vw;">m</div>
  <div class="item" style="font-size:20vw;">i</div>
  <div class="item" style="font-size:20vw;">c</div>
  <div class="item" style="font-size:20vw;">a</div>
  <div class="item" style="font-size:20vw;">l</div>
  <div class="item" style="font-size:20vw;">B</div>
  <div class="item" style="font-size:20vw;">r</div>
  <div class="item" style="font-size:20vw;">o</div>
  <div class="item" style="font-size:20vw;">t</div>
  <div class="item" style="font-size:20vw;">h</div>
  <div class="item" style="font-size:20vw;">e</div>
  <div class="item" style="font-size:20vw;">r</div>
  <div class="item" style="font-size:20vw;">s</div>
</div>

$celeste:#19fffd;
$blu:#151463;
$viola:#673ab7;
$nero:#000;

body{
  background-color:#000;
  
  .container {
    align-content: center;
    background-color:#000;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    grid-gap: 10px;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20vw;
      background-color:$nero;
      color:$celeste;
      font-family: 'Space Mono', monospace;
      font-family: 'Nova Mono', monospace;
      animation: light .3s infinite;
    }
  }
}

@keyframes light{
  0%,100%{
    background-color:$nero;
    color:$celeste;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  50%{
    background-color:$celeste;
    color:$nero;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
}

@for $i from 0 to 17 {
  .container .item:nth-child(#{$i}) { animation-delay: $i*.1s;}
}