/*
  CSSの`@import`は、複数ファイルの読み込みが遅いなどの理由で非推奨になっている
  ここでは1つのファイルだけを読み込む目的で使用することにする

  複数ファイルを読み込む場合は、

  - Sassの`@use`を使う
  - Frontmaterで複数のCSSファイルを指定できるようにする

  などの代替案を検討すること
*/
@import url("/assets/css/markdown.css");

/* ------------------------------
main
------------------------------ */

main {
  display: block;
  background-color: #fafafa;
}
@media screen and (min-width: 760px) {
  main {
    padding-bottom: 50px;
  }
}

/* ------------------------------
.cover
------------------------------ */

.cover {
  background-color: #fff;
}
@media screen and (min-width: 960px) {
  .cover {
    padding: 70px 0;
  }
}

.cover figure {
  max-width: 1020px;
  width: 100%;
  margin: auto;
}

/* ------------------------------
article
------------------------------ */

article {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 2px 2px;
}
@media screen and (min-width: 760px) {
  article {
    margin-top: 50px;
    padding: 20px 40px;
  }
}