body{
    background-color: #e5e5e5;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
main{
    width: 100%;
    margin: 0;
}
.button {
    color: #ffffff;
    font-size: 48px;
    top: 65%;
    left: 50%;
    position:fixed;
    transform: translate(-50%, -50%);
    z-index: 2;
    mix-blend-mode: difference;
    font-family: Impact, sans-serif;}

.button2 {
    color: #ffffff;
    font-size: 21.6741px;
    top: 96%;
    left: 91%;
    position:fixed;
    z-index: 2;
    mix-blend-mode: difference;
    font-family: Impact, sans-serif;}

.header {
    color: #ffffff;
    top: 50%;
    left: 50%;
    font-size: 256px; 
    position:fixed;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: difference;
    font-family: Impact, sans-serif;
}

.slider{
    --width: 220px;
    --height: 230px;
    --quantity: 10;
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #676767 20% 80%,
        transparent
    );
}
.slider .list{
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.slider .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) - 10s)!important;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 845px){
    .header{
        font-size: 128px;
    }
    .button{
        font-size: 24px;
    }
    .button2{
        font-size: 12px;
    }
}

@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}
.slider[reverse="true"] .item{
    animation: reversePlay 10s linear infinite;
}
@keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
}

/* shout out to muitea */