body {
  text-align: center;
  font-size:170%;
  /* padding-top: 5%; */
  font-family: 'Patua One', cursive;
  /* font-family: 'Abril Fatface', cursive; */
  background: #f6f6f6;
  color: #333;
}

body.light {
  background: #f6f6f6;
  color: #515356;
}

body.medium {
  background: #5f5f5f;
  color: #ccc;
}

body.dark {
  background: #101010;
  color: #ccc;
}

input, button, select {
  color: #333;
  margin: 4px 3px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #bbb;
}

input, select {
  min-width: 226px;
}

#title-heading{
  text-align: center;
  font-size: 62pt;
  /* padding-top: 5%; */
  color: rgb(219, 120, 184);
  font-family: 'Patua One', cursive;
  /* font-family: 'Abril Fatface', cursive; */
}

h3{
  text-align: center;
  font-size: 22pt;
  /* padding-top: 5%; */
  color: rgb(216, 166, 199);
  font-family: 'Patua One', cursive;
  /* font-family: 'Abril Fatface', cursive; */
}

#kanji-text{
  text-align: center;
  font-size: 200pt;
  /* padding-top: 5%; */
  /*color: #777;*/ /*color: rgb(81, 83, 86);*/
  font-family: 'Patua One', cursive;
  /*font-family: 'Abril Fatface', cursive;*/
}

#kanji-input {
  text-align: center;
  padding: 10px;
  background-color: transparent;
  /*border: 0;*/
  /*border-bottom: 1.5px solid #ccc;*/
  font-size:28px;
  outline: none !important;
}

#kanji-input.dark {
  color: #bbb;
  border: 1px solid #333;
  border-bottom: 1.5px solid #333;
  box-shadow: 0 0 5px #333;
}

#kanji-input.light {
  color: #515356;
  border: 1px solid #ccc;
  border-bottom: 1.5px solid #ccc;
  box-shadow: 0 0 5px #ccc;
}

#kanji-input.medium {
  color: #ccc;
  border: 1px solid #ccc;
  border-bottom: 1.5px solid #ccc;
  box-shadow: 0 0 5px #ccc;
}

#kanji-input:focus{
  outline: none !important;
  border: 1px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  box-shadow: 0 0 5px #aaa;
}

.setting {
  display: inline-block;
}

#settings {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    overflow: hidden;
  }

input:invalid {
  border: 1px solid #ff0000;
  box-shadow: 0px 0px 9px #F00;
}