@keyframes noise-anim {
    0% {
      clip-path: inset(52% 0 10% 0);
    }
    5% {
      clip-path: inset(24% 0 43% 0);
    }
    10% {
      clip-path: inset(41% 0 58% 0);
    }
    15% {
      clip-path: inset(10% 0 67% 0);
    }
    20% {
      clip-path: inset(45% 0 47% 0);
    }
    25% {
      clip-path: inset(93% 0 7% 0);
    }
    30% {
      clip-path: inset(39% 0 25% 0);
    }
    35% {
      clip-path: inset(28% 0 1% 0);
    }
    40% {
      clip-path: inset(78% 0 18% 0);
    }
    45% {
      clip-path: inset(42% 0 15% 0);
    }
    50% {
      clip-path: inset(62% 0 21% 0);
    }
    55% {
      clip-path: inset(20% 0 65% 0);
    }
    60% {
      clip-path: inset(72% 0 19% 0);
    }
    65% {
      clip-path: inset(47% 0 47% 0);
    }
    70% {
      clip-path: inset(79% 0 14% 0);
    }
    75% {
      clip-path: inset(80% 0 3% 0);
    }
    80% {
      clip-path: inset(91% 0 9% 0);
    }
    85% {
      clip-path: inset(10% 0 74% 0);
    }
    90% {
      clip-path: inset(51% 0 29% 0);
    }
    95% {
      clip-path: inset(72% 0 7% 0);
    }
    100% {
      clip-path: inset(36% 0 46% 0);
    }
  }

  @keyframes noise-anim-2 {
    0% {
      clip-path: inset(80% 0 18% 0);
    }
    5% {
      clip-path: inset(31% 0 61% 0);
    }
    10% {
      clip-path: inset(38% 0 14% 0);
    }
    15% {
      clip-path: inset(21% 0 3% 0);
    }
    20% {
      clip-path: inset(18% 0 29% 0);
    }
    25% {
      clip-path: inset(76% 0 12% 0);
    }
    30% {
      clip-path: inset(25% 0 24% 0);
    }
    35% {
      clip-path: inset(23% 0 46% 0);
    }
    40% {
      clip-path: inset(90% 0 9% 0);
    }
    45% {
      clip-path: inset(92% 0 4% 0);
    }
    50% {
      clip-path: inset(80% 0 17% 0);
    }
    55% {
      clip-path: inset(34% 0 24% 0);
    }
    60% {
      clip-path: inset(33% 0 55% 0);
    }
    65% {
      clip-path: inset(6% 0 73% 0);
    }
    70% {
      clip-path: inset(96% 0 1% 0);
    }
    75% {
      clip-path: inset(64% 0 29% 0);
    }
    80% {
      clip-path: inset(96% 0 1% 0);
    }
    85% {
      clip-path: inset(45% 0 17% 0);
    }
    90% {
      clip-path: inset(79% 0 14% 0);
    }
    95% {
      clip-path: inset(64% 0 11% 0);
    }
    100% {
      clip-path: inset(95% 0 6% 0);
    }
  }

  a{
    text-decoration: none;
    color: white;
    width: fit-content;
    margin: auto;
}

  body{
    background-color: black;
    color: white;
    font-family: 'Jura', sans-serif;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    box-sizing: border-box;
}

nav{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    border: solid white;
    border-width: 0 0 3px 0;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    background-color: black;
    z-index: 10;
}

/* J'AI UNE EXCUSE POUR LES PX
LE TEXTE JAPONAIS S'AFFICHE À LA VERTICALE EN EM
JE REFUSE D'ABANDONNER MON EFFET */

  .glitch{

    font-family: 'Libre Barcode 39 Extended Text', cursive;
    font-size: 56px;
    color: white;
    width: 240px;
    position: relative;
    margin: 0 auto;
}

  .glitch:hover{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 45px;
  }
  
  .glitch:hover::before {
      content: attr(text1);
      position: absolute;
      left: -2px;
      text-shadow: 2px 0 blue;
      top: 1px;
      background: black;
      overflow: hidden;
      animation: noise-anim 2s infinite linear alternate-reverse;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 45px;
    }
  
  .glitch:hover::after {
      content: attr(text1);
      position: absolute;
      left: 2px;
      text-shadow: -1px 0 red;
      top: 0;
      background: black;
      overflow: hidden;
      animation: noise-anim-2 1.5s infinite linear alternate-reverse;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 45px;
    }