ispwned/src/app/SearchField.css

.searchWrapper{
    display: flex;
    width: 500px;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.search{
    
}

.title{
    font-size: 45px;
}

.check-button{
    height: 52px;
    padding-bottom: 7px;
    margin-left: 11px;
}

.display-message{
    padding-top: 13px;
}

.safe-message{
    color: green;
}

.not-safe-message{
    color: #ff4a4a;
}

.searchResults {
    padding-top: 21px;
    max-height: 400px;
    overflow: auto;
    margin: 0 .4rem;
}

.searchResults div{margin: 5px 0}

.search .email-field{
    border: 1px solid #000;
    height: 46px;
    width: 375px;
    font-family: RMTyperighter;
    font-size: 18px;
    padding: 3px;
}

.hover-field {
    text-decoration: none
}
.hover-field:hover {
    position: relative
}
.hover-field span {
    display: none;
    font-size: 12px;
    color: #000;
}
.hover-field:hover span {
    border: #8f8e8e 1px solid;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    left: -6px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: -46px;
    text-decoration: none;
}

/* Glitch Effect */
.glitch-text {
    /* font-size: 100px; */
    color: black;
    position: relative;
  }
  @keyframes glitch-text-anim-1 {
    0% {
      clip: rect(24px, 450px, 67px, 0);
    }
    5.88235% {
      clip: rect(44px, 450px, 30px, 0);
    }
    11.76471% {
      clip: rect(112px, 450px, 107px, 0);
    }
    17.64706% {
      clip: rect(105px, 450px, 11px, 0);
    }
    23.52941% {
      clip: rect(75px, 450px, 70px, 0);
    }
    29.41176% {
      clip: rect(3px, 450px, 6px, 0);
    }
    35.29412% {
      clip: rect(75px, 450px, 3px, 0);
    }
    41.17647% {
      clip: rect(101px, 450px, 62px, 0);
    }
    47.05882% {
      clip: rect(35px, 450px, 59px, 0);
    }
    52.94118% {
      clip: rect(18px, 450px, 9px, 0);
    }
    58.82353% {
      clip: rect(42px, 450px, 104px, 0);
    }
    64.70588% {
      clip: rect(17px, 450px, 110px, 0);
    }
    70.58824% {
      clip: rect(7px, 450px, 23px, 0);
    }
    76.47059% {
      clip: rect(19px, 450px, 114px, 0);
    }
    82.35294% {
      clip: rect(18px, 450px, 23px, 0);
    }
    88.23529% {
      clip: rect(61px, 450px, 112px, 0);
    }
    94.11765% {
      clip: rect(90px, 450px, 81px, 0);
    }
    100% {
      clip: rect(79px, 450px, 82px, 0);
    }
  }
  @keyframes glitch-text-anim-2 {
    0% {
      clip: rect(81px, 450px, 36px, 0);
    }
    5.88235% {
      clip: rect(38px, 450px, 86px, 0);
    }
    11.76471% {
      clip: rect(55px, 450px, 25px, 0);
    }
    17.64706% {
      clip: rect(64px, 450px, 7px, 0);
    }
    23.52941% {
      clip: rect(58px, 450px, 62px, 0);
    }
    29.41176% {
      clip: rect(102px, 450px, 77px, 0);
    }
    35.29412% {
      clip: rect(70px, 450px, 85px, 0);
    }
    41.17647% {
      clip: rect(59px, 450px, 84px, 0);
    }
    47.05882% {
      clip: rect(38px, 450px, 115px, 0);
    }
    52.94118% {
      clip: rect(85px, 450px, 112px, 0);
    }
    58.82353% {
      clip: rect(36px, 450px, 21px, 0);
    }
    64.70588% {
      clip: rect(111px, 450px, 106px, 0);
    }
    70.58824% {
      clip: rect(106px, 450px, 54px, 0);
    }
    76.47059% {
      clip: rect(38px, 450px, 19px, 0);
    }
    82.35294% {
      clip: rect(103px, 450px, 79px, 0);
    }
    88.23529% {
      clip: rect(97px, 450px, 9px, 0);
    }
    94.11765% {
      clip: rect(23px, 450px, 41px, 0);
    }
    100% {
      clip: rect(29px, 450px, 96px, 0);
    }
  }
  .glitch-text:before, .glitch-text:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    clip: rect(0, 0, 0, 0);
  }
  .glitch-text:after {
    left: 2px;
    text-shadow: -1px 0 red;
    animation: glitch-text-anim-1 2s infinite linear alternate-reverse;
  }
  .glitch-text:before {
    left: -2px;
    text-shadow: 2px 0 blue;
    animation: glitch-text-anim-2 3s infinite linear alternate-reverse;
  }