*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  font:20px/1.1em arial, sans-serif;
  background:lightgray;
  overflow: hidden;
  
}

main{
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  filter: hue-rotate(0deg);
  animation-name: animated-hue;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

div{
  display: inline-flex;
  width: 2px;
  height: 100vh;
  opacity: 70%;
  background: rgb(0,41,255);
  background: linear-gradient(0deg, rgba(0,41,255,0.5) 0%, rgba(238,45,253,0.5) 100%);
}

div:nth-child(even){
  background: rgb(53, 255, 0);
  background: linear-gradient(0deg, rgba(250,17,156,0.5) 100%, rgba(0,255,53,0.5) 0%, );
}

div:nth-child(3n){
  background: rgb(247,255,0);
  background: linear-gradient(0deg, rgba(247,255,0,0.5) 0%, rgba(108,17,250,0.5) 100%, rgba(247,255,0,0.5) 0%);
}

@keyframes animated-hue{
  0%{
    filter: hue-rotate(0deg);
  }50%{
    filter: hue-rotate(180deg);
  }100%{
    filter: hue-rotate(0deg);
  }
}