@keyframes fadein {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadein2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadein3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes translateY {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -150%);
    }
}

@keyframes translateY2 {
    0% {
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -80%);
    }
}

@keyframes fadeoutL {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
        transform: translate(-100%, 0%);
    }

    100% {
        display: none;
    }
}

@keyframes fadeoutR {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
        transform: translate(100%, 0%);
    }

        100% {
            display: none;
        }
}

@keyframes colorchange {
    0% {
        color: black;
    }

    100% {
        color: snow;
    }
}

@keyframes invert1 {
    0% {
        filter: invert(0%);
    }

    100% {
        filter: invert(100%);
    }
}

@keyframes sing {
    0% {
        transform: translate(0%, 0%);
    }

    25% {
        transform: translate(-10%, -10%);
    }

    50% {
        transform: translate(0%, 0%);
    }

    75% {
        transform: translate(10%, 10%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

@keyframes slidein {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}