:root {
  --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 16px;
  --bolg-layout-posts-margin: 80px;

  --bolg-background-color: #080808;

  --bolg-blocks-margin: 36px;

  --bolg-neon-red: #ff1515;
  --bolg-neon-blue: #1199ff;
  --bolg-neon-green: #44ff00;
  --bolg-neon-purple: #ff29ee;

  --bolg-blog-name-margin: 48px auto;
  --bolg-blog-name-color: #f0f0f0;
  --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: #f0f0f0;
  --bolg-heading-font-size: 18px;
  --bolg-heading-font-weight: bold;
  --bolg-heading-font-family: var(--bolg-gothic-font-family);

  --bolg-text-color: #f0f0f0;
  --bolg-text-font-size: 16px;
  --bolg-text-font-weight: normal;
  --bolg-text-font-family: var(--bolg-gothic-font-family);
  --bolg-text-line-height: 1.8;

  --bolg-link-color: #f0f0f0;
  --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: #f0f0f0;
  --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: #f0f0f0;
  --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-neon-red: #ff29ee;
    --bolg-neon-blue: #1199ff;
    --bolg-neon-green: #ff1515;
    --bolg-neon-purple: #44ff00;
  }
}

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%;
  text-align: center;
  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;

  padding: 0.8rem 1.8rem;
  border: 0.2rem solid #fff;
  border-radius: 0.4rem;

  text-shadow:
    -0.1rem -0.1rem 0.4rem #fff,
    0.1rem 0.1rem 0.4rem #fff,
    0 0 1.5rem var(--bolg-neon-red),
    0 0 2.5rem var(--bolg-neon-red),
    0 0 3.5rem var(--bolg-neon-red);

  box-shadow: 0 0 0.1rem #fff, inset 0 0 0.1rem #fff, 0 0 1.6rem var(--bolg-neon-blue), inset 0 0 0.8rem var(--bolg-neon-blue);
}

.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%;

  text-shadow: 0 0 0.3rem #fff, 0 0 4rem #fff;
}

.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);

  text-shadow: 0 0 0.5rem var(--bolg-neon-green), 0 0 1.5rem var(--bolg-neon-green);
}

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

  text-shadow: 0 0 0.5rem #fff;
}

.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;

  text-shadow: 0 0 0.5rem var(--bolg-neon-blue), 0 0 1rem var(--bolg-neon-blue);
}

.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);
  text-decoration: none;

  text-shadow: 0 0 0.5rem var(--bolg-neon-purple), 0 0 5rem var(--bolg-neon-purple);
}