body {
  padding: 0;
  margin: 0;
  display: block;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

h1 {
  padding: 0;
  margin: 0;
  font-family: 'Red Hat Display', sans-serif;

}

.logo {
  position: relative;
  color: #fff;
  padding-bottom: 5%;
}



.app {
  font-size: 2em;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 25%;
  z-index: 999;
  text-align: center;
}


.sub {
  font-size: 0.5em;
  color: #fff;
  letter-spacing: 0.1em;
  font-family: 'Red Hat Display', sans-serif;
  text-align: center;
}



.text-glitch {
  position: relative;
  color: #fff;
  font-size: 3em;
  letter-spacing: 0.2em;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.text-glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  left: -2px;
  text-shadow: -2px 0 #ff00c1, 2px 2px #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}


@keyframes glitch-anim {
  0% {
    clip: rect(9px, 9999px, 63px, 0);
    transform: skew(0.53deg);
  }
  5% {
    clip: rect(71px, 9999px, 39px, 0);
    transform: skew(0.35deg);
  }
  10% {
    clip: rect(84px, 9999px, 34px, 0);
    transform: skew(0.3deg);
  }
  15% {
    clip: rect(17px, 9999px, 5px, 0);
    transform: skew(0.09deg);
  }
  20% {
    clip: rect(59px, 9999px, 83px, 0);
    transform: skew(0.44deg);
  }
  25% {
    clip: rect(68px, 9999px, 23px, 0);
    transform: skew(0.31deg);
  }
  30% {
    clip: rect(74px, 9999px, 37px, 0);
    transform: skew(0.5deg);
  }
  35% {
    clip: rect(64px, 9999px, 10px, 0);
    transform: skew(0.67deg);
  }
  40% {
    clip: rect(6px, 9999px, 82px, 0);
    transform: skew(0.01deg);
  }
  45% {
    clip: rect(70px, 9999px, 3px, 0);
    transform: skew(0.96deg);
  }
  50% {
    clip: rect(36px, 9999px, 94px, 0);
    transform: skew(0.51deg);
  }
  55% {
    clip: rect(94px, 9999px, 83px, 0);
    transform: skew(0.03deg);
  }
  60% {
    clip: rect(45px, 9999px, 43px, 0);
    transform: skew(0.89deg);
  }
  65% {
    clip: rect(18px, 9999px, 87px, 0);
    transform: skew(0.42deg);
  }
  70% {
    clip: rect(18px, 9999px, 38px, 0);
    transform: skew(0.36deg);
  }
  75% {
    clip: rect(86px, 9999px, 42px, 0);
    transform: skew(0.76deg);
  }
  80% {
    clip: rect(90px, 9999px, 38px, 0);
    transform: skew(0.09deg);
  }
  85% {
    clip: rect(29px, 9999px, 47px, 0);
    transform: skew(0.11deg);
  }
  90% {
    clip: rect(93px, 9999px, 39px, 0);
    transform: skew(0.08deg);
  }
  95% {
    clip: rect(81px, 9999px, 98px, 0);
    transform: skew(0.26deg);
  }
}
@keyframes glitch-anim2 {
  0% {
    clip: rect(6px, 9999px, 42px, 0);
    transform: skew(0.71deg);
  }
  5% {
    clip: rect(67px, 9999px, 74px, 0);
    transform: skew(0.89deg);
  }
  10% {
    clip: rect(31px, 9999px, 43px, 0);
    transform: skew(0.99deg);
  }
  15% {
    clip: rect(78px, 9999px, 45px, 0);
    transform: skew(0.46deg);
  }
  20% {
    clip: rect(14px, 9999px, 84px, 0);
    transform: skew(0.96deg);
  }
  25% {
    clip: rect(29px, 9999px, 9px, 0);
    transform: skew(0.41deg);
  }
  30% {
    clip: rect(72px, 9999px, 57px, 0);
    transform: skew(0.41deg);
  }
  35% {
    clip: rect(3px, 9999px, 64px, 0);
    transform: skew(0.12deg);
  }
  40% {
    clip: rect(59px, 9999px, 89px, 0);
    transform: skew(0.36deg);
  }
  45% {
    clip: rect(11px, 9999px, 66px, 0);
    transform: skew(0.32deg);
  }
  50% {
    clip: rect(91px, 9999px, 31px, 0);
    transform: skew(0.31deg);
  }
  55% {
    clip: rect(47px, 9999px, 61px, 0);
    transform: skew(0.23deg);
  }
  60% {
    clip: rect(5px, 9999px, 7px, 0);
    transform: skew(0.88deg);
  }
  65% {
    clip: rect(10px, 9999px, 51px, 0);
    transform: skew(0.52deg);
  }
  70% {
    clip: rect(65px, 9999px, 27px, 0);
    transform: skew(0.15deg);
  }
  75% {
    clip: rect(70px, 9999px, 11px, 0);
    transform: skew(0.42deg);
  }
  80% {
    clip: rect(22px, 9999px, 78px, 0);
    transform: skew(0.86deg);
  }
  85% {
    clip: rect(5px, 9999px, 36px, 0);
    transform: skew(0.61deg);
  }
  90% {
    clip: rect(12px, 9999px, 36px, 0);
    transform: skew(0.35deg);
  }
  95% {
    clip: rect(27px, 9999px, 57px, 0);
    transform: skew(0.44deg);
  }
}




.glitch {
  background-size: cover;
	position: relative;
	overflow: hidden;
}
.glitch img {
	background-size: cover;
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
	position: relative;
	z-index: 1;
	display: block;
}
.glitch__layers {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.glitch__layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url("assets/main-bg-image-2.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;

}
.glitch__layer:nth-child(1) {
	transform: translateX(-5%);
	animation: glitch-anim-1 2s infinite linear alternate;
}
.glitch__layer:nth-child(2) {
	transform: translateX(3%) translateY(3%);
	animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.glitch__layer:nth-child(3) {
	transform: translateX(5%);
	animation: glitch-anim-flash 1s infinite linear;
}
@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
	}
	10% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
	}
	50% {
		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
	}
	60% {
		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
	}
	70% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
	}
}
@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
	}
	15% {
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	25% {
		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	45% {
		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
	}
	50% {
		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
	}
	65% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	75% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
	}
	95% {
		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
	}
	100% {
		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
	}
}
@keyframes glitch-anim-flash {
	0% {
		opacity: .2;
	}
	30%, 100% {
		opacity: 0;
	}
}



.glitch img {
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  position: relative;
  z-index: 1;
  display: block;
}



@media only screen and (min-width: 200px) {
  .glitch img {
  background-size: cover;
}

.sub {
  font-size: 0.8em;
  margin: 5%;

}

}

@media only screen and (max-width: 1100px) {
  .glitch img {
  background-size: cover;
  width: auto;
}



}