@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

.rotating-text {
    font-family: 'Audiowide', fantasy;
    display: flex;
    align-items: center;
    font-size: 2rem;
    gap: 0.4rem;
    .words {
        position: relative;
        height: 2rem;
        line-height: 2rem;
        overflow: hidden;
        width: 7em;
        text-align: center;
        span {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateY(100%);
            transition: transform 0.6s ease, opacity 0.6s ease;
            white-space: nowrap;
        }
        span.visible {
            opacity: 1;
            transform: translateY(0);
            z-index: 2;
        }
        span.leaving {
            opacity: 0;
            transform: translateY(-100%);
            z-index: 1;
        }
    }
}