:root {
	--iambp-width: 600px;
}

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  width: 100vw;
  background: #18191f;
  overflow: hidden;
}
.hello {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
}
.i,
.am,
.bp {
  font-size: 16em;
  font-family: Babylonica;
  background: transparent;
  color: #fff;
  margin: 0 40px;
  animation: animate 3s linear infinite;
  text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
    0 0 200px #0072ff;
  padding: 0;
  width: var(--iambp-width);

}
.i {
    animation:
    animate 3s linear infinite,
    expand_contract 35s linear infinite;
    text-align: left;
}
.am {
    animation: animate 3s linear 0.3s infinite;
    text-align: center;
}
.bp {
    animation:
    animate 3s linear 0.7s infinite,
    expand_contract 37s linear infinite;
    text-align: right;
}

@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes expand_contract {
	0%, 100% {
	    width: var(--iambp-width);
	  }
	  50% {
	    width: 100%;
	  }
}