.wordCarousel {
    font-size: 3.25vw;
    text-align: right;
    width: 35vw;
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
}
.wordCarousel span {
    display: block;
    background: var(--black);
}
.wordCarousel div {
    overflow: hidden;
    position: relative;
    width: max-content;
    /* float: right; */
    height: 7vw;
    padding-top: 10px;
    margin-top: 0;
    right: -20vw;
    text-align: left;
    /* border: 1px solid red; */
}
.wordCarousel div ul {
    padding-inline-start: 0;
}
.wordCarousel div li {
    font-size: 4vw;
    font-weight: 600;
    padding: 0 10px;
    width: max-content;
    height: 5vw;
    margin-top: 1vw;
    margin-bottom: 2vw;
    display: block;
    background: var(--black);
    /* border: 1px solid greenyellow; */
}

.flip2 {
    -webkit-animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
    animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip3 {
    -webkit-animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
    animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip4 {
    -webkit-animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
    animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}
@media screen and   (max-width: 60em) {
    .wordCarousel {
        top: 25%;
        font-size: 4vw;
        width:  80vw;
        text-align: left;
        left: 5vw;
    }
     .wordCarousel div {
        left: 0vw;
        height: 12vw;
        width: 80vw;
        text-align: right;
        margin-top: 0vw;
        /*         border: 1px solid red; */
    }
    .wordCarousel div li {
        font-size: 7vw;
        height: 10%;
    }
    .flip4 {
        -webkit-animation: flip-mobile 10s cubic-bezier(0.23, 1, 0.32, 1.2)
            infinite;
        animation: flip-mobile 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
    }
}
@media screen and (max-width: 40em) {
    .wordCarousel {
        font-size: 8vw;
        text-align: left;
        width: auto;
        margin-left: 2.5%;
        top: 25%;
        transform: translateY(-50%);
    }
    .wordCarousel div {
        right: 2.5vw;
        height: 14vw;
        width: 95vw;
        text-align: right;
        margin-top: 0vw;
/*         border: 1px solid red; */
    }
    .wordCarousel div li {
        font-size: 7vw;
        height: 10%;
        /* text-align: left; */
        /*         border: 1px solid green; */
        padding: 0;
    }
    .flip4 {
        -webkit-animation: flip-mobile 10s cubic-bezier(0.23, 1, 0.32, 1.2)
            infinite;
        animation: flip-mobile 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
    }
}

@-webkit-keyframes flip4 {
    0% {
        margin-top: -24vw;
    }
    5% {
        margin-top: -1vw;
    }
    25% {
        margin-top: -1vw;
    }
    30% {
        margin-top: -8vw;
    }
    50% {
        margin-top: -8vw;
    }
    55% {
        margin-top: -15vw;
    }
    75% {
        margin-top: -15vw;
    }
    80% {
        margin-top: -22vw;
    }
    99.99% {
        margin-top: -22vw;
    }
    100% {
        margin-top: -1vw;
    }
}
@keyframes flip4 {
    0% {
        margin-top: -24vw;
    }
    5% {
        margin-top: -1vw;
    }
    25% {
        margin-top: -1vw;
    }
    30% {
        margin-top: -8vw;
    }
    50% {
        margin-top: -8vw;
    }
    55% {
        margin-top: -15vw;
    }
    75% {
        margin-top: -15vw;
    }
    80% {
        margin-top: -22vw;
    }
    99.99% {
        margin-top: -22vw;
    }
    100% {
        margin-top: -1vw;
    }
}
@keyframes flip-mobile {
    0% {
        margin-top: -24vw;
    }
    5% {
        margin-top: -2vw;
    }
    25% {
        margin-top: -2vw;
    }
    30% {
        margin-top: -14vw;
    }
    50% {
        margin-top: -14vw;
    }
    55% {
        margin-top: -26vw;
    }
    75% {
        margin-top: -26vw;
    }
    80% {
        margin-top: -38vw;
    }
    99.99% {
        margin-top: -38vw;
    }
    100% {
        margin-top: -1vw;
    }
}

/* @-webkit-keyframes flip2 {
0% {
  margin-top: -180px;
}
5% {
  margin-top: -90px;
}
50% {
        margin-top: -90px;
    }
    55% {
      margin-top: 0px;
    }
    99.99% {
      margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
}

@keyframes flip2 {
    0% {
        margin-top: -180px;
    }
    5% {
        margin-top: -90px;
    }
    50% {
        margin-top: -90px;
    }
    55% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
}
@-webkit-keyframes flip3 {
    0% {
        margin-top: -270px;
    }
    5% {
        margin-top: -180px;
    }
    33% {
        margin-top: -180px;
    }
    38% {
        margin-top: -90px;
    }
    66% {
        margin-top: -90px;
    }
    71% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
}
@keyframes flip3 {
    0% {
        margin-top: -270px;
    }
    5% {
        margin-top: -180px;
    }
    33% {
        margin-top: -180px;
    }
    38% {
        margin-top: -90px;
    }
    66% {
        margin-top: -90px;
    }
    71% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
} */

/* @keyframes flip4 {
    0% {
        margin-top: -360px;
    }
    5% {
        margin-top: -270px;
    }
    25% {
        margin-top: -270px;
    }
    30% {
        margin-top: -180px;
    }
    50% {
        margin-top: -180px;
    }
    55% {
        margin-top: -90px;
    }
    75% {
        margin-top: -90px;
    }
    80% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
} */