@import url("https://fonts.googleapis.com/css?family=Kanit:500");
* {
  box-sizing: border-box;
}
body,html {
  background-image: url('http://www.mogaanywhere.com/wp-content/uploads/2013/02/background-radial-gradient-darker-3.jpg');
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit', sans-serif;
  width: 100vw;
  min-height: 100vh;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.5rem;
  -webkit-perspective: 2500px;
          perspective: 2500px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}



.title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  display: grid;
  grid-template-columns: repeat(7, auto);
}


span {
  color: #dcd7d7;
  font-size: 5rem;
  display: inline-block;
}

span:nth-of-type(1),span:nth-of-type(7) {
  font-size: 5rem;
  height: 3.4rem;
  line-height: 3.2rem;
}
span:nth-of-type(2),span:nth-of-type(6) {
  font-size: 4.8rem;
  height: 3.2rem;
  line-height: 3rem;
}
span:nth-of-type(3),span:nth-of-type(4) {
  font-size: 4.4rem;
  height: 3rem;
  line-height: 2.8rem;
}

span:nth-of-type(5) {
  font-size: 4.5rem;
  height: 3rem;
  line-height: 2.7rem;
}

span:nth-of-type(1) {
  -webkit-animation-duration: 0.95s, 0.5s;
          animation-duration: 0.95s, 0.5s;
  -webkit-animation-delay: 0.55s, 1s;
          animation-delay: 0.55s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span:nth-of-type(2) {
  -webkit-animation-duration: 0.9s, 0.5s;
          animation-duration: 0.9s, 0.5s;
  -webkit-animation-delay: 0.6s, 1s;
          animation-delay: 0.6s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span:nth-of-type(3) {
  -webkit-animation-duration: 0.85s, 0.5s;
          animation-duration: 0.85s, 0.5s;
  -webkit-animation-delay: 0.65s, 1s;
          animation-delay: 0.65s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span:nth-of-type(4) {
  -webkit-animation-duration: 0.8s, 0.5s;
          animation-duration: 0.8s, 0.5s;
  -webkit-animation-delay: 0.7s, 1s;
          animation-delay: 0.7s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span:nth-of-type(5) {
  -webkit-animation-duration: 0.75s, 0.5s;
          animation-duration: 0.75s, 0.5s;
  -webkit-animation-delay: 0.75s, 1s;
          animation-delay: 0.75s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span:nth-of-type(6) {
  -webkit-animation-duration: 0.7s, 0.5s;
          animation-duration: 0.7s, 0.5s;
  -webkit-animation-delay: 0.8s, 1s;
          animation-delay: 0.8s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span:nth-of-type(7) {
  -webkit-animation-duration: 0.65s, 0.5s;
          animation-duration: 0.65s, 0.5s;
  -webkit-animation-delay: 0.85s, 1s;
          animation-delay: 0.85s, 1s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, steps(1);
          animation-timing-function: ease, steps(1);
}
span.play {
  -webkit-animation-name: shadow-entry, fill;
          animation-name: shadow-entry, fill;
}
@-webkit-keyframes shadow-entry {
  0% {
    color: #dcd7d7;
  }
  50% {
    text-shadow: 4px 3px 0 #8c8c8c,6px 6px 0 #8c8c8c,8px 9px 0 #8c8c8c,10px 12px 0 #8c8c8c,12px 15px 0 #8c8c8c,14px 18px 0 #8c8c8c,16px 21px 0 #8c8c8c,18px 24px 0 #8c8c8c,20px 27px 0 #8c8c8c,22px 30px 0 #8c8c8c,24px 33px 0 #8c8c8c,26px 36px 0 #8c8c8c,28px 39px 0 #8c8c8c,30px 42px 0 #8c8c8c,32px 45px 0 #8c8c8c,34px 48px 0 #8c8c8c,36px 51px 0 #8c8c8c,38px 54px 0 #8c8c8c,40px 57px 0 #8c8c8c,42px 60px 0 #8c8c8c,44px 63px 0 #8c8c8c,46px 66px 0 #8c8c8c,48px 69px 0 #8c8c8c,50px 72px 0 #8c8c8c,52px 75px 0 #8c8c8c,54px 78px 0 #8c8c8c,56px 81px 0 #8c8c8c,58px 84px 0 #8c8c8c,60px 87px 0 #8c8c8c,62px 90px 0 #8c8c8c,64px 93px 0 #8c8c8c,66px 96px 0 #8c8c8c,68px 99px 0 #8c8c8c,70px 102px 0 #8c8c8c,72px 105px 0 #8c8c8c,74px 108px 0 #8c8c8c,76px 111px 0 #8c8c8c,78px 114px 0 #8c8c8c,80px 117px 0 #8c8c8c,82px 120px 0 #8c8c8c;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 60px) scale(1.2);
            transform: translate3d(0, 0, 60px) scale(1.2);
  }
  60% {
    -webkit-transform: translate3d(0, 0, 60px) scale(1.3);
            transform: translate3d(0, 0, 60px) scale(1.3);
    text-shadow: 4px 3px 0 #8c8c8c,6px 6px 0 #8c8c8c,8px 9px 0 #8c8c8c,10px 12px 0 #8c8c8c,12px 15px 0 #8c8c8c,14px 18px 0 #8c8c8c,16px 21px 0 #8c8c8c,18px 24px 0 #8c8c8c,20px 27px 0 #8c8c8c,22px 30px 0 #8c8c8c,24px 33px 0 #8c8c8c,26px 36px 0 #8c8c8c,28px 39px 0 #8c8c8c,30px 42px 0 #8c8c8c,32px 45px 0 #8c8c8c,34px 48px 0 #8c8c8c,36px 51px 0 #8c8c8c,38px 54px 0 #8c8c8c,40px 57px 0 #8c8c8c,42px 60px 0 #8c8c8c,44px 63px 0 #8c8c8c,46px 66px 0 #8c8c8c,48px 69px 0 #8c8c8c,50px 72px 0 #8c8c8c,52px 75px 0 #8c8c8c,54px 78px 0 #8c8c8c,56px 81px 0 #8c8c8c,58px 84px 0 #8c8c8c,60px 87px 0 #8c8c8c,62px 90px 0 #8c8c8c,64px 93px 0 #8c8c8c,66px 96px 0 #8c8c8c,68px 99px 0 #8c8c8c,70px 102px 0 #8c8c8c,72px 105px 0 #8c8c8c,74px 108px 0 #8c8c8c,76px 111px 0 #8c8c8c,78px 114px 0 #8c8c8c,80px 117px 0 #8c8c8c,82px 120px 0 #8c8c8c,84px 123px 0 #8c8c8c,86px 126px 0 #8c8c8c,88px 129px 0 #8c8c8c,90px 132px 0 #8c8c8c,92px 135px 0 #8c8c8c,94px 138px 0 #8c8c8c,96px 141px 0 #8c8c8c,98px 144px 0 #8c8c8c,100px 147px 0 #8c8c8c,102px 150px 0 #8c8c8c;
  }
}
@keyframes shadow-entry {
  0% {
    color: #dcd7d7;
  }
  50% {
    text-shadow: 4px 3px 0 #8c8c8c,6px 6px 0 #8c8c8c,8px 9px 0 #8c8c8c,10px 12px 0 #8c8c8c,12px 15px 0 #8c8c8c,14px 18px 0 #8c8c8c,16px 21px 0 #8c8c8c,18px 24px 0 #8c8c8c,20px 27px 0 #8c8c8c,22px 30px 0 #8c8c8c,24px 33px 0 #8c8c8c,26px 36px 0 #8c8c8c,28px 39px 0 #8c8c8c,30px 42px 0 #8c8c8c,32px 45px 0 #8c8c8c,34px 48px 0 #8c8c8c,36px 51px 0 #8c8c8c,38px 54px 0 #8c8c8c,40px 57px 0 #8c8c8c,42px 60px 0 #8c8c8c,44px 63px 0 #8c8c8c,46px 66px 0 #8c8c8c,48px 69px 0 #8c8c8c,50px 72px 0 #8c8c8c,52px 75px 0 #8c8c8c,54px 78px 0 #8c8c8c,56px 81px 0 #8c8c8c,58px 84px 0 #8c8c8c,60px 87px 0 #8c8c8c,62px 90px 0 #8c8c8c,64px 93px 0 #8c8c8c,66px 96px 0 #8c8c8c,68px 99px 0 #8c8c8c,70px 102px 0 #8c8c8c,72px 105px 0 #8c8c8c,74px 108px 0 #8c8c8c,76px 111px 0 #8c8c8c,78px 114px 0 #8c8c8c,80px 117px 0 #8c8c8c,82px 120px 0 #8c8c8c;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 60px) scale(1.2);
            transform: translate3d(0, 0, 60px) scale(1.2);
  }
  60% {
    -webkit-transform: translate3d(0, 0, 60px) scale(1.3);
            transform: translate3d(0, 0, 60px) scale(1.3);
    text-shadow: 4px 3px 0 #8c8c8c,6px 6px 0 #8c8c8c,8px 9px 0 #8c8c8c,10px 12px 0 #8c8c8c,12px 15px 0 #8c8c8c,14px 18px 0 #8c8c8c,16px 21px 0 #8c8c8c,18px 24px 0 #8c8c8c,20px 27px 0 #8c8c8c,22px 30px 0 #8c8c8c,24px 33px 0 #8c8c8c,26px 36px 0 #8c8c8c,28px 39px 0 #8c8c8c,30px 42px 0 #8c8c8c,32px 45px 0 #8c8c8c,34px 48px 0 #8c8c8c,36px 51px 0 #8c8c8c,38px 54px 0 #8c8c8c,40px 57px 0 #8c8c8c,42px 60px 0 #8c8c8c,44px 63px 0 #8c8c8c,46px 66px 0 #8c8c8c,48px 69px 0 #8c8c8c,50px 72px 0 #8c8c8c,52px 75px 0 #8c8c8c,54px 78px 0 #8c8c8c,56px 81px 0 #8c8c8c,58px 84px 0 #8c8c8c,60px 87px 0 #8c8c8c,62px 90px 0 #8c8c8c,64px 93px 0 #8c8c8c,66px 96px 0 #8c8c8c,68px 99px 0 #8c8c8c,70px 102px 0 #8c8c8c,72px 105px 0 #8c8c8c,74px 108px 0 #8c8c8c,76px 111px 0 #8c8c8c,78px 114px 0 #8c8c8c,80px 117px 0 #8c8c8c,82px 120px 0 #8c8c8c,84px 123px 0 #8c8c8c,86px 126px 0 #8c8c8c,88px 129px 0 #8c8c8c,90px 132px 0 #8c8c8c,92px 135px 0 #8c8c8c,94px 138px 0 #8c8c8c,96px 141px 0 #8c8c8c,98px 144px 0 #8c8c8c,100px 147px 0 #8c8c8c,102px 150px 0 #8c8c8c;
  }
}
@-webkit-keyframes fill {
  to {
    color: #c80002;
  }
}
@keyframes fill {
  to {
    color: #c80002;
  }
}