.container
  .flex
    .flex-col
      .black.growup.delay-1
      .bg-primary.centerize 
        span.scaleme.delay-1 E
      .black.growup.delay-1
    .flex-col
      .black-2.growup.delay-2
      .bg-secondary.centerize 
        span.scaleme.delay-2 V
      .black-2.growup.delay-2
    .flex-col
      .black.growup.delay-3
      .bg-primary.centerize 
        span.scaleme.delay-3 E
      .black.growup.delay-3
    .flex-col
      .black-2.growup.delay-4
      .bg-secondary.centerize  
        span.scaleme.delay-4 N
      .black-2.growup.delay-4
    .flex-col
      .black.growup.delay-5
      .bg-primary.centerize 
        span.scaleme.delay-5 T
      .black.growup.delay-5
  .flex
    .flex-col2
      .black.growup.delay-1
      .bg-secondary.centerize 
        span.scaleme.delay-1 H
      .black.growup.delay-1
    .flex-col2
      .black-2.growup.delay-2
      .bg-primary.centerize 
        span.scaleme.delay-2 O
      .black-2.growup.delay-2
    .flex-col2
      .black.growup.delay-3
      .bg-secondary.centerize 
        span.scaleme.delay-3 R
      .black.growup.delay-3
    .flex-col2
      .black-2.growup.delay-4
      .bg-primary.centerize 
        span.scaleme.delay-4 I
      .black-2.growup.delay-4
    .flex-col2
      .black.growup.delay-5
      .bg-secondary.centerize 
        span.scaleme.delay-5 Z
      .black.growup.delay-5
    .flex-col2
      .black-2.growup.delay-6
      .bg-primary.centerize 
        span.scaleme.delay-6 O
      .black-2.growup.delay-6
    .flex-col2
      .black.growup.delay-7
      .bg-secondary.centerize 
        span.scaleme.delay-7 N
      .black.growup.delay-7

@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
:root{
  --font1:"Audiowide";
  font-family:var(--font1);
  font-size:clamp(1rem,5rem,10rem);
}
*{
  box-sizing:border-box;
}
.container{
  width:100%;
  height:100vh;
  overflow:hidden;
}
/*Flex animation trick inspired by https://codepen.io/Maza-designDev/pen/KKdmyGb*/
.flex{
 display:flex;
 flex-wrap:nowrap;
 justify-content: space-around;
 width:100%;
 height:50vh;
}
.flex-col{
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width:calc(100% / 5);
  height:100%;
}
.flex-col2{
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width:calc(100% / 7);
  top:-1px; /*fix flashing in edge*/
  height:calc(100% + 1px);
  position:relative;  
}
.centerize{  
  text-align:center;
  display:grid;
  justify-content:center;
  align-content:center;
}
.red{
  background:red;
  width:100%;
  height:calc(100% / 3);
}
.green{
  background:green;  
  width:100%;
  height:calc(100% / 3);
}
.blue{
  background:blue;
  width:100%;
  height:calc(100% / 3);
}
.white{
  color:#111;
  background:#eee;
  width:100%;
  height:calc(100% / 3);
}
.black{
  color:#eee;
  background:#111111;
  width:100%;
  height:calc(100% / 3);
}
.black-2{
  color:#eee;
  background:#121212;
  width:100%;
  height:calc(100% / 3);  
}
.bg-primary{
  color:#eee;
  background:#5E0DAC;
  width:100%;
  height:calc(100% / 3);
}
.bg-secondary{
  background:#BFB730;
  width:100%;
  height:calc(100% / 3);  
}
.bg-trinary{
  background:#3B0470;
  width:100%;
  height:calc(100% / 3);
}
.bg-quaternary{
  background:#130873;
  width:100%;
  height:calc(100% / 3);
}

.growup{
  animation: growup 1s infinite alternate;
}
.scaleme{
  animation: scaleme 1s infinite alternate;
}

.delay-1{animation-delay:0.1s;}
.delay-2{animation-delay:0.2s;}
.delay-3{animation-delay:0.3s;}
.delay-4{animation-delay:0.4s;}
.delay-5{animation-delay:0.5s;}
.delay-6{animation-delay:0.6s;}
.delay-7{animation-delay:0.7s;}
.delay-8{animation-delay:0.8s;}

@keyframes growup{
  from{    
    height:calc(100% / 3);
  }
  to{    
    height:calc(100% / 1.5);
  }
}
@keyframes scaleme{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(2);    
    text-shadow:0px 4px 4px hsl(0 0% 0%/0.5);
  }
}