@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  user-select: none;
}
body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}
.title {
  width: 100%;
  min-height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title .text {
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 45px;
  transform: scale(3);
  user-select: none;
  padding: 30px;
  text-transform: uppercase;
  font-family: 'FixedSys';
}
.content {
  width: 100%;
  height: 100%;
}
.title .text:before,
.title .text:after {
  padding: 30px;
  color: white;
  content: attr(data-text);
  position: absolute;
  background: black;
  overflow: hidden;
  top: 0;
}
.title .text:before{
  left: 3px;
  text-shadow: -4px 0 #00FFFF;				
  animation: line-in 2s linear, glitch-1 1.5s 2s linear infinite reverse;
}
.title .text:after {
  left: -3px;
  text-shadow: -4px 0 #FF00FF;
  animation: line-in 2s linear, glitch-2 1.5s 2s linear infinite reverse;
}

.links {
  bottom: 5px;
  align-content: center;
  text-align: center;
  width: 100%;
  left: 50%;
  z-index: 5;
  position: sticky;
}

.links a {
	padding-right: 30px;
}

.link {
	display: inline-block;
	font-size: 16px;
	width: 64px;
	height: 64px;
	text-align: center;
	border-radius: 1000px;
	border: 3px solid white;
	color: white;
    transition: all 0.15s ease-in-out;
}

.link:hover {
	cursor: pointer;
}

.link i {
	line-height: 1.3em;
}

.link img {
	width: 64px;
	height: 64px;
	object-fit: none;
	transition: all 0.15s ease-in-out;
}

.link:hover img {
	filter: grayscale(100%) brightness(10);
}

.twitter {
	border-color: #5DA9DD;
}

.twitter:hover {
	background-color: #5DA9DD;
}

.twitter img {
	object-position: 0 0;
}

.instagram {
	border-color: #DD2A7B;
}

.instagram:hover {
	background-color: #DD2A7B;
}

.instagram img {
	object-position: -64px 0;
}

.twitch {
	border-color: #9147FF;
}

.twitch:hover {
	background-color: #9147FF;
}

.twitch img {
	object-position: -128px 0;
}

.youtube {
	border-color: #FF0000;
}

.youtube:hover {
	background-color: #FF0000;
}

.youtube img {
	object-position: -192px 0;
}

.spotify {
	border-color: #1ED760;
}

.spotify:hover {
	background-color: #1ED760;
}

.spotify img {
	object-position: -256px 0;
}

.itunes {
	border-color: #F7232D;
}

.itunes:hover {
	background-color: #F7232D;
}

.itunes img {
	object-position: -320px 0;
}

.deezer {
	border-color: #C2FF00;
}

.deezer:hover {
	background-color: #C2FF00;
}

.deezer img {
	object-position: -384px 0px;
}

.amazon {
	border-color: #007CC3;
}

.amazon:hover {
	background-color: #007CC3;
}

.amazon img {
	object-position: -448px 0;
}

.soundcloud {
	border-color: #FF5500;
}

.soundcloud:hover {
	background-color: #FF5500;
}

.soundcloud img {
	object-position: 0 -64px;
}

.discord {
	border-color: #5865F2;
}

.discord:hover {
	background-color: #5865F2;
}

.discord img {
	object-position: -128px -64px;
}

.email {
	border-color: white;
}

.email:hover {
	background-color: white;
}

.email img {
	object-position: -64px -64px;
}

.email:hover img {
	filter: brightness(0);
}

.kick {
	border-color: #53FC18;
}

.kick:hover {
	background-color: #53FC18;
}

.kick img {
	object-position: -192px -64px;
}


@font-face {
  font-family: 'FixedSys';
  src: url("FSEX300.ttf") format("truetype");
}

@keyframes line-in {
  0% {
    letter-spacing: 300px;
	text-shadow: none;
  }
  5% {
    letter-spacing: 285px;
	text-shadow: none;
  }
  10% {
    letter-spacing: 270px;
	text-shadow: none;
  }
  15% {
    letter-spacing: 255px;
	text-shadow: none;
  }
  20% {
    letter-spacing: 240px;
	text-shadow: none;
  }
  25% {
    letter-spacing: 225px;
	text-shadow: none;
  }
  30% {
    letter-spacing: 210px;
	text-shadow: none;
  }
  35% {
    letter-spacing: 195px;
	text-shadow: none;
  }
  40% {
    letter-spacing: 180px;
	text-shadow: none;
  }
  45% {
    letter-spacing: 165px;
	text-shadow: none;
  }
  50% {
    letter-spacing: 150px;
	text-shadow: none;
  }
  55% {
    letter-spacing: 135px;
	text-shadow: none;
  }
  60% {
    letter-spacing: 120px;
	text-shadow: none;
  }
  65% {
    letter-spacing: 105px;
	text-shadow: none;
  }
  70% {
    letter-spacing: 90px;
	text-shadow: none;
  }
  75% {
    letter-spacing: 75px;
	text-shadow: none;
  }
  80% {
    letter-spacing: 60px;
	text-shadow: none;
  }
  85% {
    letter-spacing: 45px;
	text-shadow: none;
  }
  90% {
    letter-spacing: 30px;
	text-shadow: none;
  }
  95% {
    letter-spacing: 15px;
	text-shadow: none;
  }
  100% {
    letter-spacing: 0px;
	text-shadow: none;
  }

}

@keyframes glitch-1 {
  0% {
    clip: rect(132px, 350px, 101px, 30px);
  }
  5% {
    clip: rect(17px, 350px, 94px, 30px);
  }
  10% {
    clip: rect(40px, 350px, 66px, 30px);
  }
  15% {
    clip: rect(87px, 350px, 82px, 30px);
  }
  20% {
    clip: rect(137px, 350px, 61px, 30px);
  }
  25% {
    clip: rect(34px, 350px, 14px, 30px);
  }
  30% {
    clip: rect(133px, 350px, 74px, 30px);
  }
  35% {
    clip: rect(76px, 350px, 107px, 30px);
  }
  40% {
    clip: rect(59px, 350px, 130px, 30px);
  }
  45% {
    clip: rect(29px, 350px, 84px, 30px);
  }
  50% {
    clip: rect(22px, 350px, 67px, 30px);
  }
  55% {
    clip: rect(67px, 350px, 62px, 30px);
  }
  60% {
    clip: rect(10px, 350px, 105px, 30px);
  }
  65% {
    clip: rect(78px, 350px, 115px, 30px);
  }
  70% {
    clip: rect(105px, 350px, 13px, 30px);
  }
  75% {
    clip: rect(15px, 350px, 75px, 30px);
  }
  80% {
    clip: rect(66px, 350px, 39px, 30px);
  }
  85% {
    clip: rect(133px, 350px, 73px, 30px);
  }
  90% {
    clip: rect(36px, 350px, 128px, 30px);
  }
  95% {
    clip: rect(68px, 350px, 103px, 30px);
  }
  100% {
    clip: rect(14px, 350px, 100px, 30px);
  }
}
@keyframes glitch-2 {
  0% {
    clip: rect(129px, 350px, 36px, 30px);
  }
  5% {
    clip: rect(36px, 350px, 4px, 30px);
  }
  10% {
    clip: rect(85px, 350px, 66px, 30px);
  }
  15% {
    clip: rect(91px, 350px, 91px, 30px);
  }
  20% {
    clip: rect(148px, 350px, 138px, 30px);
  }
  25% {
    clip: rect(38px, 350px, 122px, 30px);
  }
  30% {
    clip: rect(69px, 350px, 54px, 30px);
  }
  35% {
    clip: rect(98px, 350px, 71px, 30px);
  }
  40% {
    clip: rect(146px, 350px, 34px, 30px);
  }
  45% {
    clip: rect(134px, 350px, 43px, 30px);
  }
  50% {
    clip: rect(102px, 350px, 80px, 30px);
  }
  55% {
    clip: rect(119px, 350px, 44px, 30px);
  }
  60% {
    clip: rect(106px, 350px, 99px, 30px);
  }
  65% {
    clip: rect(141px, 350px, 74px, 30px);
  }
  70% {
    clip: rect(20px, 350px, 78px, 30px);
  }
  75% {
    clip: rect(133px, 350px, 79px, 30px);
  }
  80% {
    clip: rect(78px, 350px, 52px, 30px);
  }
  85% {
    clip: rect(35px, 350px, 39px, 30px);
  }
  90% {
    clip: rect(67px, 350px, 70px, 30px);
  }
  95% {
    clip: rect(71px, 350px, 103px, 30px);
  }
  100% {
    clip: rect(83px, 350px, 40px, 30px);
  }
}