@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;
  }
}

/* 定义西门子蓝色变量 */
:root {
  --siemens-blue: rgb(0, 100, 176);
}

* {
  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 {
  background-color: red !important;
  color: white !important;
}

.pwords_span {
  color: white !important;
}

.correct_char {
  color: green !important;
  /*color:rgb(19,153,147); */
  /*color:rgb(29,253,247); */
}

.bgOneblue{
  background-color:rgb(19,153,147); 
}
.fgOneblue{
  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: 0.9rem;
  height: 1.5rem;
  width: 100%;
  background-color: black;
  border-color: grey;
  color: white;
  padding: 5px;
  align-items: center;
  margin-bottom: 5px;
  border-radius: 4px;
}

/* Safari浏览器特定优化 */
@supports (-webkit-touch-callout: none) {
  #basicBtn,
  #wordsBtn,
  #textBtn,
  #bookBtn {
    width: 22%; /* 为Safari浏览器进一步减小宽度 */
    font-size: 0.85rem;
  }
}

.btn_area {
  display: flex;
}


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

div{    
	background-color:black;
}

/* 浮动菜单样式 */
#floatingMenu {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9999;
}

#menuButton {
  width: 25px;
  height: 25px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

#menuButton:hover {
  background-color: #117a65;
}

#dropdownMenu {
  display: none;
  position: absolute;
  top: 60px;
  right: 0;
  background-color: #2a2a2a;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  min-width: 100px;
  padding: 5px 0;
}

#dropdownMenu button {
  width: 100%;
  padding: 10px 15px;
  background-color: transparent;
  border: none;
  color: white;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
}

#dropdownMenu button:hover {
  background-color: #117a65;
}

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;    
  background-color:black;
  margin-left:8rpx;
  margin-right:8rpx;
  z-index: 1; /* 设置较低的z-index */
}

footer.footer,
footer{
  height: 5%;
  height: 2rem;
  z-index: 10; /* 设置较高的z-index，确保在div.roll之上 */
  position: relative; /* 确保z-index生效 */
}

#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:rgb(19,153,147); 
  /*color: grey;*/
}
.pwords_span{
  font-size: 2rem;
  color:rgb(19,153,147); 
  /*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: var(--siemens-blue);
	width:50%;
}

/* 书本名称显示样式 */
.footer_book_name {
	color: rgb(19,153,147) !important;
}

.footer-btn {
  flex: 1;
  margin: 0 5px;
  padding: 10px 15px;
  background-color: #000000 !important;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.footer-btn.active {
  /*background-color: red !important;*/
	background-color: rgb(19,153,147) !important;
}