html, body, #tv {
	margin: 0;
	padding: 0;
	background: #000;
	color: white;
	font-size: 1em;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
	visibility: hidden;
	cursor: url('/assets/img/cursor.png'), auto;	
}

#tv {
  position: absolute;
  top: 0;
  left: 0;
	opacity: 0.5;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.glitch {
  background: #000 no-repeat center;
	background-image: url(/assets/img/front.png);
	background-size: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
	display: flex;
	resize: both;
	justify-content: center;
	align-items: center;
  max-height: 100%;
}

.glitch::before, .glitch::after,
.glitch .channel {
  background: inherit;
  background-size: contain;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.glitch::before {
  animation: glitch-before 1s linear infinite alternate both;
  content: "";
}
@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 70.3346552803%, 100% 70.3346552803%, 100% 76.3184724243%, 0% 76.3184724243%);
    transform: translate(4.6157828274%, 0.4265738321%);
  }
  2% {
    clip-path: polygon(0% 31.3545565865%, 100% 31.3545565865%, 100% 35.4005577789%, 0% 35.4005577789%);
    transform: translate(-4.7006965037%, -0.0338699719%);
  }
  4% {
    clip-path: polygon(0% 58.4627140525%, 100% 58.4627140525%, 100% 59.6529232588%, 0% 59.6529232588%);
    transform: translate(1.0600055742%, 0.1083641118%);
  }
  6% {
    clip-path: polygon(0% 45.167450778%, 100% 45.167450778%, 100% 49.5583482129%, 0% 49.5583482129%);
    transform: translate(5.9184193517%, 0.1037624051%);
  }
  8% {
    clip-path: polygon(0% 87.278821019%, 100% 87.278821019%, 100% 90.2846781564%, 0% 90.2846781564%);
    transform: translate(-7.4189953206%, 0.4839464182%);
  }
  10% {
    clip-path: polygon(0% 32.5137986496%, 100% 32.5137986496%, 100% 37.5470608419%, 0% 37.5470608419%);
    transform: translate(7.2815377285%, -0.00260413%);
  }
  12% {
    clip-path: polygon(0% 2.1600639702%, 100% 2.1600639702%, 100% 12.0217344272%, 0% 12.0217344272%);
    transform: translate(-1.0510605193%, 0.3283171985%);
  }
  14% {
    clip-path: polygon(0% 57.0788251109%, 100% 57.0788251109%, 100% 61.0470382165%, 0% 61.0470382165%);
    transform: translate(-2.2531935143%, 0.3991345063%);
  }
  16% {
    clip-path: polygon(0% 3.380202457%, 100% 3.380202457%, 100% 6.7477783503%, 0% 6.7477783503%);
    transform: translate(1.968705816%, -0.3907935881%);
  }
  18% {
    clip-path: polygon(0% 60.7365219788%, 100% 60.7365219788%, 100% 62.8365845784%, 0% 62.8365845784%);
    transform: translate(3.559280481%, 0.0048635185%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
.glitch::after {
  animation: glitch-after 1s linear infinite alternate both;
  content: "";
}
@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 18.0606954272%, 100% 18.0606954272%, 100% 23.2302836545%, 0% 23.2302836545%);
    transform: translate(-3.5456542782%, -0.0733594462%);
  }
  2% {
    clip-path: polygon(0% 25.1434503392%, 100% 25.1434503392%, 100% 26.4366974701%, 0% 26.4366974701%);
    transform: translate(1.7378460475%, 0.2571745302%);
  }
  4% {
    clip-path: polygon(0% 39.3390821197%, 100% 39.3390821197%, 100% 41.26421217%, 0% 41.26421217%);
    transform: translate(-0.9055690451%, 0.0289919287%);
  }
  6% {
    clip-path: polygon(0% 19.4928762993%, 100% 19.4928762993%, 100% 27.893660013%, 0% 27.893660013%);
    transform: translate(-0.3258311806%, -0.441719216%);
  }
  8% {
    clip-path: polygon(0% 67.4835719659%, 100% 67.4835719659%, 100% 77.2136562155%, 0% 77.2136562155%);
    transform: translate(-4.2512140545%, -0.4472711315%);
  }
  10% {
    clip-path: polygon(0% 45.3826945468%, 100% 45.3826945468%, 100% 48.3415887522%, 0% 48.3415887522%);
    transform: translate(0.750606974%, 0.3089356966%);
  }
  12% {
    clip-path: polygon(0% 41.4019154645%, 100% 41.4019154645%, 100% 49.4242653477%, 0% 49.4242653477%);
    transform: translate(-3.3628712274%, 0.470357473%);
  }
  14% {
    clip-path: polygon(0% 63.7625351513%, 100% 63.7625351513%, 100% 73.7544731809%, 0% 73.7544731809%);
    transform: translate(-2.3470629386%, -0.3501293045%);
  }
  16% {
    clip-path: polygon(0% 34.7873617232%, 100% 34.7873617232%, 100% 41.7269278955%, 0% 41.7269278955%);
    transform: translate(-6.354166386%, -0.2851708511%);
  }
  18% {
    clip-path: polygon(0% 28.5871177065%, 100% 28.5871177065%, 100% 34.0389077867%, 0% 34.0389077867%);
    transform: translate(-2.9338502959%, 0.4843039309%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
.glitch .channel {
  mix-blend-mode: screen;
}
.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.glitch .r {
  animation: rgb-shift-r 1s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(-0.0316901186%, 0.4007037856%);
  }
  2% {
    transform: translate(-0.8475113759%, 0.4206563555%);
  }
  4% {
    transform: translate(-1.2708089112%, 0.2289488909%);
  }
  6% {
    transform: translate(-1.2921868684%, -0.3407721822%);
  }
  8% {
    transform: translate(1.6343102103%, -0.0274606083%);
  }
  10% {
    transform: translate(-0.3327159978%, 0.413134096%);
  }
  12% {
    transform: translate(1.0101190877%, 0.1288858101%);
  }
  14% {
    transform: translate(1.6814635019%, 0.3625039569%);
  }
  16% {
    transform: translate(1.9053243671%, -0.480634624%);
  }
  18% {
    transform: translate(-0.0083723269%, -0.2320594494%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .r::before {
  background: #f00;
}
.glitch .g {
  animation: rgb-shift-g 1s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(0.2852007255%, -0.3904541488%);
  }
  2% {
    transform: translate(0.4381394726%, -0.3509376467%);
  }
  4% {
    transform: translate(1.280233584%, -0.4078121333%);
  }
  6% {
    transform: translate(0.1472240968%, -0.3161434299%);
  }
  8% {
    transform: translate(0.7106886115%, 0.3177736193%);
  }
  10% {
    transform: translate(-0.6550120521%, 0.0482902578%);
  }
  12% {
    transform: translate(-1.6278387055%, -0.1163976222%);
  }
  14% {
    transform: translate(0.1810131044%, -0.2198785925%);
  }
  16% {
    transform: translate(-0.0010653961%, 0.2242025739%);
  }
  18% {
    transform: translate(0.4367248369%, -0.0526020154%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .g::before {
  background: #0f0;
}
.glitch .b {
  animation: rgb-shift-b 1s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(-0.9336679717%, 0.0262518183%);
  }
  2% {
    transform: translate(-1.2795710925%, -0.3507423929%);
  }
  4% {
    transform: translate(0.2220289821%, 0.3928976416%);
  }
  6% {
    transform: translate(-1.1990516896%, -0.3216646936%);
  }
  8% {
    transform: translate(1.7660350499%, 0.101289543%);
  }
  10% {
    transform: translate(-0.6187981655%, 0.2637096653%);
  }
  12% {
    transform: translate(0.0343676095%, -0.2361568202%);
  }
  14% {
    transform: translate(1.2548590041%, 0.1226581394%);
  }
  16% {
    transform: translate(-0.7510251984%, -0.012351075%);
  }
  18% {
    transform: translate(0.9780180709%, -0.4787835147%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .b::before {
  background: #00f;
}