.glitch--style-1 {
    --gap-horizontal: 20px;
    --gap-vertical: 2px;
    --time-anim: 2.25s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: none;
    --blend-mode-4: none;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: transparent;
    --blend-color-4: transparent;
    --blend-color-5: transparent;
  }

  .glitch {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    font-size: 10em;
  }

  @media (max-width:665px) {
    .glitch{
        font-size: 3.5em;
    }
    nav{
      top: 30%;
    }
  }

  @media (max-width:404px) {
    .glitch{
        font-size: 2.5em;
    }
    nav{
      top: 25%;
    }
  }
  @media (max-width:328px) {
    nav{
      top: 18%;
    }    
  }
  @media (max-width:300px) {
    nav{
      top: 14%;
    }    
  }
  @media (max-width:288px) {
    .glitch{
      font-size: 2em;
  }   
  }
  .glitch:before,
  .glitch:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000;
    font: inherit;
    visibility: hidden;
  }
  
  .glitch:before {
    left: 2px;
    text-shadow: -2px 0 #FF00F8;
  }
  
  .glitch:after {
    left: -2px;
    text-shadow: -2px 0 #00D5FF;
  }
  
  .glitch:before {
    visibility: visible;
    animation: glitch-anim-2 4s infinite linear alternate-reverse;
  }
  
  .glitch:after {
    visibility: visible;
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
  }
  
  @keyframes glitch-anim {
    0% { clip: rect(29px, 9999px, 11px, 0); }
    4.16666667% { clip: rect(11px, 9999px, 21px, 0); }
    8.33333333% { clip: rect(18px, 9999px, 1px, 0); }
    12.5% { clip: rect(17px, 9999px, 5px, 0); }
    16.66666667% { clip: rect(3px, 9999px, 27px, 0); }
    20.83333333% { clip: rect(20px, 9999px, 25px, 0); }
    25% { clip: rect(25px, 9999px, 19px, 0); }
    29.16666667% { clip: rect(12px, 9999px, 151px, 0); }
    33.33333333% { clip: rect(29px, 9999px, 1px, 0); }
    37.5% { clip: rect(24px, 9999px, 31px, 0); }
    41.66666667% { clip: rect(9px, 9999px, 1px, 0); }
    45.83333333% { clip: rect(1px, 9999px, 17px, 0); }
    50% { clip: rect(3px, 9999px, 27px, 0); }
    54.16666667% { clip: rect(17px, 9999px, 151px, 0); }
    58.33333333% { clip: rect(15px, 9999px, 10px, 0); }
    62.5% { clip: rect(1px, 9999px, 15px, 0); }
    66.66666667% { clip: rect(10px, 9999px, 3px, 0); }
    70.83333333% { clip: rect(27px, 9999px, 117px, 0); }
    75% { clip: rect(2px, 9999px, 5px, 0); }
    79.16666667% { clip: rect(4px, 9999px, 13px, 0); }
    83.33333333% { clip: rect(8px, 9999px, 44px, 0); }
    87.5% { clip: rect(13px, 9999px, 14px, 0); }
    91.66666667% { clip: rect(21px, 9999px, 31px, 0); }
    95.83333333% { clip: rect(0px, 9999px, 33px, 0); }
    100% { clip: rect(9px, 9999px, 148px, 0); }
  }
  
  @keyframes glitch-anim-2 {
    6.66666667% { clip: rect(43px, 9999px, 105px, 0); }
    10% { clip: rect(5px, 9999px, 0px, 0); }
    13.33333333% { clip: rect(16px, 9999px, 14px, 0); }
    16.66666667% { clip: rect(12px, 9999px, 106px, 0); }
    20% { clip: rect(1px, 9999px, 189px, 0); }
    23.33333333% { clip: rect(20px, 9999px, 41px, 0); }
    26.66666667% { clip: rect(30px, 9999px, 176px, 0); }
    30% { clip: rect(12px, 9999px, 32px, 0); }
    33.33333333% { clip: rect(22px, 9999px, 155px, 0); }
    36.66666667% { clip: rect(14px, 9999px, 40px, 0); }
    40% { clip: rect(25px, 9999px, 86px, 0); }
    43.33333333% { clip: rect(13px, 9999px, 94px, 0); }
    46.66666667% { clip: rect(1px, 9999px, 139px, 0); }
    50% { clip: rect(14px, 9999px, 76px, 0); }
    53.33333333% { clip: rect(2px, 9999px, 124px, 0); }
    56.66666667% { clip: rect(6px, 9999px, 70px, 0); }
    60% { clip: rect(9px, 9999px, 140px, 0); }
    63.33333333% { clip: rect(7px, 9999px, 151px, 0); }
    66.66666667% { clip: rect(1px, 9999px, 131px, 0); }
    70% { clip: rect(21px, 9999px, 183px, 0); }
    73.33333333% { clip: rect(11px, 9999px, 60px, 0); }
    76.66666667% { clip: rect(91px, 9999px, 28px, 0); }
    80% { clip: rect(14px, 9999px, 193px, 0); }
    83.33333333% { clip: rect(2px, 9999px, 150px, 0); }
    86.66666667% { clip: rect(3px, 9999px, 131px, 0); }
    90% { clip: rect(17px, 9999px, 45px, 0); }
    93.33333333% { clip: rect(18px, 9999px, 37px, 0); }
    96.66666667% { clip: rect(9px, 9999px, 46px, 0); }
    100% { clip: rect(38px, 9999px, 15px, 0); }
  }
  
  /* imagen glich */

  .div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    [data-js="glitch-image"] {
        position: relative;
        width: 450px; /* Controla el tamaño de las imágenes aquí */
        margin: 10px;
    }

    [data-js="glitch-image"] img {
        width: 100%;
    }

    [data-js="glitch-image"] canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }