.banner {

    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgb(18, 66, 101), rgb(143, 97, 231), rgb(20, 136, 136));
    
    width: 100%;
    height: 150px;
    overflow: hidden;
    margin-bottom: 2em;
}

.banner h1 {
	font-family: 'Cormorant Garamond', serif;
	font-size: 34px;
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
    color: #eeeeee;
	white-space: nowrap;
    overflow: hidden;
}



.banner h1:nth-child(1) {
    width: 18em;
    -webkit-animation: type 3.5s steps(30, end), blink .3s step-end infinite alternate;
    animation: type 3.5s steps(30, end), blink .3s step-end infinite alternate;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}



@keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: transparent;
  }
}