.anime-text-flex-container {
    display: flex;
    flex-direction: row;
}

.anime-text-flex-item {
    flex-basis: auto;
}

/*.anime-text-p {*/
/*    color: var(--bright-blue-color);*/
/*}*/

.anime-text {
    position: absolute;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    line-height: var(--line-height);
    color: var(--bright-green-color);
}

.anime-text-container {
    display: inline;
    float: left;
    margin: 0;
    font-weight: 300;
    overflow: hidden;
    height: 40px;
    padding: 0 20px 0 10px;
}

.anime-text-container:before {
    content: "[";
}

.anime-text-container:after {
    content: "]";
    position: absolute;
    right: 0;
}

.anime-text-container:after, .anime-text-container:before {
    position: absolute;
    top: 0;
    color: var(--yellow-color);
    font-size: 2rem;
    line-height: var(--line-height);
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.anime-text-p {
    color: var(--bright-blue-color);
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    line-height: var(--line-height);
    margin: 0;
}

.anime-text-ul {
    margin-top: 0;
    text-align: left;
    list-style: none;
    -webkit-animation-name: change;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-name: change;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.anime-text-ul ol, ul{
    padding-left: 1rem;
}

.anime-text-item {
    line-height: var(--line-height);
    margin: 2%;
}

/* --- Responsive layout --- */

/* makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
    .anime-text-p {
        padding-left: 2%;
    }

    .anime-text-flex-container {
        flex-direction: column;
        padding-left: 0;
    }

}

@media (max-width: 500px) {
    .anime-text-p {
        padding-left: 2%;
        font-size: 1.5rem;
    }

    .anime-text {
        font-size: 1.5rem;
    }
}

/* --- keyframes --- */

@-webkit-keyframes opacity {
    0%, 100% {
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
}

@-webkit-keyframes change {
    0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
    }
    16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
    }
    33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
    }
    49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
    }
    66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
    }
    83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
    }
}

@-o-keyframes opacity {
    0%, 100% {
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
}

@-o-keyframes change {
    0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
    }
    16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
    }
    33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
    }
    49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
    }
    66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
    }
    83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
    }
}

@-moz-keyframes opacity {
    0%, 100% {
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
}

@-moz-keyframes change {
    0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
    }
    16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
    }
    33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
    }
    49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
    }
    66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
    }
    83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
    }
}

@keyframes opacity {
    0%, 100% {
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
}

@keyframes change {
    0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
    }
    16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
    }
    33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
    }
    49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
    }
    66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
    }
    83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
    }
}