@import url('https://fonts.googleapis.com/css?family=Staatliches');

:root {
--color-1: red;	
--color-2: blue;	
--length: 4s; /* Per div animation, not total. Try from 50ms to 8s to alter effect.  */	
}

/* Non-essential, layout */
.sucks {
  background: #111;
  font-weight: 700;
  overflow: hidden;
  font-family: 'Staatliches', sans-serif;
}

.sucks section{
  height: 100vh;
font-size:4em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Text containers with animations */
.sucks div {
  position: absolute;
  margin: 2vh 0;
  left: 10vw;
  width: 80vw;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  color: var(--color-1);
  animation: switch calc(var(--length) * 6) linear infinite; 
}

/* Delays each div & adds color */
.sucks div:nth-child(2) { animation-delay: calc(var(--length))}
.sucks div:nth-child(3) { animation-delay: calc(var(--length) *2)}
.sucks div:nth-child(4) { animation-delay: calc(var(--length) * 3)}
.sucks div:nth-child(5) { animation-delay: calc(var(--length) * 4)}
.sucks div:nth-child(6) { animation-delay: calc(var(--length) * 5)}

/* Animatiomn applies to each dive & loops */
@keyframes switch {
    0% { opacity: 0; filter: blur(20px); transform:scaleX(4) scaleY(.8);  color: var(--color-1)}
    3% { opacity: 1; transform:scaleX(.8) scaleY(1.2)}
    4% { opacity: 1; transform:scaleX(1.1) scaleY(.9); color: var(--color-2)}
    7% { opacity: 1; transform:scaleX(.9) scaleY(1.1); color: var(--color-2)}
    10% { opacity: 1; filter: blur(0); transform:scale(1); color: var(--color-2)}   
    13% { opacity: 1; filter: blur(0)}
    40% { opacity: 0; filter: blur(4px); transform:scale(.8)}
    80% { opacity: 0; transform: scale(.8)}
    100% { opacity: 0}
}


@media screen and (min-width: 867px) {
.sucks {  font-size:2em }
}