*, *:before, *:after {
    box-sizing: border-box;
    outline: none;
  }

  body {
    margin: 0;
    background-color: black ;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    display: flex;
    flex-direction: column;
  }

  .bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: black;
    z-index: 0;
  }

  .hoverable-text {
    cursor: pointer;
}
    .glitch {
      max-width: 65vw;
      font-family: "neue-haas-grotesk-display", sans-serif;
      font-weight: 400;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 30px;
    }
    .glitch:hover:before,
    .glitch:hover:after {
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: -1;
      content: 'This is a mini historical archive where you can experience tiny bits of history through defining soundbites'
    }
    .glitch:hover:before {
      top: 60.5%;
      left: 60.5%;
      color: rgba(233, 30, 99, 0.8);
      animation: distort1 500ms linear infinite;
      content: 
      'This is a mini historical archive where you can experience tiny bits of history through defining soundbites'
    }
    
    .glitch:hover:after {
          top: 60.5%;
          left: 60.5%;
          color: rgb(3, 140, 164);
          animation: distort2 500ms linear infinite;
          content: 'This is a mini historical archive where you can experience tiny bits of history through defining soundbites'
          }

            @keyframes distort1 {
              0% {
                top: 49.5%;
                left: 49.5%;
            }
              12.5% {
                top: 49.5%;
                left: 50%;
            }
              25% {
                top: 49.5%;
                left: 50.5%;
            }
              37.5% {
                top: 50%;
                left: 50.5%;
            }
              50% {
                top: 50.5%;
                left: 50.5%;
            }
              62.5% {
                top: 50.5%;
                left: 50%;
            }
              75% {
                top: 50.5%;
                left: 49.5%;
            }
              87.5% {
                top: 50%;
                left: 49.5%;
            }
              100% {
                top: 49.5%;
                left: 49.5%;
            }
            }
            
            @keyframes distort2 {
              0% {
                top: 50.5%;
                left: 50.5%;
            }
              12.5% {
                top: 50%;
                left: 50.5%;
            }
              25% {
                top: 49.5%;
                left: 50.5%;
            }
              37.5% {
                top: 49.5%;
                left: 50%;
            }
              50% {
                top: 49.5%;
                left: 49.5%;
            }
              62.5% {
                top: 50%;
                left: 49.5%;
            }
              75% {
                top: 50.5%;
                left: 49.5%;
            }
              87.5% {
                top: 50.5%;
                left: 50%;
            }
              100% {
                top: 50.5%;
                left: 50.5%;
            }
            }