html
{
  height: 100%;
  overflow: hidden;
}

body
{
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: monospace;
}

/*****************************************************************************/

div#nameInput
{
  position: absolute;
  margin: auto;
  top: -250px;
  right: 0;
  bottom: 0;
  left: 0;

  width: 200px;
  height: 100px;

  background-color: rgba(0, 0, 0, 0.8);
  border: solid 1px #FFFFFF;
  color: #FFFFFF;
}

div#nameInput p
{
  width: 100%;
  text-align: center;
}

div#nameInput input,
div#nameInput button
{
  border: solid 1px #FFFFFF;
  background-color: #000000;
  color: #FFFFFF;
  font-family: monospace;
}

div#nameInput button
{
  cursor: pointer;
}

div#nameInput button:hover
{
  background-color: #FFFFFF;
  color: #000000;
}

/*****************************************************************************/

div#highscore
{
  position: absolute;
  margin: auto;
  top: 30px;
  right: 0;
  /*bottom: 0;*/
  left: 0;

  padding-bottom: 25px;

  width: 500px;

  background-color: rgba(0, 0, 0, 0.75);
  border: solid 1px #FFFFFF;
  color: #FFFFFF;
}

div#highscore h1
{
  margin-top: 10px;
  margin-bottom: 10px;

  width: 100%;

  font-size: 50px;
  font-weight: 800;
  text-align: center;
}

div#highscore h2
{
  margin-top: 0px;
  margin-bottom: 10px;

  width: 100%;

  font-size: 25px;
  font-weight: 600;
  text-align: center;
}

table#highscoreTable
{
  width: 100%;
}

table#highscoreTable th
{
  font-size: 20px;
  font-weight: 800;
}

table#highscoreTable th,
table#highscoreTable td
{
  text-align: center;
  color: #FFFFFF;
}

table#highscoreTable tr.indicator
{
  font-weight: 600;
}

table#highscoreTable td.indicator
{
  width: 18px;
}