<main>
  <div class="text bg0">
    AMAZING
  </div>  
</main>
<main>
  <div class="text bg0">
    TEXT EFFECTS
  </div>  
</main>

body {
  background: black;
  margin: 0;
}
main {
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: khaki;
}
.text {
  /* background: url(https://media.giphy.com/media/3o6Ztb45EYezY9x9gQ/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent; */
  font-size: 10rem;
  font-weight: bold;
  font-style: italic;
  font-family: serif;
}

.bg0 {
  background: url('https://media.giphy.com/media/3o6Ztb45EYezY9x9gQ/giphy.gif');
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg1 {
  background: url('https://media.giphy.com/media/OK5LK5zLFfdm/giphy.gif');
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg2 {
  background: url(https://media.giphy.com/media/d2jhlfIcetcLtfJm/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg3 {
  background: url(https://media.giphy.com/media/KxwBmuFgKJ9K/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg4 {
  background: url(https://media.giphy.com/media/EuwbSy46466Q0/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg5 {
  background: url(https://media.giphy.com/media/3xSZ9Bly2QWBy/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg6 {
  background: url(https://media.giphy.com/media/rwoMGeUUZXsre/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg7 {
  background: url(https://media.giphy.com/media/VOsA1oVVqV1VS/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg8 {
  background: url(https://media.giphy.com/media/pOLspHmrKmQmc/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg9 {
  background: url(https://media.giphy.com/media/SHV1O5bwQRgc0/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg10 {
  background: url(https://media.giphy.com/media/7dLeNp5gQTaSJSxTmy/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

.bg11 {
  background: url(https://media.giphy.com/media/1rPY8XIGWozEhm215a/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
}

let globalBG = 0;

let counter = 0;

function getIndex() {
  
  let bgIndex = Math.floor(Math.random() * 11) + 1;
  
  let bg = 'bg' + bgIndex;
  
  globalBG = bg;
  
  return bg;
  
  }

function changeFont() {
  
  // let bgIndex = getIndex();  
  
  let theText = document.getElementsByClassName('text');
  
  let bg = getIndex();
  
  theText[0].style.fontStyle = 'normal';
  theText[0].innerHTML = "Wonderful";
  theText[0].style.fontSize = '6rem';
  theText[0].classList.add(bg);
  theText[1].style.fontStyle = 'normal';
  theText[1].innerHTML = 'Effects With Text';
  theText[1].style.fontSize = '6rem';
  theText[1].classList.add(bg);
  
  setTimeout(changeFontBack, 6000);
  
}

function startApp() {
  
  let theText = document.getElementsByClassName('text');
  
  if (counter == 0) {
  
  theText[0].classList.remove('bg0');
  theText[1].classList.remove('bg0');
    
  counter++;
    
  } else {
    
  theText[0].classList.remove(globalBG);
  theText[1].classList.remove(globalBG);
    
  }
  
  changeFont();
  
}

setTimeout(startApp, 6000);

function changeFontBack() {
  
  let theText = document.getElementsByClassName('text');
  
  /* let bg = getIndex();
  
  globalBG = bg; */
  
  theText[0].style.fontStyle = 'italic';
  theText[1].style.fontSize = '8rem';
  theText[0].innerHTML = 'AMAZING';
  // theText[0].classList.remove(globalBG);
  // theText[0].classList.add(bg);
  theText[1].style.fontStyle = 'italic';
  theText[1].style.fontSize = '8rem';
  theText[1].innerHTML = 'TEXT EFFECTS';
  // theText[1].classList.remove(globalBG);
  // theText[1].classList.add(bg);
  
  setTimeout(startApp, 6000);
  
}