* {
    font-family: helvetica, arial, sans-serif;
    font-size: 1.5rem;
  }
  
  body {
    perspective: 500px;
  }
  
  /* clear background */
  h2 {
    text-align: center;
    padding: 16px;
    margin: 0;
    color:rgb(5, 14, 97);
  }
  
  /* crops animations that exceeds one line area */
  .line {
    width: 100%;
    height: 8rem;
    overflow: hidden;
    
    padding: 0;
    margin-bottom: 16px;
  }
  
  /* flipping class and key frames*/
  .flipX {
    animation: 1s anim-flipX ease infinite;
  }
  @keyframes anim-flipX {
    0% {
      opacity: 0;
      transform: rotateX(90def);
    }
    50% {
      opacity: 1;
      transform: rotateX(720deg);
    }
    100% {
      /* animate nothing to pause animation at the end */
      opacity: 1;
      transform: rotateX(720deg);
    }
  }
  
  /* lineup class and keyframes */
  .lineUp {
    animation: 2s anim-lineUp ease-out infinite;
  }
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  /* flipY class and keyframes*/
  .flipY {
    animation-name: spin, depth;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;
  }
  @keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
  @keyframes depth {
    0% {
      text-shadow: 0 0 black;
    }
    25% {
      text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
    }
    50% {
      text-shadow: 0 0 black;
    }
    75% {
      text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
        -5px 0 black;
    }
    100% {
      text-shadow: 0 0 black;
    }
  }
  
  /* subtle zoom to attention and then back */
  .pop-outin {
    animation: 2s anim-popoutin ease infinite;
  }
  
  @keyframes anim-popoutin {
    0% {
      color: black;
      transform: scale(0);
      opacity: 0;
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    25% {
      color: red;
      transform: scale(2);
      opacity: 1;
      text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
    }
    50% {
      color: black;
      transform: scale(1);
      opacity: 1;
      text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      /* animate nothing to add pause at the end of animation */
      transform: scale(1);
      opacity: 1;
      text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
  }
  
  .fromtop {
    animation: 2s anim-fromtop linear infinite;
  }
  @keyframes anim-fromtop {
    0% { opacity: 0; transform: translateY(-100%);}
    25% { opacity: 1; transform: translateY(0%);}
    50% {
    }
    100% {
    }
  }