@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
* 
{
  font-family: 'Roboto', sans-serif;
  color: #fff;
  background: #111;
}

.center{
    text-align: center;
}

.header{
    font-size: 2.0em;
}

h1{
    margin: 1px;
}

section
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

section .text
{
    position: relative;
    margin: 5px;
    max-width: 800px;
    user-select: none;
    font-size: 1.5em;
}

section .text span
{
    position: relative;
    display: inline-block;
}

section .text span.active
{
    animation: smoke 2s linear forwards;
    transform-origin: bottom;
}

.waviy {
    position: relative;
  }
  .waviy span {
    position: relative;
    display: inline-block;
    font-size: 40px;
    color: #fff;
    text-transform: uppercase;
    animation: flip 60s infinite;
    animation-delay: calc(1s * var(--i))
  }

@keyframes smoke{
    0%{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) translateY(0) rotate(0deg)
        scale(1);
    }
    50%{
        opacity: 1;
        pointer-events: none;
    }
    100%{
        opacity: 0;
        filter: blur(20px);
        transform: translateX(300px) translateY(-300px) rotate(720deg)
        scale(4);
    }
}

.animate-charcter-swamp
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #2a490d 0%,
    #13b120 29%,
    #196d12 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 5s linear infinite;
  display: inline-block;
      font-size: 32px;
}

.animate-charcter-black
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #39383d 0%,
    #ccbfd6 29%,
    #201f1f75 67%,
    #b6b6b2 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 3s linear infinite;
  display: inline-block;
      font-size: 32px;
}

.animate-charcter-hocus
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 7s linear infinite;
  display: inline-block;
      font-size: 32px;
}

.animate-charcter-witch
{
    color: rgb(224, 128, 212);
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

@keyframes flip {
    0%,80% {
      transform: rotateY(360deg) 
    }
  }