html,body
{
  background-color: #242424;
  color: #cecece;
  font-family: Verdana;
  height: 100%;
  margin: 0;
}
article
{
  margin: 0 auto;
  padding: 0 1em;
  font-size: 1.2em;
  text-align: center;
  max-width: 880px;
}
div.col
{
  display: flex;
  display: -webkit-flex;
  font-size: 1.2em;
  padding: 1em;
  width: calc(100% - 2em);
  height: calc(100% - 2em);
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}
div.row
{
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
          align-items: center;  
}
a
{
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  color: #cecece;
}
a.red
{
    color: #e14946;
    text-decoration: none;
}
hr
{
  background-color: #e14946;
  color: #e14946;
  border: 0;
  width:80%;
  max-width: 880px;
  height: 3px;
}
img
{
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}
img.wasm
{
  display:block;
  margin: 0 auto;
  padding: 1em;
  max-width: calc(100% - 2em);
}
input
{
  background-color: #333333;
  color: #45b3d4;
  border: 1px solid #333333;
}
p, ul
{
  text-align: left;
}
p.speak
{
  margin: 10px;  
}
p.copyright
{
  margin: 0 auto;
  padding: 0 1em;
  font-size: 0.9em;
  text-align: center;
  max-width: 880px;
}
pre
{
  background-color: #333333;
  color: #45b3d4;
  padding: 0.5em;
  text-align: left;
  overflow: auto;
}