/* Page navigation */
html ,body{
  font-family: "標楷體", DFKai-sb, BiauKai;
  position:relative;
  width: 100%;
  height: 100%;
  margin: 0px; 
}

canvas {
  border: 1px solid LIGHTGRAY;
  border-radius: 3px;
  background:BEIGE;
  display: block;
  <!-- margin: 0 auto; -->
  width:100%;
  height:100%; 
}



.clear{
  text-align: center;
  color:WHITE;
  background-color:RED;
  border-color:LIGHTGRAY;
  border-radius: 5px;
  width:23%;
  height:10%;
  font-size:20px;
  
}
.reset{
  text-align: center;
  color:WHITE;
  background-color:DARKCYAN;
  border-color:LIGHTGRAY;
  border-radius: 5px;
  width:76%;
  height:10%;
  font-size:20px;

}


.show_word_r{
  -webkit-transform: rotate(180deg);
  text-align: center;
  font-size:100px;
  color:white;
  background-color:gray;
  border-radius: 5px;
  border:1px solid LIGHTGRAY;
  display: block;
  width:99%;
  height:140px;
  
}

.show_word{
  text-align: center;
  font-size:40px;
  color:gray;
 <!--  background-color:white;
  border-radius: 5px;
  border:1px solid LIGHTGRAY; 
  display: block; -->
  width:99%;
  height:60px;

}