@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
.body {
    height:40px;
    width: 600px;
    overflow: hidden;
}
.textani-artist {
    font-family: Open Sans, Open-Sans, sans-serif;
    text-transform: none;
    font-size: 20px;
    animation-name: t-move-in;
    animation-duration: 2400ms;
    animation-delay: 0s;
}
.textani-title {
    vertical-align:top;
    font-family: quantico;
    text-transform: none;
    font-size: 80px;
    color: #ff4000;
    animation-name: move-in;
    animation-duration: 2800ms;
    animation-delay: 0s;
}
.title{
  font-family: quantico;
  text-transform: none;
  font-weight:normal;
  font-size: 30px;
  color: #ff0065;
}
.artist{
  vertical-align:bottom;
  font-family: quantico;
  text-transform: none;
  font-weight:normal;
  font-size: 30px;
  color: #16ccd9;
}
#overflow {
  white-space: nowrap;
  max-width:20em;
  overflow:hidden;
}
@keyframes move-in {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
    40% {
    opacity: 0;
    transform: translateX(-100%);
  }
        70% {
    opacity: 0.7;
    transform: translateX(5%);
  } 
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes t-move-in {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
        20% {
    opacity: 0;
    transform: translateX(-100%);
  }
    70% {
    opacity: 0.7;
    transform: translateX(5%);
  }  
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes move-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-9rem);
  }
}
@keyframes t-move-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes stay-out {
  0% {
    opacity: 0;
    transform: translateX(-1rem);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}