@media only screen and (max-width: 300px) {
  :root {
    font-size: 1em;
  }
}
@media screen and (min-width: 300px) and (max-width: 600px) {
  :root {
    font-size: 1em;
  }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
  :root {
    font-size: 2em;
  }
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
  :root {
    font-size: 2.5em;
  }
}
@media screen and (min-width: 1200) and (max-width: 1500px) {
  :root {
    font-size: 3em;
  }
}
@media screen and (min-width: 1500) and (max-width: 1800px) {
  :root {
    font-size: 3.5em;
  }
}

* {
  background-color: black;
  font-family: "Microsoft YaHei";
}

body {
  background-color: black;
  color: white;
  text-align: center;
}

body,html,main{
  height:100%;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.heading {
  margin-bottom: 20px;
  font-size: 3rem;
  color: #2a2a2a;
}

.header {
  display: flex;
  align-items: center;
}

.timer_words,
.errors_words,
.accuracy_words,
.cpm_words,
.wpm_words,
.progress_words,
.timer_text,
.errors_text,
.accuracy_text,
.cpm_text,
.wpm_text,
.progress_text
{
  height: auto;
  width: 23.3%;
  padding: 0.5rem;

  /*
  background-color: #2A2A2A;
  margin: 8px;
  box-shadow: black 5px 8px 5px;
  border-radius: 20%;
  */
}

.cpm,
.wpm {
  display: none;
  display: block;
}

.header_text {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 400;
  color: red;
  color: grey;
  width:100%;
}

.curr_time_words,
.curr_errors_words,
.curr_accuracy_words,
.curr_cpm_words,
.curr_wpm_words,
.curr_progress_words,
.curr_time_text,
.curr_errors_text,
.curr_accuracy_text,
.curr_cpm_text,
.curr_wpm_text,
.curr_cpm,
.curr_wpm,
.curr_progress_text 
{
  font-size: 0.8rem;
  color: grey;
}


.input_area_words, .input_area_text {
  background-color: black;
  background-color: #2a2a2a;
  font-size: 1.2rem;
  width: 100%;
  height: 20%;
  color: white;
  margin: 1px;
  /*font-weight: 600;
  margin: 15px;
  box-shadow: black 5px 8px 5px;
  padding: 20px;*/
  text-align: center;
  border: 0px;
}

.incorrect_char {
  color: red;
  text-decoration: underline;
}

.correct_char {
  color: green;
  color:rgb(19,153,147); 
}

.header_btn {
  /*
  display: block;
  background-color: #2A2A2A;
  font-size: 1.5rem;
  padding: 10px;
  border: 0px;
  box-shadow: black 5px 8px 5px;
  */

  font-size: 0.8rem;
  height: 1.2rem;
  width: 24%;
  background-color: black;
  border-color: grey;
  color: white;
  color:rgb(19,153,147); 
}

#basicBtn,
#wordsBtn,
#textBtn,
#bookBtn {
  /* 底部按钮 */
  font-size: 1rem;
  height: 1.5rem;
  width: 24%;
  background-color: black;
  border-color: grey;
  color: white;
  padding:0;
  align-items: center;
}

.btn_area {
  display: flex;
}


body,html,main{
  height:100%;
}

div{
	background-color:black;
}

div.box{
  display:flex;
  display: -webkit-flex;
  height:95%;
  flex-direction:column;
  background-color:black;
  margin-left:8rpx;
  margin-right:8rpx;
}

div.roll{  
  flex: 1; 
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: auto;
  position: relative;     /*relative positioning*/
  background-color:black;
  margin-left:8rpx;
  margin-right:8rpx;
}

footer.footer{
  height: 5%;
  height: 2rem;
}

#basic,#words,#text,#book,#account{
  position: absolute;
  width: 100%;
  height: 100%;
}

.errors, .timer, .accuracy, .cpm, .wpm, .progress {
  width: 23%;
}

.ptext_span{
  font-size: 1.4rem;
  /*color: grey;*/
}
.pwords_span{
  font-size: 2rem;
  /*color: grey;*/
}

.quote_text,.quote_words {
  background-color: #2a2a2a;
  background-color: black;
  font-size: 2rem;
  width: 100%;
  height: 40%;
  margin: 1px;
  display: block;
  /*
  padding: 25px;
  box-shadow: black 5px 8px 5px;
    */
}
.quote_text {
	margin-left:1%;
	margin-right:1%;
  width: 98%;
  font-size: 1.8rem;
  height: 80%;
  line-height:1.6rem;
  text-align:left;
}
#myBook,#specialBook{
	font-size: 1rem;
	color: red;
  	color:rgb(19,153,147); 
	width:50%;
}