#sprite { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
    width: 70%;
    height: auto;
}
table {
  border-collapse: collapse;
  border: none;
  position: relative;
}
th,
td {
  border: 1px solid black;
  padding: 4px 16px;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  text-align: left;
}
th {
  background-color: #C8C8C8;
  cursor: pointer;
}
/*Top Page styling begins*/
#frame_1{
	width:49%;
	height:500px;
	align-self: right;
}
#frame_2{
	width:49%;
	height:500px;
	align-self: left;
}
.select {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  text-align: left;
}
.animation {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;

  margin: auto;
  display: block;

  background: url("braceleft.png");
  background-repeat: no-repeat;
  background-size: cover;

  width: 120px;
  height: 130px;
}