:root {
  --bolg-mincho-font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', serif;
  --bolg-gothic-font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  --bolg-layout-max-width: 760px;
  --bolg-layout-padding: 0 8px;
  --bolg-layout-posts-margin: 64px;

  --bolg-background-color: #fafafa;

  --bolg-blocks-margin: 24px;

  --bolg-blog-name-margin: 64px auto 48px;
  --bolg-blog-name-color: #222222;
  --bolg-blog-name-font-size: 28px;
  --bolg-blog-name-font-weight: normal;
  --bolg-blog-name-font-family: var(--bolg-gothic-font-family);

  --bolg-heading-color: #222222;
  --bolg-heading-font-size: 16px;
  --bolg-heading-font-weight: bold;
  --bolg-heading-font-family: var(--bolg-gothic-font-family);

  --bolg-text-color: #222222;
  --bolg-text-font-size: 16px;
  --bolg-text-font-weight: normal;
  --bolg-text-font-family: var(--bolg-mincho-font-family);
  --bolg-text-line-height: 1.7;

  --bolg-link-color: #222222;
  --bolg-link-font-size: 16px;
  --bolg-link-font-weight: normal;
  --bolg-link-font-family: var(--bolg-gothic-font-family);
  --bolg-link-line-height: 1.7;

  --bolg-timestamp-color: #222222;
  --bolg-timestamp-font-size: 14px;
  --bolg-timestamp-font-weight: normal;
  --bolg-timestamp-font-family: var(--bolg-gothic-font-family);
  --bolg-timestamp-text-decoration: none;

  --bolg-pager-color: #222222;
  --bolg-pager-font-size: 16px;
  --bolg-pager-font-weight: normal;
  --bolg-pager-font-family: var(--bolg-gothic-font-family);
  --bolg-pager-margin-bottom: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bolg-background-color: #222222;

    --bolg-blog-name-color: #eeeeee;

    --bolg-heading-color: #eeeeee;

    --bolg-text-color: #eeeeee;

    --bolg-link-color: #eeeeee;

    --bolg-timestamp-color: #eeeeee;

    --bolg-pager-color: #eeeeee;
  }
}

html,
body {
  background: var(--bolg-background-color);
}

.blog-layout {
  max-width: var(--bolg-layout-max-width);
  margin: 0 auto;
  padding: var(--bolg-layout-padding);
}

.blog-name {
  width: 100%;
  margin: var(--bolg-blog-name-margin);
}

.blog-name-text {
  color: var(--bolg-blog-name-color);
  font-size: var(--bolg-blog-name-font-size);
  font-weight: var(--bolg-blog-name-font-weight);
  font-family: var(--bolg-blog-name-font-family);
  display: inline-block;
}

.post-entry {
  width: 100%;
  margin-bottom: var(--bolg-layout-posts-margin);
}

.timestamp {
  color: var(--bolg-timestamp-color);
  font-size: var(--bolg-timestamp-font-size);
  font-weight: var(--bolg-timestamp-font-weight);
  font-family: var(--bolg-timestamp-font-family);
  text-decoration: var(--bolg-timestamp-text-decoration);
  text-align: right;
  display: inline-block;
  width: 100%;
}

.block {
  color: var(--bolg-text-color);
  font-size: var(--bolg-text-font-size);
  font-weight: var(--bolg-text-font-weight);
  margin-bottom: var(--bolg-blocks-margin);
}

.block__heading {
  color: var(--bolg-heading-color);
  font-size: var(--bolg-heading-font-size);
  font-weight: var(--bolg-heading-font-weight);
  font-family: var(--bolg-heading-font-family);
}

.block__paragraph {
  white-space: pre-line;
  line-height: var(--bolg-text-line-height);
  overflow-wrap: break-word;
}

.block__link {
  text-decoration: underline;
  color: var(--bolg-link-color);
  font-size: var(--bolg-link-font-size);
  font-weight: var(--bolg-link-font-weight);
  font-family: var(--bolg-link-font-family);
  line-height: var(--bolg-link-line-height);
  white-space: pre-line;
  overflow-wrap: break-word;
}

.block__image {
  max-width: 100%;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bolg-pager-margin-bottom);
}

.link {
  display: inline-block;
  padding: 5px;
  color: var(--bolg-pager-color);
  font-size: var(--bolg-pager-font-size);
  font-weight: var(--bolg-pager-font-weight);
  font-family: var(--bolg-pager-font-family);
}