@font-face {
  font-family: Apercu;
  src: url(./Apercu.otf);
}
@-webkit-keyframes pulse {
	0% {
	color: #ebd1ff;
	}
	8% {
			color: #85a8f6;
	}
	16% {
	color: #22ceff;
	}
	24% {
	color: #ff22be;
	}
	32% {
	color: #f4b2e1;
	}
	40% {
	color: #b2f4d6;
	}
	48% {
	color: #cbf4b2;
			}
	56% {
	color: #d5bf29;
	}
	64% {
	color: #00fe4e;
	}
	72% {
	color: #fe004e;
	}
	80% {
	color: #f585a7;
	}
	88% {
	color: #d485f5;
}
	95% {
	color: #8d85f5;
	}
100% {
	color: #000000;
}
}
@-moz-keyframes pulse {
	0% {
	color: #ebd1ff;
	}
	8% {
			color: #85a8f6;
	}
	16% {
	color: #22ceff;
	}
	24% {
	color: #ff22be;
	}
	32% {
	color: #f4b2e1;
	}
	40% {
	color: #b2f4d6;
	}
	48% {
	color: #cbf4b2;
			}
	56% {
	color: #d5bf29;
	}
	64% {
	color: #00fe4e;
	}
	72% {
	color: #fe004e;
	}
	80% {
	color: #f585a7;
	}
	88% {
	color: #d485f5;
}
	95% {
	color: #8d85f5;
	}
100% {
	color: #000000;
}
}
@-o-keyframes pulse {
	0% {
	color: #ebd1ff;
	}
	8% {
			color: #85a8f6;
	}
	16% {
	color: #22ceff;
	}
	24% {
	color: #ff22be;
	}
	32% {
	color: #f4b2e1;
	}
	40% {
	color: #b2f4d6;
	}
	48% {
	color: #cbf4b2;
			}
	56% {
	color: #d5bf29;
	}
	64% {
	color: #00fe4e;
	}
	72% {
	color: #fe004e;
	}
	80% {
	color: #f585a7;
	}
	88% {
	color: #d485f5;
}
	95% {
	color: #8d85f5;
	}
100% {
	color: #000000;
}
}
@keyframes pulse {
	0% {
	color: #ebd1ff;
	}
	8% {
			color: #85a8f6;
	}
	16% {
	color: #22ceff;
	}
	24% {
	color: #ff22be;
	}
	32% {
	color: #f4b2e1;
	}
	40% {
	color: #b2f4d6;
	}
	48% {
	color: #cbf4b2;
			}
	56% {
	color: #d5bf29;
	}
	64% {
	color: #00fe4e;
	}
	72% {
	color: #fe004e;
	}
	80% {
	color: #f585a7;
	}
	88% {
	color: #d485f5;
}
	95% {
	color: #8d85f5;
	}
100% {
	color: #000000;
}
}
#container {
	width: 100%;
	height: 100%;
	margin: 0 auto;overflow:hidden;
}

#content {
	margin: 7px;

	width: 100%;
	font-size:4.7vmax;
	font-family: 'Apercu', monospace;
align-content: center;
 line-height: 115%;overflow:hidden;
}
::-moz-selection { /* Code for Firefox */

  background: purple;
}

::selection {

  background: purple;}
.outputSample {
		margin: 20px;
	padding: 5px;overflow:hidden;
}

#content {
	margin: 15px;
	width: 100%;
	font-size:4.7vmax;
	font-family: 'Apercu', monospace;
align-content: center;overflow:hidden;
}

#output {
	margin: 10px;
	padding: 5px;
	font-size:4.7vmax;
	font-family: 'Apercu', monospace;
  animation: pulse .6s infinite steps(10, end);
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;overflow:hidden;
box-sizing: content-box;
}

#grammar {
		padding: 5px;
	margin: 10px;overflow:hidden;
}