:root {
    --rate: 19.9%;
    --function: ease-in-out;
    --slide-distortion-delay: 0s;
    --slide-distortion-time: 0.5s;
    --slide-reset-delay: 1s;
    --slide-reset-time: 0s;
    --slider-offset: 0%;
    --slider-time: 1s;
}

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.slider {
    position: relative;
    overflow: hidden;
    margin: 0px 0px 20px 0px;
}

.slider__inner {
    display: flex;
    flex-wrap: nowrap;
    transform: translateX(var(--slider-offset));
    transition: transform var(--slider-time) var(--function);
    will-change: transform;
}

.slider__item {
    flex: 0 0 100%;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: auto;
}

.slider__image {
    width: 100%;
    height: auto;
    transform: translateX(0);
    animation-delay: var(--slide-distortion-delay), var(--slide-reset-delay);
    animation-duration: var(--slide-distortion-time), var(--slide-reset-time);
    animation-fill-mode: forwards, forwards;
    animation-direction: normal, reverse;
}

/* Animation */
.slider__item--animating .slider__image {
    animation-name: slide-left, slide-right, fade-in, fade-out, bounce, slide-top, slide-bottom, color-change;
}

/* Keyframes */
@keyframes slide-left {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

@keyframes slide-top {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slide-bottom {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes color-change {
    0% {
        background-color: #ff0000; /* Start color */
    }

    50% {
        background-color: #00ff00; /* Middle color */
    }

    100% {
        background-color: #0000ff; /* End color */
    }
}