:root {
    --text-height:4vw;
    --neg-text-height:-4vw;
}
.scroll-container {
  text-align: center;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: var(--text-height+2vw);
  margin-bottom:-10px;
  /* border: 1px solid red; */
  margin-left: 10px;
  margin-right: 10px;
    /*width:40vw;*/
}

.text-inside .item {
  height: var(--text-height);
}

.text-inside {
  margin-top: 0;
  transition: 500ms;
  animation: 12s linear infinite test forwards;
  animation-delay:calc(var(--scroll)*-32s);
}
h3 {
    margin:0;
    position:absolute;
    top:50%;
    left:50%;
    text-wrap:nowrap;
    -ms-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);
    display: flex;
    height: calc(var(--text-height));
    font-size:var(--text-height);

    /* to center: */
    justify-content: center;
}
#horizontal_scroll {
    display:inline-block;
    position:absolute;
    left:0px;
    transition:500ms;
    animation:24s infinite hor_scroll forwards;
    animation-delay:3s;
}
@keyframes hor_scroll {
    to{margin-left:-314vw;}
}
@keyframes test {
    0% {
        margin-top:0;
    }
    90% {
        margin-top:calc(var(--neg-text-height)*11);
    }
    100% {
        margin-top:0;
    }
    
    
    
}