@font-face {
  font-family: Apercu;
  src: url(./Apercu.otf);
}

body
{
background-color: black;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: content-box;
}
iframe {
  overflow:hidden;
  box-sizing: content-box;
}
::-moz-selection { /* Code for Firefox */

  background: purple;
}

::selection {

  background: purple;}

#bot2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left:35%;
  top:7%;
  border-color: transparent;overflow:hidden;
}
#bot3 {
width: 100%;
  height: 100%;
  position: absolute;
  left:62%;
  top:22%;
  border-color: transparent;overflow:hidden;
}
#bot4 {
width: 100%;
  height: 100%;

  position: absolute;
  left:22%;
  top:12%;
  border-color: transparent;overflow:hidden;
}
#bot5 {
width: 100%;
  height: 100%;

  position: absolute;
  left:2%;
  top:5%;
  border-color: transparent;overflow:hidden;
}
#bot6 {
width: 100%;
  height: 100%;

  position: absolute;
  left:55%;
  top:19%;
  border-color: transparent;overflow:hidden;
}
@keyframes sacude2 {
  0% { transform:  skewY(4deg)skewY(1deg); }
  10% { transform:  skewY(5deg)scaleY(2deg); }
  20% { transform:  skewY(4deg); }
  30% { transform:  skewY(2deg);}
  40% { transform: skewY(-4deg); }
  50% { transform:  skewX(5deg);}
  60% { transform:  skewX(-2deg);}
  70% { transform: skewX(-1deg); }
  80% { transform: skewY(3deg); }
  90% { transform: skewX(2deg);}
  100% { transform:  skewY(5deg); }
}

#container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
  background-color: black;
}

#content {
	width: 100%;

	font-family: 'Apercu', monospace;
align-content: center;

}

.outputSample {
		margin: 20px;
	padding: 5px;
}

#output {

		font-size:5vmax;
	font-family: 'Apercu', monospace;
line-height: 100%;
  -webkit-animation-direction: alternate;
  animation: pulse .4s infinite steps(10, end);
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
    border-color: transparent;
    box-sizing: content-box;

}

#grammar {
		padding: 5px;
	margin: 10px;
}
@-webkit-keyframes pulse {
	0% {
	color: #00F400;
	}
	8% {
			color: #D2FD00;
	}
	16% {
	color: #B1FC00;
	}
	24% {
	color: #FFF100;
	}
	32% {
	color: #00F059;
	}
	40% {
	color: #FFA100;
	}
	48% {
	color: #00F400;
			}
	56% {
	color: #FF4B78;
	}
	64% {
	color: #76FF4B;
	}
	72% {
	color: #A55AFF;
	}
	80% {
	color: #4BFFAD;
	}
	88% {
	color: #FFE14B;
}
	95% {
	color: #8AEA3B;
	}
100% {
	color: #000000;
}
}
@-moz-keyframes pulse {
	0% {
	color: #00F400;
	}
	8% {
			color: #D2FD00;
	}
	16% {
	color: #B1FC00;
	}
	24% {
	color: #FFF100;
	}
	32% {
	color: #00F059;
	}
	40% {
	color: #FFA100;
	}
	48% {
	color: #00F400;
			}
	56% {
	color: #FF4B78;
	}
	64% {
	color: #76FF4B;
	}
	72% {
	color: #A55AFF;
	}
	80% {
	color: #4BFFAD;
	}
	88% {
	color: #FFE14B;
}
	95% {
	color: #8AEA3B;
	}
100% {
	color: #000000;
}
}
@-o-keyframes pulse {
	0% {
		color: #00F400;
		}
		8% {
				color: #D2FD00;
		}
		16% {
		color: #B1FC00;
		}
		24% {
		color: #FFF100;
		}
		32% {
		color: #00F059;
		}
		40% {
		color: #FFA100;
		}
		48% {
		color: #00F400;
				}
		56% {
		color: #FF4B78;
		}
		64% {
		color: #76FF4B;
		}
		72% {
		color: #A55AFF;
		}
		80% {
		color: #4BFFAD;
		}
		88% {
		color: #FFE14B;
	}
		95% {
		color: #8AEA3B;
		}
	100% {
		color: #000000;
	}
}
@keyframes pulse {
	0% {
	color: #00F400;
	}
	8% {
			color: #D2FD00;
	}
	16% {
	color: #B1FC00;
	}
	24% {
	color: #FFF100;
	}
	32% {
	color: #00F059;
	}
	40% {
	color: #FFA100;
	}
	48% {
	color: #00F400;
			}
	56% {
	color: #FF4B78;
	}
	64% {
	color: #76FF4B;
	}
	72% {
	color: #A55AFF;
	}
	80% {
	color: #4BFFAD;
	}
	88% {
	color: #FFE14B;
}
	95% {
	color: #8AEA3B;
	}
100% {
	color: #000000;
}
}