@font-face {
  font-family: "basicLatin";
  unicode-range: U+0020-007F;
  src: local('Lato'),local('Helvetica Neue'),
    local('Arial'),local('Helvetica'),local(sans-serif);
}
@font-face {
  font-family: "MOEDICT";
  unicode-range: U+4E00-9FFF,
          U+3400-4DB5,
          U+20000-28467,
          U+28469-2A6D6,
          U+2A700-2B734,
          U+2B740-2B81D;
  src: url(https://www.moedict.tw/MOEDICT.woff) format('woff'),
  url("https://www.moedict.tw/MOEDICT.otf") format('opentype'),
  url("https://www.moedict.tw/MOEDICT.ttf") format('truetype'),
  url("https://www.moedict.tw/MOEDICT.eot");
}
@font-face {
  font-family: "FiraSansOT";
  unicode-range: U+0250-02AF,U+1D00-1D7F,
    U+1D80-1DBF,U+02B0-02FF,U+0300-036F,
    U+2090x;
  src: url(https://www.moedict.tw/fonts/FiraSansOT-Regular.woff);
}

body {
  font-size: 100%;
  background: #f1efeb;
  margin: 0;
}

.app.background {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

.app.background,
.app.main.block > .ui.container input,
.app.main.block > .ui.container textarea, {
  font-family: "basicLatin","MOEDICT","FiraSansOT", sans-serif;
}
.app.main.block {
  display: flex;
  flex-flow: row wrap;
  flex-grow: 1;
  align-content: flex-start;
  justify-content: center;
}

.app.block,
.app.table
{
  margin: 0.5rem 0;
}

.app.text.block
{
  word-break: break-all;
}


.app.footer {
  background: #1b1c1d;
}

.app.footer .menu {
  justify-content: center;
}

.app.clearing:before,
.app.clearing:after{
  display: block;
  content: '.';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.app.ruby {
  font-size: 1.7rem;
  margin-right: 1rem;
  vertical-align: text-top;
}

.app.ruby rt{
  font-size: 1.9rem;
}

@media only screen and (max-width: 767px) {
  .app.stackable.buttons{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .app.stackable.buttons > .ui.button{
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(34,36,38,.15);
  }
  .ui.grid.text.container{
    width: 500px !important;
  }
}

@media only screen and (max-width: 480px){
  .ui.grid.text.container{
    width: auto !important;
  }
}