@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInLeft100 {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInRight100 {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes zoomOut {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes fadeFromTop {
    from {
        opacity: 0;
        height: 0;
    }

    to {
        opacity: 1;
        height: 100%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes changeBackground {
    0% {
        background-color: unset;
    }

    10% {
        color: white;
        background-color: forestgreen;
    }

    90% {
        color: white;
        background-color: forestgreen;
    }

    100% {
        background-color: unset;
    }
}

/************************************************
 * Dot Flashing
 ************************************************/
span:has(> .dot-flashing),
div:has(> .dot-flashing) {
    display: inline-block;
    min-width: 105px;
    align-items: center;
}

.dot-flashing {
    position: relative;
    top: 2px;
    left: 20px;
    width: 10px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    line-height: 100%;
    color: forestgreen;
    background-color: forestgreen;
    border-radius: 5px;
    animation: dot-flashing 0.75s infinite linear alternate;
    animation-delay: 0.25s;
}

.dot-flashing:before,
.dot-flashing:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: forestgreen;
    color: forestgreen;
}

.dot-flashing:before {
    left: -15px;
    animation: dot-flashing 0.75s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing:after {
    left: 15px;
    animation: dot-flashing 0.75s infinite alternate;
    animation-delay: 0.5s;
}

@keyframes dot-flashing {
    0% {
        background-color: forestgreen;
    }

    50%, 100% {
        background-color: rgba(255, 255, 255, 0.5);
    }
}

/************************************************
 * Animation Functions
 ************************************************/
.playAnimation {
    animation-play-state: running !important;
}