@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
:root {
  --wd: min(1vw, 1vh); /* 1vw, 1.2vh */
}

body {
	background-color: #EEE;
	color: #222;
	font-family: Helvetica;
	font-size: 20px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	overflow-y: overlay;
  overflow-x: hidden
}

#code_div {
	position:absolute;
	padding-top:0px;
	/*margin-top:16px;*/
	width: 100vw;
	height: 100vh;
/*	font-family: "微軟正黑體";*/
	font-size: calc(var(--wd) * 5);
	text-align:center;
	vertical-align: text-top;
}

#bm {
	width: 100%;
	padding-top:calc(var(--wd) * 2);
}

#mm {
	width: calc(var(--wd) * 50);
	font-size: calc(var(--wd) * 4);
  text-align:left;
  left: calc(50vw - var(--wd) * 15);
  position:absolute;
}

#hd {
	font-size: calc(var(--wd) * 5);
}

#zi {
  font-family: "cwTeXFangSong", serif;
  color: #888888;
}

#key_in{
	width: calc(var(--wd) * 18);
	border-width: 1px;
	height: calc(var(--wd) * 6);
	vertical-align: top;
	margin-top: 0px;
	font-size: calc(var(--wd) * 6);
	text-align:center;
	padding-left: calc(var(--wd) * 1.2);
	padding-right: 1px;
}

.cur_zi {
	font-size: calc(var(--wd) * 10);
  color: red;
}

.result {
	padding: 0;
	display: inline-block;
	width: calc(var(--wd) * 96);
	text-align:center;
  font-family: "cwTeXFangSong", serif;
}

.result td {
 width: calc(var(--wd) * 6);
 height: calc(var(--wd) * 12);
 text-align: center;
}


#again {
	display: inline-block;
	height: calc(var(--wd) * 10);
	/*float: right;*/
	/*margin-top: calc(var(--wd) * 2);*/
	vertical-align : middle;
}

#play {
	height: calc(var(--wd) * 12);
}

.ss {
	padding: 0;
	margin: calc(var(--wd) * 1) 0;
	display: inline-block;
	/*width: calc(var(--wd) * 28);*/
	height: calc(var(--wd) * 6);
	font-size: calc(var(--wd) * 6);
	text-align:left;
}

.rr {
	padding: 0;
	margin: 0;
  position:absolute;
  top: calc(var(--wd) * 55);
	color:#0000ff;
}

#result_1{
  padding-top: 0;
	font-size: calc(var(--wd) * 3);
	text-align:left;
	vertical-align: top;
	color:#0000ff;
	line-height: 4;
  /*text-indent: -0.1em;*/
}

#result_2{
  padding-top: calc(var(--wd) * 4.5);
	font-size: calc(var(--wd) * 6);
	text-align:left;
	vertical-align: top;
	color:#0000ff;
	line-height: 2;
  /*text-indent: -0.1em;*/
}

#result_3{
  padding-top: calc(var(--wd) * 8.5);
	font-size: calc(var(--wd) * 2.2);/*2.4*/
	text-align:left;
	vertical-align: top;
	color:#0000ff;
	line-height: 5.4545454;/* 5 */
}

::placeholder {
  color: #F0F0F0;
}

.rimg {
  content: url("../images/right.png");
  width: calc(var(--wd) * 6);
}

.wimg {
  content: url("../images/wrong.png");
  width: calc(var(--wd) * 6);
}