* {
    margin: 0;
    padding: 0;
    max-width: 100%;
    /*overflow-x: hidden;*/
    font-weight: inherit;
    font-style: inherit;
    font-size: calc(1vw + 1vh + .5vmin);
    font-family: inherit;
  }
  .header {
    overflow:hidden;
    top:0;
    left:0;
    width:100%; 
    margin:0;
    padding:2vmin 0;
    text-align: center;
    font-family: "Garamond", Garamond, serif;
    font-size:300%;
    font-weight:100;
    font-variant:small-caps;
    /*background:#efebe0;/**/
    /*background:#efe0e0/**/
    background:#d7eae4/**/
  }
  .topnav {
    overflow:hidden;
    top:0;
    left:0;
    width:100%;
    margin:0;
    background-color:#333333;
  }
  .topnav a {
    float:left;
    display:block;
    font-family: "Garamond", Garamond, serif;
    font-size:90%;
    font-variant:normal;
    font-weight:100;
    color:#f2f2f2;
    text-align:center;
    padding:2vmin 4vmin;
    text-decoration:none;
  }
  .topnav a:hover {
    background-color:#dddddd;
    color:black;
  }
  .sectionTitle {
    /*float:left;*/
    display:block;
    font-family: "Garamond", Garamond, serif;
    font-size:200%;
    font-variant:normal;
    font-weight:700;
    color:#000000;
    text-align:left;
    padding:0;
    text-decoration:none;
  }
  .sectionText {
    /*float:left;*/
    display:block;
    font-family: "Garamond", Garamond, serif;
    font-size:120%;
    font-variant:normal;
    font-weight:100;
    color:#000000;
    text-align:left;
    padding:0;
    text-decoration:none;
  }
  .sidebar {
    float:left;
    top:0;
    height:100vh;
    width:85%;
    font-family:"Garamond", Garamond, serif;
    font-size:100%;
    z-index:1;
    color:#f2f2f2;
    background:#333333;
    transition:0.3s;
  }
  .btn {
    float:left;
    color:#000000;
    background:none;
    width:15%;
    transition:0.3s;
    cursor:pointer;
  }
  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 25%;
    transition: 0.4s;
  }
  .change .bar1 {
    -webkit-transform: translateY(11px) rotate(-45deg)/**/;
    transform: translateY(11px) rotate(-45deg);
  }
  .change .bar2 {opacity: 0;}
  .change .bar3 {
    -webkit-transform: translateY(-11px) rotate(45deg)/**/;
    transform: translateY(-11px) rotate(45deg)/**/;
  }
  .bigChineseText {
    /*float:left;*/
    display:block;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", “微軟雅黑”, "Microsoft YaHei", "Microsoft YaHei UI", sans-serif;
    font-size:550%;
    font-variant:normal;
    font-weight:normal;
    color:#000000;
    text-align:center;
    width:100%;
    padding:0px;
    text-decoration:none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .pinyinText {
    /*float:left;*/
    display:block;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    font-size:150%;
    font-variant:normal;
    font-weight:normal;
    color:#a2a2a2;
    text-align:center;
    width:100%;
    padding:0px;
    text-decoration:none;
  }

  .glossBox {
    position:absolute;
    margin:auto;
    right:0;
    width:calc(6vw + 6vh + 3.5vmin);
    text-align:center;
    padding:1.5vh 2vw;
    border-radius:4vmin;
    background:#333333;
    color:#f2f2f2;
    font-variant:small-caps;
    cursor:pointer;
  }
  .glossBox:empty {
    position:absolute;
    padding:0;
    border-radius:0;
    margin:0;
    background:none;
    cursor:default;
    margin:default;
    height:calc(6vw + 6vh + 3.5vmin);
    width:calc(5.5vw + 5.5vh + 2.25vmin);
  }

  .modalPhrase {
    display:none;
    position:fixed;
    margin:30vh 30vw;
    z-index:100;
    width:40vw;
    height:auto;
    text-align:center;
    padding:1.5vh 2vw;
    border-radius:4vmin;
    background:#333333;
    color:#f2f2f2;
    font-variant:small-caps;
    cursor:pointer;
  }

  .inputText {
    background:#f2f2f2;
    color:#000000;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    font-weight:100;
    overflow:scroll;
    height:20vh;
    width:100%;
    margin:auto;
  }
  .inputText:empty:before {
    content:attr(data-text);
    padding:0.5em;
    color:#999999;
  }
  .inputBtn {
    height:2em;
    line-height:2em;
    width:4.5em;
    background:#e2e2e2;
    color:#000000;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    margin:auto;
    text-align:center;
    cursor:pointer;
    overflow:hidden;
  }
  .inputBtn:hover {
    background-color:#fffddd;
    color:black;
  }
  .output {
    padding:0 0 0 40%;
    width:60%;
    transition:0.3s;
    border:#fff000;
  }
  .output[data-text]:empty:before {
    content:attr(data-text);
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    font-size:120%;
    font-weight:100;
    white-space:pre-wrap;
    color:#999999;
  }
  .srText {
    display:inline-block;
    margin:0.5vh 1vw;
    color:#aaaaaa;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    font-size:70%;
    line-height:calc(1.5vw + 1.5vh + 0.75vmin);
    overflow:hidden;
  }
  .srInput {
    height:calc(1.5vw + 1.5vh + 0.75vmin);
    width:calc(3vw + 3vh + 1.5vmin);
    border-style:none;
    background:#f2f2f2;
    color:#444444;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    margin:0.5vh;
    vertical-align:top;
    text-align:center;
    cursor:text;
    overflow:hidden;
  }
  .checkboxText {
    display:inline-block;
    float:left;
    margin-left:1vw;
    line-height:calc(2vw + 2vh + 1vmin);
    height:calc(2vw + 2vh + 1vmin);
    width:calc(10vw + 10vh + 5vmin);
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    overflow:hidden;
  }
  .check-box {
    height:calc(2vw + 2vh + 1vmin);
    width:calc(8vw + 8vh + 4vmin);
    border:none;
    border-radius:calc(2vw + 2vh + 1vmin);
    background:#ccc;
  }
  .check-box-switch {
    height:100%;
    width:50%;
    border:none;
    border-radius:calc(2vw + 2vh + 1vmin);
    background:white;
  }
  .table {
    background:#e8e8e8;
    max-width:85%;
    margin-top:5vh;
    font-size:0;
    box-shadow: 8px 8px #888888;
  }
  .table divider {
    display:inline-block;
    height:8vh;
    background:#444444;
  }
  .table entryHead {
    display:inline-block;
    height:8vh;
    line-height:8vh;
    text-align:center;
    font-weight:900;
    color:#f2f2f2;
    vertical-align:top;
    background:#333333;/**/
  }
  .table entry {
    display:inline-block;
    height:8vh;
    line-height:8vh;
    text-align:center;
    vertical-align:top;
    /*background:#ff0000;/**/
  }
  .table entrySum {
    display:inline-block;
    height:8vh;
    line-height:8vh;
    text-align:center;
    vertical-align:top;
    background:#fffddd;/**/
  }
  .dropdownMenu {
    height:2em;
    line-height:2em;
    width:4.5em;
    border-style:none;
    background:#f2f2f2;
    color:#444444;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    margin:auto;
    vertical-align:top;
    text-align:center;
    cursor:text;
    overflow:hidden;
  }
  .dropdownText {
    display:inline-block;
    height:100%;
    width:7.5em;
    text-align:center;
    font-family: "Lucida Sans Unicode", Lucida Sans Unicode, sans-serif;
    font-size:60%;
    color:#666666;
  }