html {
  
  text-align: center;
}

a {
  cursor: pointer;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 900;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #ac3358;
  font-size: 0;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
a span {
  font-size: 40px;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 250ms;
  padding: 0 0.1em;
}
a span:nth-child(0n) {
  transition-delay: 0ms;
}
a span:nth-child(0n):after {
  transition-delay: 0ms;
}
a span:nth-child(1n) {
  transition-delay: 83.3333333333ms;
}
a span:nth-child(1n):after {
  transition-delay: 83.3333333333ms;
}
a span:nth-child(2n) {
  transition-delay: 166.6666666667ms;
}
a span:nth-child(2n):after {
  transition-delay: 166.6666666667ms;
}
a span:nth-child(3n) {
  transition-delay: 250ms;
}
a span:nth-child(3n):after {
  transition-delay: 250ms;
}
a span:after {
  content: "";
  position: absolute;
  top: 100%;
  left: -1%;
  width: 102%;
  height: 2em;
  background: #e33ea1;
  transform-origin: top center;
  transform: scaley(0.1);
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 250ms;
}
a:hover span {
  transform: translateY(-1em);
}
a:hover span:after {
  transform: scaleY(1);
}
a:active span {
  transform: translateY(0);
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 125ms;
  transition-delay: 0 !important;
}
a:active span:after {
  transform: scaleY(0.5);
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 125ms;
  transition-delay: 0 !important;
}