* { 
  font-size: 1.2em; 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
  font-family: "Source Han Sans", "源ノ角ゴシック", "Hiragino Sans", "HiraKakuProN-W3", "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans", "Noto Sans CJK JP", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

#header a, #footer a, #results a { color: black; text-decoration: none }

a { color: #007559; text-decoration: none }
a:visited { color: #1d7484 }
a:hover { text-decoration: underline }

body {
  padding: 3rem 0 3rem 0;
  max-width: 800px;
  margin: 0 auto;
}

li {
  margin-left: 1em;
}

p, li { 
  font-size: 1em;
  line-height: 1.5;
}

p {
  margin-top: 1em;
}

h1 { font-size: 2.35em }
h2 { font-size: 2.00em }
h3 { font-size: 1.75em }

h1, h2, h3 {
  line-height: 1.1;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.large-kanji {
  font-size: 8em;
  width: 1em;
  margin: 0 auto;
}

.parts, .contained {
  font-size: 2em;
}

#header {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  border-bottom: 3px solid green;
  font-size: 0.8em;
  color: black;
}

.inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
}

#kanjiclub {
  float: left
}

#nav {
  float: right;
  font-size: 1em;
  font-variant: small-caps;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 3px solid green;
  text-align: center;
  font-size: 0.8em;
  height: 3em;
  width: 100%;
  background: white;
  color: black;
  padding: 10px 0 10px 0;
}

#footer img {
  height: 1em;
}

.placeholder { height: 1rem; }

@media (max-width: 700px) {
  h1, h2, h3, h4, p, ol, ul, .parts, .contained {
    padding: 0 1rem;
  }

  #kanjiclub, #nav {
    font-size: 1em;
  }

}