@media (max-width: 700px) {
    .images {
        flex-direction: column;
        align-items: center;
    }
}

body {
            margin: 0;
            height: 100vh;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }

        .container {
            text-align: center;
        }

        h1 {
            margin-bottom: 40px;
            font-size: 48px;
        }

        .images {
            display: flex;
            justify-content: center;
            gap: 30px;
        }

        .images img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        /* Hover эффект */
        .images img:hover {
            transform: scale(1.1);
        }

.title-image {
    width: 400px; /* размер картинки, можешь менять */
    height: auto;
    margin-bottom: 40px;
}

.images img {
    cursor: url("cursor.png"), pointer;
}

.glitch {
    animation: glitch 5s infinite;
}


/*@keyframes glitch {

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

    92% {
        transform: translate(-5px, 2px);
        filter: hue-rotate(90deg);
    }

    94% {
        transform: translate(5px, -2px);
        filter: contrast(200%);
    }

    96% {
        transform: translate(-3px, 0);
        filter: none;
    }
}

/* =====================
   глич редкое
===================== */

.glitch-wrapper {
    animation: screen-glitch 8s infinite;
}


@keyframes screen-glitch {

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

    93% {
        transform: translate(-3px, 1px);
    }

    94% {
        transform: translate(4px, -2px);
    }

    95% {
        transform: translate(0);
    }
}
*/


/* =====================
  шифттт
===================== */

.container {
    position: relative;
}


.container::before,
.container::after {

    content: "";
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0;

}


.container::before {

    background: inherit;

    transform: translate(-2px,0);

    mix-blend-mode: screen;

}


.container::after {

    background: inherit;

    transform: translate(2px,0);

    mix-blend-mode: screen;

}


.container:hover::before {

    opacity: 0.3;

}


.container:hover::after {

    opacity: 0.3;

}



/* =====================
  линии
===================== */


body::after {

    content:"";

    position: fixed;

    inset:0;

    pointer-events:none;


    background:
    repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.04),
        rgba(0,0,0,0.04) 1px,
        transparent 2px,
        transparent 4px
    );


}


/* =====================
   флеш ргб
===================== */


img,
.title-image {

    animation: rgb-glitch 30s infinite;

}



@keyframes rgb-glitch {


    0%, 90%, 100% {

        filter:none;

    }


    92% {

        filter:
        drop-shadow(3px 0 red)
        drop-shadow(-3px 0 rgb(255, 213, 0));

    }


    94% {

        filter:
        drop-shadow(-4px 0 red)
        drop-shadow(4px 0 rgb(255, 213, 0));

    }


    96% {

        filter:none;

    }

}