html, body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
 overflow: hidden;
}

dialog { 
  text-align: center; 
}

canvas.fullscreen { 
  width: 100vw; 
  height: 100vh; 
}

.grayscale {
  -webkit-filter: grayscale(50%);
  -moz-filter: grayscale(50%);
  -ms-filter: grayscale(50%);
  filter: grayscale(50%);
}
div#GameOver {
  visibility: hidden;
  position: absolute;
  color: #1c1d1d;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(209, 9, 9, 0.51);
}
div#GameOver h1{
  font-size: xxx-large;
  margin: auto;
  width: 60%;
  padding-top: 1em;
}

div#GameOver p{
  font-size: xx-large;
  margin: auto;
  width: 60%;
  padding-top: 1em;
}

div#GameOver table{
  font-size: 2em;
  margin: auto;
  width: 60%;
  padding-top: 1em;
}

p#yourscore{
  visibility: hidden;
}

div#SubmitScore {
  visibility: hidden;
}
div#SubmitScore input{
  font-size: xx-large;
  text-align: center;
  background-color: #1c1d1d;
  color: aliceblue;

}
div#GameOver button{
  font-size: xx-large;
  margin: auto;
  color: aliceblue;
  background-color: #1c1d1d;
}


div#Hud {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #81ecec;
  background-color: #636e7281;
  padding-left: 10px;
  padding-bottom: 10px;
}

div#Hud input {
  color: #81ecec;
  outline: none;
  background: none;
  border: none;
}