.marquee {
    height: 2em;
    overflow: hidden;
}

.marquee--inner{
    white-space: nowrap;
    display: block;
}

.marquee--inner p {
    display: block;
    margin: 0;
    padding-left: 3em;
    width: fit-content;
    animation: marquee 25s linear infinite;
    
}
/* same text again to have no gap between start and end */
.marquee--inner p + p {
    animation: marquee_2 25s linear infinite;
}


@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes marquee_2 {
    0% {
        transform: translateX(100%) translateY(-100%);
    }
    100% {
        transform: translateX(0%) translateY(-100%);
    }
  }