body {
  background-color: #26262d;
  color: #a2a2a6;
  display: flex;
  font-family: 'Roboto Mono', monospace;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
body .mainContainer {

}
body .mainContainer h1 { font-weight: bold; color: white; font-size: 90px; text-transform: uppercase; letter-spacing: 4px; }
body .mainContainer h1,
body .mainContainer h2 {
    color: #fff;
}
body .mainContainer h2 {
    font-weight: 300;
}
body .mainContainer h2 strong {
    font-weight: 900;
    font-size: 40px;
}
body .mainContainer h3 {
    color: #149CA8;
}
a {
    color: #d2d2d2;
}
a:hover, a:active, a:focus { color: #149CA8; }
.largeFont a {
  margin-top: 20px;
  font-size: 20px;
  text-decoration: none;
}

.img-circle {
  margin: 100px 0 30px 0;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  overflow: hidden;
}

.copyright {
  position: absolute;
  left: 30px;
  bottom: 30px;
  font-size: 12px;
  font-weight: 300;
}

.glitch {
  position: relative;
  width: auto;
  margin: 0 auto;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  width: 100%;
  color: white;
  background: #26262d;
  overflow: hidden;
  text-align: center;
  animation: noise-anim 2s infinite linear alternate-reverse;
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: #26262d;
  overflow: hidden;
  animation: noise-anim-2 15s infinite linear alternate-reverse;
  width: 100%;
  text-align: center;
}

@media screen and (max-height: 700px) {
  body .mainContainer h1 {
    font-size: 70px;
    margin: 0 0 30px 0;
  }

  .img-circle {
    margin: 30px 0;
  }
}

@media screen and (max-height: 600px) {
  body .mainContainer h1 {
    font-size: 30px;
    margin: 0 0 30px 0;
  }

  body .mainContainer h2 strong {
    font-size: inherit;
  }

  .copyright {
    left: 0;
    width: 100%;
    text-align: center;
  }
}

@keyframes noise-anim-2 {
  0% {
    clip-path: inset(6% 0 30% 0);
  }
  5% {
    clip-path: inset(63% 0 21% 0);
  }
  10% {
    clip-path: inset(29% 0 38% 0);
  }
  15% {
    clip-path: inset(100% 0 1% 0);
  }
  20% {
    clip-path: inset(1% 0 60% 0);
  }
  25% {
    clip-path: inset(11% 0 10% 0);
  }
  30% {
    clip-path: inset(72% 0 9% 0);
  }
  35% {
    clip-path: inset(15% 0 38% 0);
  }
  40% {
    clip-path: inset(3% 0 53% 0);
  }
  45% {
    clip-path: inset(59% 0 13% 0);
  }
  50% {
    clip-path: inset(86% 0 3% 0);
  }
  55% {
    clip-path: inset(90% 0 4% 0);
  }
  60% {
    clip-path: inset(95% 0 4% 0);
  }
  65% {
    clip-path: inset(81% 0 7% 0);
  }
  70% {
    clip-path: inset(24% 0 10% 0);
  }
  75% {
    clip-path: inset(51% 0 2% 0);
  }
  80% {
    clip-path: inset(15% 0 60% 0);
  }
  85% {
    clip-path: inset(100% 0 1% 0);
  }
  90% {
    clip-path: inset(59% 0 30% 0);
  }
  95% {
    clip-path: inset(29% 0 21% 0);
  }
  100% {
    clip-path: inset(77% 0 5% 0);
  }
}

@keyframes noise-anim {
  0% {
    clip-path: inset(31% 0 49% 0);
  }
  5% {
    clip-path: inset(68% 0 11% 0);
  }
  10% {
    clip-path: inset(85% 0 7% 0);
  }
  15% {
    clip-path: inset(98% 0 3% 0);
  }
  20% {
    clip-path: inset(92% 0 9% 0);
  }
  25% {
    clip-path: inset(59% 0 13% 0);
  }
  30% {
    clip-path: inset(12% 0 42% 0);
  }
  35% {
    clip-path: inset(4% 0 21% 0);
  }
  40% {
    clip-path: inset(43% 0 2% 0);
  }
  45% {
    clip-path: inset(59% 0 20% 0);
  }
  50% {
    clip-path: inset(20% 0 60% 0);
  }
  55% {
    clip-path: inset(61% 0 12% 0);
  }
  60% {
    clip-path: inset(16% 0 2% 0);
  }
  65% {
    clip-path: inset(34% 0 60% 0);
  }
  70% {
    clip-path: inset(80% 0 15% 0);
  }
  75% {
    clip-path: inset(93% 0 7% 0);
  }
  80% {
    clip-path: inset(26% 0 74% 0);
  }
  85% {
    clip-path: inset(35% 0 16% 0);
  }
  90% {
    clip-path: inset(81% 0 11% 0);
  }
  95% {
    clip-path: inset(42% 0 15% 0);
  }
  100% {
    clip-path: inset(95% 0 5% 0);
  }
}