/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


  
body {
  box-sizing: border-box;

  background-color: #111;
  color: #e6e6e6;

  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 80px;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 18px;
  line-height: 1.75;
}

footer {
  margin-top: 3rem;
  text-align: center;
  font-family: Verdana, Arial, "Yu Gothic", sans-serif;
  font-size: 0.8rem;
}

footer p {
  margin: 0;
  text-indent: 0;
}

.copyright {
  margin-top: 3rem;
  text-align: center;
  text-indent: 0;
  font-family: Verdana, Arial, "Yu Gothic", sans-serif;
  font-size: 0.8rem;
}

/* サイト名と作品見出し */
h1,
h2,
h3,
.site-title,
.work-title {
  font-family: Verdana, Arial, sans-serif;
  line-height: 1.35;
}

/* サイト名 */
.site-title {
  margin: 0 0 24px;
  font-size: 32px;
}

/* 作品名 */
h2,
.work-title {
  margin: 0 0 32px;
  font-size: 24px;
}

/* 通常段落。段落同士に余白を作らず、一字下げ */
p {
  margin: 0;
  text-indent: 1em;
}

/* 著作権表示 */
p.copyright {
  margin-top: 3rem;
  text-align: center;
  text-indent: 0;
  font-family: Verdana, Arial, "Yu Gothic", sans-serif;
  font-size: 0.8rem;
}

.dialogue {
  text-indent: 0;
}

/* 新しいまとまりの直前だけ、一行弱空ける */
.space-before {
  margin-top: 1.4em;
}

/* 新しいまとまりの直後だけ、一行弱空ける */
.space-after {
  margin-bottom: 1.4em;
}

/* 区切り記号 */
.separator {
  margin: 1.4em 0;
  text-align: center;
  text-indent: 0;
  letter-spacing: 1.5em;
}

/* リンク */
a,
a:visited {
  color: #d3b7ff;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #eadfff;
  text-decoration: underline;
}

/* スマートフォン */
@media (max-width: 600px) {
  body {
    padding: 24px 18px 60px;
    font-size: 16px;
  }

  .site-title {
    font-size: 27px;
  }

  h2,
  .work-title {
    font-size: 22px;
  }
}

.center {
  text-align: center;
}