@font-face {
  font-family: Apercu;
  src: url(./Apercu.otf);
}
@-webkit-keyframes pulse {
    0% {
    color: #FFFFFF;
    }
    8% {
        color: #FFFFFF;
    }
    16% {
    color: #babbbf;
    }
    24% {
    color: #ff0000;
    }
    32% {
    color: #ff00f0;
    }
    40% {
    color: #8a00ff;
    }
    48% {
    color: #000cff;
        }
    56% {
    color: #00deff;
    }
    64% {
    color: #00ff00;
    }
    72% {
    color: #f6ff00;
    }
    80% {
    color: #ff9000;
    }
    88% {
    color: #f9f9f9;
  }
    95% {
    color: #FFFFFF;
    }
  100% {
    color: #FFFFFF;
  }
}
@-moz-keyframes pulse {
    0% {
    color: #FFFFFF;
    }
    8% {
        color: #FFFFFF;
    }
    16% {
    color: #babbbf;
    }
    24% {
    color: #ff0000;
    }
    32% {
    color: #ff00f0;
    }
    40% {
    color: #8a00ff;
    }
    48% {
    color: #000cff;
        }
    56% {
    color: #00deff;
    }
    64% {
    color: #00ff00;
    }
    72% {
    color: #f6ff00;
    }
    80% {
    color: #ff9000;
    }
    88% {
    color: #f9f9f9;
  }
    95% {
    color: #FFFFFF;
    }
  100% {
    color: #FFFFFF;
  }
}
@-o-keyframes pulse {
    0% {
    color: #FFFFFF;
    }
    8% {
        color: #FFFFFF;
    }
    16% {
    color: #babbbf;
    }
    24% {
    color: #ff0000;
    }
    32% {
    color: #ff00f0;
    }
    40% {
    color: #8a00ff;
    }
    48% {
    color: #000cff;
        }
    56% {
    color: #00deff;
    }
    64% {
    color: #00ff00;
    }
    72% {
    color: #f6ff00;
    }
    80% {
    color: #ff9000;
    }
    88% {
    color: #f9f9f9;
  }
    95% {
    color: #FFFFFF;
    }
  100% {
    color: #FFFFFF;
  }
}
@keyframes pulse{
    0% {
    color: #FFFFFF;
    }
    8% {
        color: #FFFFFF;
    }
    16% {
    color: #babbbf;
    }
    24% {
    color: #ff0000;
    }
    32% {
    color: #ff00f0;
    }
    40% {
    color: #8a00ff;
    }
    48% {
    color: #000cff;
        }
    56% {
    color: #00deff;
    }
    64% {
    color: #00ff00;
    }
    72% {
    color: #f6ff00;
    }
    80% {
    color: #ff9000;
    }
    88% {
    color: #f9f9f9;
  }
    95% {
    color: #FFFFFF;
    }
  100% {
    color: #FFFFFF;
  }
}
#container {
	width: 100%;
	height: 100%;
	margin: 0 auto;overflow:hidden;
}

#content {
	margin: 7px;

	width: 100%;
	font-size:4.7vmax;
	font-family:"Courier New", Courier, 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:"Courier New", Courier, monospace;
align-content: center;overflow:hidden;
}

#output {
	margin: 10px;
	padding: 5px;
	font-size:4.7vmax;
	font-family:"Courier New", Courier, monospace;
	animation: pulse 1.1s 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;
}