* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: #050505;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 16px;
  color: #FFFFFF;
}

body {
  margin: 0;
  background: #050505;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 16px;
  color: #FFFFFF;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.8) 0%, transparent 60%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.7) 0%, transparent 60%),
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,0.8) 0%, transparent 60%),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,0.7) 0%, transparent 60%),
    radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.9) 0%, transparent 60%);

  background-size: 300px 300px;
  background-repeat: repeat;

  animation: driftSlow 80s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,0.9) 0%, transparent 70%),
    radial-gradient(2px 2px at 60% 60%, rgba(255,255,255,0.8) 0%, transparent 70%),
    radial-gradient(3px 3px at 80% 10%, rgba(255,255,255,0.9) 0%, transparent 70%);

  background-size: 500px 500px;
  background-repeat: repeat;

  animation: driftFast 40s linear infinite;
}

@keyframes driftSlow {
  from { transform: translateY(0); }
  to { transform: translateY(-400px); }
}

@keyframes driftFast {
  from { transform: translateY(0); }
  to { transform: translateY(-600px); }
}


.wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



.wrapper h1.glitch {
  color: white;
  font-weight: 200;
  letter-spacing: 1.4px;
  position: relative;
  font-size: 30px;
  padding: 30px;
}

.wrapper h1.glitch::before,
.wrapper h1.glitch::after {
  padding: 30px;
  color: white;
  content: "I create digital things.";
  position: absolute;
  width: 100%;
  height: 100%;
  background: none;
  overflow: hidden;
  top: 0;
}

.wrapper h1.glitch::before {
  left: 3px;
  text-shadow: -3px -2px 0 red;
  animation: glitch-animation-1 2s linear infinite alternate-reverse;
}

.wrapper h1.glitch::after {
  left: -3px;
  text-shadow: -3px -2px 0 aqua;
  animation: glitch-animation-2 2s linear infinite alternate-reverse;
}


@keyframes glitch-animation-1 {
  0% { clip: rect(102px, 350px, 140px, 30px); }
  5% { clip: rect(82px, 350px, 142px, 30px); }
  10% { clip: rect(65px, 350px, 44px, 30px); }
  15% { clip: rect(32px, 350px, 56px, 30px); }
  20% { clip: rect(100px, 350px, 14px, 30px); }
  25% { clip: rect(81px, 350px, 91px, 30px); }
  30% { clip: rect(122px, 350px, 23px, 30px); }
  35% { clip: rect(98px, 350px, 73px, 30px); }
  40% { clip: rect(40px, 350px, 125px, 30px); }
  45% { clip: rect(132px, 350px, 19px, 30px); }
  50% { clip: rect(134px, 350px, 11px, 30px); }
  55% { clip: rect(37px, 350px, 67px, 30px); }
  60% { clip: rect(130px, 350px, 52px, 30px); }
  65% { clip: rect(23px, 350px, 55px, 30px); }
  70% { clip: rect(135px, 350px, 139px, 30px); }
  75% { clip: rect(131px, 350px, 83px, 30px); }
  80% { clip: rect(90px, 350px, 44px, 30px); }
  85% { clip: rect(81px, 350px, 101px, 30px); }
  90% { clip: rect(37px, 350px, 5px, 30px); }
  95% { clip: rect(95px, 350px, 121px, 30px); }
  100% { clip: rect(75px, 350px, 80px, 30px); }
}

@keyframes glitch-animation-2 {
  0% { clip: rect(32px, 350px, 146px, 30px); }
  5% { clip: rect(10px, 350px, 78px, 30px); }
  10% { clip: rect(138px, 350px, 146px, 30px); }
  15% { clip: rect(146px, 350px, 144px, 30px); }
  20% { clip: rect(85px, 350px, 55px, 30px); }
  25% { clip: rect(115px, 350px, 116px, 30px); }
  30% { clip: rect(89px, 350px, 130px, 30px); }
  35% { clip: rect(10px, 350px, 65px, 30px); }
  40% { clip: rect(24px, 350px, 12px, 30px); }
  45% { clip: rect(74px, 350px, 142px, 30px); }
  50% { clip: rect(77px, 350px, 101px, 30px); }
  55% { clip: rect(111px, 350px, 98px, 30px); }
  60% { clip: rect(13px, 350px, 125px, 30px); }
  65% { clip: rect(116px, 350px, 103px, 30px); }
  70% { clip: rect(144px, 350px, 84px, 30px); }
  75% { clip: rect(121px, 350px, 37px, 30px); }
  80% { clip: rect(37px, 350px, 24px, 30px); }
  85% { clip: rect(142px, 350px, 27px, 30px); }
  90% { clip: rect(66px, 350px, 98px, 30px); }
  95% { clip: rect(13px, 350px, 146px, 30px); }
  100% { clip: rect(4px, 350px, 3px, 30px); }
}