/*
 * Bouncebag Gameboy 404 theme
 *
 * Glitch effect https://codepen.io/sandrina-p/pen/RRWaYO
 *
 * @author Lewis Wright
 * @version 2018.09.15
 */

/*
 * Pokemon Gameboy Webfont
 * By Lewis Wright
 * Based on the bitmap font from Pokemon Red, Blue and Green on Gameboy.
 * 
 * TruType, WOFF, WOFF2, EOT Compressed, and SVG 
 * -------- 
 * 
 * Created by Lewis Wright of https://bouncebag.com. 
 * 
 * 
 * Please download and host your own version of the webfont (https://www.bouncebag.com/Downloads/Misc.html) instead of linking to this file. 
*/
		@font-face {
		font-family: 'pokemon_gbregular';
		src: url('/webfont/pokemon_gbPKMN.eot');
		src: url('/webfont/pokemon_gbPKMN.eot?#iefix') format('embedded-opentype'),
			 url('/webfont/pokemon_gbPKMN.woff2') format('woff2'),
			 url('/webfont/pokemon_gbPKMN.woff') format('woff'),
			 url('/webfont/pokemon_gbPKMN.ttf') format('truetype'),
			 url('/webfont/pokemon_gbPKMN.svg#pokemon_gbregular') format('svg');
		font-weight: normal;
		font-style: normal;
		}

/*
 * Pokemon Unown Webfont
 * By Lewis Wright
 * Based on the Pokemon Unown's various forms introduced in Pokemon Gold, Silver and Crystal.
 * 
 * TruType, WOFF, WOFF2, EOT Compressed, and SVG 
 * -------- 
 * 
 * Created by Lewis Wright of https://bouncebag.com. 
 * 
 * 
 * Please download and host your own version of the webfont (https://www.bouncebag.com/Downloads/Misc.html) instead of linking to this file. 
*/
		@font-face {
			font-family: 'annoneregular';
			src: url('/webfont/annoneUnown.eot');
			src: url('/webfont/annoneUnown.eot?#iefix') format('embedded-opentype'),
				 url('/webfont/annoneUnown.woff2') format('woff2'),
				 url('/webfont/annoneUnown.woff') format('woff'),
				 url('/webfont/annoneUnown.ttf') format('truetype'),
				 url('/webfont/annoneUnown.svg#annoneregular') format('svg');
			font-weight: normal;
			font-style: normal;

		}
	
body {
  background-color: #000000;
  font-family: 'pokemon_gbregular';
  color:#000;
  font-size:14px;
  line-height: 20px;
  padding: 0;
  margin: 0;
}

.unown {
	font-family: 'annoneregular';
	font-size:1.4em;
}

a {
  color:#FFF;
}

.gbcontainer {
  position: relative;
  margin: 0 auto;
  margin-top: 2%;
  height: 708px;
  width: 375px;
}

.screen, .screen2 {
  background-size:100%;
  position: absolute;
  margin: 0 auto;
  margin-top: 77px;
  margin-left: 75px;
  height: 226px;
  width: 225px;
}
.screen {
  background-image:url(../img/screen.png);
}
.screen2 {
  background-image:url(../img/screen2.png);
}

::-webkit-scrollbar {
  display: none;
}

.white{
	color:#FFF;
}

.text{
    margin: auto;
    width: 375px;
    border: 3px solid #551A8B;
    color:#FFF;
	padding: 10px;
}

.text2{
  margin-top: 152px;
  margin-left: 10px;
}

.glitch2 {
  animation: glitch2 2s steps(100) infinite;
}

@keyframes glitch2 {
  0% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  1% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  2% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  3% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  4% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  5% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  6% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  7% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  8% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  9% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  10% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  11% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  12% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  13% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  14% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  15% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  16% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  17% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  18% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  19% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  20% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  21% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  22% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  23% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  24% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  25% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  26% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  27% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  28% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  29% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  30% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  31% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  32% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  33% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  34% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  35% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  36% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  37% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  38% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  39% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  40% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  41% {text-shadow: 50px 0 0 blue, -50px 0 0 lime;}
  42% {text-shadow: 0 0 0 blue, 0 0 0 lime;}
  43% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  44% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  45% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  46% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  47% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  48% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  49% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  50% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  51% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  52% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  53% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  54% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  55% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  56% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  57% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  58% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  59% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  60% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  61% {text-shadow: 30px 0 0 red, -30px 0 0 lime;}
  62% {text-shadow: 0 0 0 red, 0 0 0 lime;}
  63% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;}
  64% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;}
  65% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;}
  66% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;}
  67% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  68% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  69% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  70% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  71% {text-shadow: 70px 0 0 red, -70px 0 0 blue;}
  72% {text-shadow: 0 0 0 red, 0 0 0 blue;}
  73% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  74% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  75% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  76% {text-shadow: 1px 0 0 red, -1px 0 0 blue;}
  77% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  78% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  79% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  80% {text-shadow: -1px 0 0 red, 1px 0 0 blue;}
  81% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  82% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  83% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  84% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  85% {text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;}
  86% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  87% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  88% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  89% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  90% {text-shadow: -1px 0 0 red, 1px 0 0 lime;}
  91% {text-shadow: 60px 0 0 lime, -60px 0 0 blue;}
  92% {text-shadow: 0 0 0 lime, 0 0 0 blue;}
  92% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  93% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  94% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  95% {text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;}
  96% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  97% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  98% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  99% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
  100% {text-shadow: -1px 0 0 blue, 1px 0 0 lime;}
}