@font-face {
	font-family: "Ultra";
	src: url("./fonts/ultra-regular-webfont.woff2") format("woff2"),
		url("./fonts/ultra-regular-webfont.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "palatinobold";
	src:url("./fonts/13740-webfont.woff2") format("woff2"),
		url("./fonts/13740-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "palatinoroman";
	src:url("./fonts/13738-webfont.woff2") format("woff2"),
		url("./fonts/13738-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

body {
  background: black;
  font-family: "palatinoroman", serif;
  font-size: 1.9vw;
  color: white;
}

a:link {
	color: blue;
}

a:visited {
	color: #CC0000;
}

#header {
	position: relative;
	top: 5%;
	width: 100%;
	margin-top: 4%;
}

#news {
	position: relative;
	width: 80%;
	margin-left: 10%;
	margin-top: 7%;
}

#footer{
	font-size: 1vw;
	position: relative;
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
}

.glitch {
  font-family: "Ultra", "Adobe Blank";
  color: white;
  font-size: 7vw;
  position: relative;
  width: 80%;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(0.3vw, 100vw, 3.4vw, 0);
  }
  8.33333% {
    clip: rect(3vw, 100vw, 6.1vw, 0);
  }
  16.66667% {
    clip: rect(6.9vw, 100vw, 4.3vw, 0);
  }
  25% {
    clip: rect(5vw, 100vw, 0.3vw, 0);
  }
  33.33333% {
    clip: rect(6vw, 100vw, 0.1vw, 0);
  }
  41.66667% {
    clip: rect(0.7vw, 100vw, 1.7vw, 0);
  }
  50% {
    clip: rect(2.9vw, 100vw, 2.4vw, 0);
  }
  58.33333% {
    clip: rect(4.4vw, 100vw, 0.2vw, 0);
  }
  66.66667% {
    clip: rect(1vw, 100vw, 3vw, 0);
  }
  75% {
    clip: rect(6.2vw, 100vw, 1.5vw, 0);
  }
  83.33333% {
    clip: rect(1.6vw, 100vw, 6.1vw, 0);
  }
  91.66667% {
    clip: rect(7.3vw, 100vw, 7.3vw, 0);
  }
  100% {
    clip: rect(3.9vw, 100vw, 3.9vw, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  text-shadow: -1px -2px blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 100vw, 0, 0);
  animation: noise-anim 6s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(5.5vw, 100vw, 1.4vw, 0);
  }
  5% {
    clip: rect(6.5vw, 100vw, 6.9vw, 0);
  }
  10% {
    clip: rect(6.5vw, 100vw, 3.6vw, 0);
  }
  15% {
    clip: rect(3.6vw, 100vw, 4.3vw, 0);
  }
  20% {
    clip: rect(0.4vw, 100vw, 6.6vw, 0);
  }
  25% {
    clip: rect(1.9vw, 100vw, 8.1vw, 0);
  }
  30% {
    clip: rect(4.3vw, 100vw, 6.6vw, 0);
  }
  35% {
    clip: rect(1.5vw, 100vw, 8.3vw, 0);
  }
  40% {
    clip: rect(3.6vw, 100vw, 4.7vw, 0);
  }
  45% {
    clip: rect(6.1vw, 100vw, 0.9vw, 0);
  }
  50% {
    clip: rect(3.9vw, 100vw, 2.8vw, 0);
  }
  55% {
    clip: rect(4.8vw, 100vw, 8.5vw, 0);
  }
  60% {
    clip: rect(0.6vw, 100vw, 7.0vw, 0);
  }
  65% {
    clip: rect(2.1vw, 100vw, 4.0vw, 0);
  }
  70% {
    clip: rect(7.0vw, 100vw, 6.8vw, 0);
  }
  75% {
    clip: rect(5.6vw, 100vw, 3.5vw, 0);
  }
  80% {
    clip: rect(7.6vw, 100vw, 2.8vw, 0);
  }
  85% {
    clip: rect(3.6vw, 100vw, 1.2vw, 0);
  }
  90% {
    clip: rect(2.4vw, 100vw, 8.2vw, 0);
  }
  95% {
    clip: rect(5.9vw, 100vw, 5.1vw, 0);
  }
  100% {
    clip: rect(7.1vw, 100vw, 8.6vw, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -3px;
  text-shadow: 1px 1px red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 100vw, 0, 0);
  animation: noise-anim-2 7s infinite linear alternate-reverse;
}
