html {
  font-size: 16px;
}
body {
  background-color: #222; 
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#centreColumn {
	display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
    max-width: 65em;
    margin: 0 auto;
}
.heading {
    margin: 5vh 0;
}
/* 
 * The table
 */ 

.vertical-axis {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    float: right;
}
#table-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    max-width: calc(100% - 4em);
    margin: 0 2em;
}
#messages {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    height: 95%;
    font-weight: bold;
	line-height: 150%;
    z-index: 2;
    font-size: 2em;
}
#messages.fade {
    animation-name: fade;
    animation-iteration-count: 2;
    animation-duration: 15s;
    animation-direction: alternate;
    animation-timing-function: ease-out;
    animation-delay: 0s;
}
@keyframes fade {
	0% { opacity: 0;}
    33% { opacity: 0;}
	100% { opacity: 0.65;}
}
table {
    border-collapse: collapse;
    border-color: #bbb;
    border-spacing: 0;
    border-style: dashed;
    border-width: 1px;
    margin: 0;
    background-color: #000;
    color: #666;
    overflow: hidden;
	font-size: calc(.25vw + 1vh);
}
tr {
    height: 2em;
}
/* td style */
@keyframes blinkA {
    0%,50% {
        opacity: 0;
    }
    51%,100% {
        opacity: 1;
    }
}
@keyframes blinkB {
    0%,50% {
        opacity: 1;
    }
    51%,100% {
        opacity: 0;
    }
}
td {
    min-width: 0.6em;
    border-style: solid;
    border-width: 0px;
    word-break: normal;
    text-align: center;
    vertical-align: top;
    position: relative;
    text-align: unset;
}
td > div > span {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  font-weight: bold;
  /* Animate a3/rtt values:
   * flash rate: 0.5s
   * duration: 1 cycle (1s) or 16 slice periods
   * flash count:
   * 4 * 0.5s = 2s
   * calc(100px * attr(data-x number, 1));
   * o

    OK so the bug is probably that these are using the same animation,
    so we get an event for one of the ends in the keyframe...
   */
  /* animation-name: blink; */
  animation-fill-mode: none;
  animation-iteration-count: 1;  /* 5 */
  animation-duration: 0.5s;
  animation-delay: 0s;
}

td > div > span:nth-child(1) {
  color: green;
  animation-name: blinkA;
}

td > div > span:nth-child(2) {
  color: orange;
  animation-name: blinkB;
}

/* 
 * After the table 
 */

.hidden {
    display: none;
}
.form {
    margin-top: 1.5em;
}
.wave {
    margin-top: 1.5em;
}
#toggleAudio{
    margin-top: 2em;
    min-width: 6em;
    min-height: 3em;
}
.description {
    margin-top: 2em; 
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.25;
    padding: 0 1em;
    overflow: hidden;
    max-height: 100%;
    box-sizing: border-box;
    z-index: -1;
    user-select: none;
}
footer > div > div {
    color: rgb(239, 239, 239); 
    mix-blend-mode: difference;
}