/* Monaspace Neon フォント */
@font-face {
  font-family: "Monaspace Neon";
  src: url("https://cdn.jsdelivr.net/npm/monaspace-font@1.0.0/fonts/variable/MonaspaceNeon[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* Berkeley Mono フォント */
/* Regular (400) */
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Regular.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Oblique.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: oblique;
}

/* Medium (500) */
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Medium.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Medium-Oblique.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: oblique;
}

/* SemiBold (600) */
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-SemiBold.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-SemiBold-Oblique.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: oblique;
}

/* Bold (700) */
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Bold.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Bold-Oblique.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: oblique;
}

/* ExtraBold (800) */
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-ExtraBold.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-ExtraBold-Oblique.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 800;
  font-style: oblique;
}

/* Black (900) */
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Black.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url("https://d3w0x7oesq9q1.cloudfront.net/BerkeleyMono-Black-Oblique.woff2")
    format("woff2");
  font-display: swap;
  font-weight: 900;
  font-style: oblique;
}

/* サイトタイトル */
.home-title {
  font-family: "BerkeleyMono", sans-serif;
  font-weight: 900;
}

.page-header,
.section-title,
.article-title {
  font-size: 1.5em;
  font-weight: 700;
}

:root {
  --sans-serif-font:
    "BerkeleyMono", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  --serif-font: var(--sans-serif-font);
  --code-font: "Monaspace Neon", "Cascadia Code", monospace;
}

/* 一般的な日本語ブログに合わせたフォントサイズ */
@media all and (min-width: 600px) {
  html {
    font-size: 16px;
  }
}

@media all and (min-width: 960px) {
  html {
    font-size: 18px;
  }
}

/* 目次のフォントサイズを小さく */
.toc-container {
  font-size: 0.9em;
}

.toc-container h3 {
  font-size: 1.1em;
}

#banner-container-home #image-container-home {
  max-width: 7rem;
}

/* トップページのヘッダー文の行間調整 */
#banner-container-home #home-banner-text #banner-home-subtitle p {
  font-size: 0.85rem !important;
  line-height: 1.5rem !important;
  margin-bottom: 0.3em !important;
}

#banner-container-home #image-container-home #banner-home-img {
  border-radius: 1rem;
  transform: rotate(3deg);
}

/* Zenn風の見出しスタイル */
article h1 {
  font-weight: 700;
  font-size: 1.7em;
}

article h1::before {
  content: "# ";
  color: #d1d5db;
}

article h2 {
  font-weight: 700;
  font-size: 1.2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #d1d5db;
}

article h2::before {
  content: "## ";
  color: #d1d5db;
}

article h3 {
  font-weight: 700;
  font-size: 1em;
}

article h3::before {
  content: "### ";
  color: #d1d5db;
}

/* テーブルのフォントサイズ */
article table th,
article table td {
  font-size: 0.85em;
}

/* パラグラフ間の余白 */
article p {
  margin-bottom: 0.8em;
}

/* 脚注 */
.footnotes {
  font-size: 0.7em;
  border-top: 1px solid #d1d5db;
  padding-top: 1em;
  margin-top: 2em;
}

.footnotes::before {
  content: "Footnotes";
  display: block;
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.footnotes p,
.footnotes li {
  margin-bottom: 0.3em;
  line-height: 1.4;
}

/* Tagsページの行間 */
#tag-cloud .tags-item {
  margin-block-end: 0.3rem;
}

/* Blogページの記事間の余白を詰める */
.bloglist-container .bloglist-meta {
  padding-block: 1rem;
}

.bloglist-container .bloglist-content {
  padding: 1rem 0;
}

/* Blogページの記事内要素の行間を詰める */
.bloglist-content div .bloglist-tags {
  margin-top: -0.2rem;
}

.bloglist-content div .description p {
  margin: 0.3rem 0 0.5rem;
}

/* Definition List スタイル */
article dt {
  font-weight: 500;
  margin-top: 1em;
}

article dd {
  font-size: 0.95em;
  line-height: 1.5;
  margin-left: 1.5em;
  margin-bottom: 0.5em;
}

/* コードブロックのリガチャ有効化 */
code,
pre,
.code-font {
  font-feature-settings: "liga" 1, "calt" 1;
  font-variant-ligatures: common-ligatures contextual;
}