@charset "UTF-8";
@import url("https://cdn.blog.st-hatena.com/css/theme/life/life.css");

/*
  Theme: Pixel Buster
  Author: Custom Hatena Blog theme
  Description: Retro blue action-platformer skin based on Hatena Blog "Life".
  Base: https://cdn.blog.st-hatena.com/css/theme/life/life.css
  Responsive: yes
*/

:root {
  --pb-bg: #07142a;
  --pb-bg-soft: #0b1f3f;
  --pb-panel: rgba(12, 35, 70, 0.9);
  --pb-panel-strong: rgba(14, 42, 84, 0.96);
  --pb-text: #edf8ff;
  --pb-muted: #a8c5e8;
  --pb-faint: #6f91bd;
  --pb-line: rgba(70, 198, 255, 0.32);
  --pb-line-hot: rgba(255, 213, 74, 0.48);
  --pb-blue: #1687ff;
  --pb-sky: #46c6ff;
  --pb-ice: #bff2ff;
  --pb-yellow: #ffd54a;
  --pb-red: #ff5c6f;
  --pb-navy: #031025;
  --pb-border: 2px solid var(--pb-line);
  --pb-radius: 4px;
  --pb-sans: "PT Sans", "Helvetica Neue", Arial, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  --pb-mono: Monaco, Consolas, "Courier New", Courier, monospace, sans-serif;
  --pb-glow-blue: 0 0 18px rgba(70, 198, 255, 0.24);
  --pb-glow-yellow: 0 0 16px rgba(255, 213, 74, 0.22);
  --pb-shadow: 6px 6px 0 rgba(2, 10, 24, 0.42);
}

html,
body {
  background-color: var(--pb-bg);
  color: var(--pb-text);
  color-scheme: dark;
  font-family: var(--pb-sans);
  letter-spacing: 0;
}

body {
  background-image:
    linear-gradient(rgba(70, 198, 255, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(70, 198, 255, 0.07) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #0f3f7a 0, var(--pb-bg) 320px, #040b19 100%);
  background-position: center top;
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(70, 198, 255, 0.08) 22px 24px, transparent 24px 128px),
    repeating-linear-gradient(0deg, transparent 0 92px, rgba(255, 213, 74, 0.11) 92px 96px, transparent 96px 192px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 2px, transparent 2px 7px);
  opacity: 0.36;
  animation: pb-energy-blink 6s steps(4, end) infinite;
}

@keyframes pb-energy-blink {
  0% {
    opacity: 0.24;
  }

  45% {
    opacity: 0.42;
  }

  55% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.38;
  }
}

::selection {
  background: rgba(255, 213, 74, 0.72);
  color: var(--pb-navy);
}

a {
  color: var(--pb-sky);
  text-shadow: var(--pb-glow-blue);
}

a:hover,
a:focus {
  color: var(--pb-yellow);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pb-yellow);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--pb-text);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--pb-ice);
}

#globalheader-container {
  color: var(--pb-text);
  background-color: rgba(3, 16, 37, 0.94);
  border-bottom: var(--pb-border);
  box-shadow: 0 5px 0 rgba(70, 198, 255, 0.12);
}

#container,
#footer {
  background: transparent;
}

#container {
  color: var(--pb-text);
}

#container-inner {
  position: relative;
}

#blog-title {
  position: relative;
  border-bottom: var(--pb-border);
}

#blog-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--pb-yellow) 0 20px, var(--pb-red) 20px 28px, var(--pb-blue) 28px 48px, var(--pb-sky) 48px 56px);
  box-shadow: var(--pb-glow-blue);
}

#title,
#title a {
  color: var(--pb-text);
  font-family: var(--pb-mono);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.15;
  text-shadow:
    3px 0 0 rgba(22, 135, 255, 0.78),
    0 3px 0 rgba(3, 16, 37, 0.9),
    0 0 20px rgba(70, 198, 255, 0.3);
  word-break: break-word;
}

#title a:hover {
  color: var(--pb-text);
}

.page-index #title {
  font-size: 2.2rem;
}

#blog-description {
  color: var(--pb-muted);
}

.header-image-enable #blog-title,
.header-image-only #blog-title {
  overflow: hidden;
  border-bottom: 0;
}

.header-image-enable #blog-title #blog-title-inner,
.header-image-only #blog-title #blog-title-inner {
  background:
    linear-gradient(135deg, rgba(70, 198, 255, 0.28), transparent 34%),
    linear-gradient(315deg, rgba(255, 213, 74, 0.2), transparent 36%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 4px, transparent 4px 16px),
    rgba(7, 20, 42, 0.78);
}

#top-editarea,
#top-box,
.breadcrumb {
  color: var(--pb-faint);
}

.entry {
  position: relative;
  padding: 22px 14px;
  border: var(--pb-border);
  border-radius: var(--pb-radius);
  background:
    linear-gradient(135deg, rgba(70, 198, 255, 0.14), transparent 30%),
    linear-gradient(315deg, rgba(255, 213, 74, 0.08), transparent 30%),
    var(--pb-panel-strong);
  box-shadow: var(--pb-shadow);
}

.entry::before,
.page-archive .archive-entry::before,
.hatena-module::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 18px;
  width: 80px;
  height: 4px;
  background:
    linear-gradient(90deg, var(--pb-sky) 0 34%, var(--pb-ice) 34% 50%, var(--pb-yellow) 50% 70%, var(--pb-sky) 70% 100%);
  box-shadow: var(--pb-glow-blue);
}

.entry-header {
  text-align: left;
  margin-bottom: 2.2em;
  padding: 0 20px;
}

.page-archive .archive-entry-header,
.page-archive .categories,
.archive-header-category {
  text-align: left;
}

.entry-header-menu a,
.categories a,
.leave-comment-title,
.pager a,
.entry-content .entry-see-more,
.hatena-urllist .urllist-category-link {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius);
  background-color: rgba(70, 198, 255, 0.08);
  color: var(--pb-text);
  box-shadow: none;
  text-shadow: none;
}

.entry-header-menu a:hover,
.categories a:hover,
.leave-comment-title:hover,
.pager a:hover,
.entry-content .entry-see-more:hover,
.hatena-urllist .urllist-category-link:hover {
  border-color: rgba(255, 213, 74, 0.74);
  background-color: rgba(255, 213, 74, 0.12);
  color: var(--pb-yellow);
}

.date,
.date-last-updated,
.entry-footer-section,
.entry-footer-section a,
.comment-metadata,
.comment-metadata a,
.hatena-urllist .urllist-date-link a {
  color: var(--pb-faint);
}

.date a {
  color: var(--pb-yellow);
  font-family: var(--pb-mono);
  text-decoration: none;
  text-shadow: var(--pb-glow-yellow);
}

.date a:hover {
  color: var(--pb-ice);
}

.entry-title,
.entry-title a {
  color: var(--pb-text);
  font-weight: 700;
  text-shadow:
    2px 2px 0 rgba(3, 16, 37, 0.95),
    0 0 16px rgba(70, 198, 255, 0.18);
}

.entry-title a:hover {
  color: var(--pb-sky);
}

.entry-content,
.entry-footer {
  color: var(--pb-text);
  box-sizing: border-box;
  max-width: none;
  margin-right: 20px;
  margin-left: 20px;
}

.entry-content {
  line-height: 1.78;
}

.entry-content a {
  color: var(--pb-sky);
  text-decoration-color: rgba(70, 198, 255, 0.56);
}

.entry-content a:hover {
  color: var(--pb-yellow);
  text-decoration-color: rgba(255, 213, 74, 0.72);
}

.entry-content a.keyword {
  border-bottom-color: rgba(255, 213, 74, 0.52);
  color: var(--pb-text);
}

.entry-content strong,
.entry-content b {
  color: #ffffff;
}

.entry-content em {
  color: #d7f7ff;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--pb-text);
  text-shadow: 0 0 14px rgba(70, 198, 255, 0.18);
}

.entry-content h1,
.entry-content h2 {
  border-bottom-color: var(--pb-line);
}

.entry-content h3 {
  padding-left: 12px;
  border-left: 4px solid var(--pb-sky);
}

.entry-content h4 {
  padding-left: 12px;
  border-left: 4px solid var(--pb-yellow);
  color: var(--pb-ice);
}

.entry-content h5,
.entry-content h6 {
  color: var(--pb-yellow);
}

.entry-content li::marker {
  color: var(--pb-yellow);
}

.entry-content table {
  border-color: var(--pb-line);
  background-color: rgba(3, 16, 37, 0.78);
}

.entry-content table th,
.entry-content table td {
  border-color: rgba(70, 198, 255, 0.24);
}

.entry-content table th {
  color: var(--pb-ice);
  background-color: rgba(22, 135, 255, 0.18);
}

.entry-content blockquote {
  border-left-color: var(--pb-yellow);
  border-radius: var(--pb-radius);
  background-color: rgba(255, 213, 74, 0.08);
  color: #dbefff;
}

.entry-content pre,
.entry-content code {
  font-family: var(--pb-mono);
}

.entry-content pre {
  border: var(--pb-border);
  border-radius: var(--pb-radius);
  background:
    linear-gradient(90deg, rgba(70, 198, 255, 0.12), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px),
    #020a18;
  color: #dff8ff;
  box-shadow: inset 0 0 22px rgba(70, 198, 255, 0.1);
}

.entry-content pre > code {
  color: inherit;
}

.entry-content code {
  border: 1px solid rgba(70, 198, 255, 0.28);
  background-color: rgba(3, 16, 37, 0.82);
  color: var(--pb-yellow);
}

.entry-content hr {
  border-top-color: var(--pb-line);
  box-shadow: var(--pb-glow-blue);
}

.entry-content .table-of-contents,
.entry-content .hatena-asin-detail,
.entry-content .itunes-embed {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius);
  background-color: rgba(70, 198, 255, 0.07);
}

.entry-content img,
.entry-content video,
.entry-content .hatena-fotolife {
  border-radius: var(--pb-radius);
}

.entry-footer {
  border-top: 1px solid rgba(70, 198, 255, 0.18);
  padding-top: 1.25em;
}

.comment-box {
  color: var(--pb-text);
}

.comment-box .entry-comment {
  border-bottom-color: rgba(70, 198, 255, 0.2);
}

.comment-box .entry-comment:first-child {
  border-top-color: rgba(70, 198, 255, 0.2);
}

.comment-content {
  color: var(--pb-text);
}

.comment-box .hatena-id-icon,
.profile-icon {
  border: 2px solid rgba(70, 198, 255, 0.46);
  box-shadow: var(--pb-glow-blue);
}

.pager.permalink a {
  color: var(--pb-text) !important;
}

.pager.permalink a:hover {
  color: var(--pb-yellow) !important;
}

.pager.permalink .pager-prev + .pager-next {
  border-left-color: var(--pb-line);
}

#box2 {
  position: relative;
}

.hatena-module {
  position: relative;
  padding: 18px;
  border: var(--pb-border);
  border-radius: var(--pb-radius);
  background:
    linear-gradient(135deg, rgba(70, 198, 255, 0.11), transparent 34%),
    var(--pb-panel-strong);
  color: var(--pb-muted);
  box-shadow: var(--pb-shadow);
}

.hatena-module-title {
  border-bottom-color: var(--pb-line);
  color: var(--pb-ice);
  font-family: var(--pb-mono);
  font-weight: 700;
  text-shadow: var(--pb-glow-blue);
}

.hatena-module-title a {
  color: var(--pb-ice);
}

.hatena-module-title a:hover {
  color: var(--pb-yellow);
}

.hatena-module-body {
  color: var(--pb-muted);
}

.hatena-module-body a,
.hatena-urllist li a {
  color: var(--pb-text);
}

.hatena-module-body a:hover,
.hatena-urllist li a:hover {
  color: var(--pb-yellow);
}

.hatena-module-search-box .search-form {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius);
  background-color: rgba(3, 16, 37, 0.82);
}

.hatena-module-search-box .search-form:hover {
  border-color: rgba(255, 213, 74, 0.72);
}

.hatena-module-search-box .search-module-input {
  color: var(--pb-text);
}

.hatena-module-search-box .search-module-input::placeholder {
  color: var(--pb-faint);
}

.hatena-module-search-box .search-module-button {
  filter: invert(1) drop-shadow(0 0 4px rgba(70, 198, 255, 0.66));
}

input,
textarea,
select {
  border-color: var(--pb-line);
  border-radius: var(--pb-radius);
  background-color: rgba(3, 16, 37, 0.84);
  color: var(--pb-text);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border-color: var(--pb-line-hot);
  border-radius: var(--pb-radius);
  background:
    linear-gradient(135deg, rgba(22, 135, 255, 0.42), rgba(70, 198, 255, 0.16)),
    var(--pb-navy);
  color: var(--pb-text);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: rgba(255, 213, 74, 0.76);
  color: var(--pb-yellow);
}

#footer {
  border-top: var(--pb-border);
  color: var(--pb-faint);
}

#footer a {
  color: var(--pb-muted);
}

#footer a:hover {
  color: var(--pb-yellow);
}

.page-archive .archive-entry {
  position: relative;
  padding: 20px 14px;
  border: var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-panel);
}

.page-archive .entry-description {
  color: var(--pb-muted);
}

.page-archive .entry-thumb {
  border: var(--pb-border);
  border-radius: var(--pb-radius);
}

.admin-menu,
.admin-menu a,
.admin-menu button,
#globalheader-container a,
#globalheader-container button {
  text-shadow: none;
}

@media (min-width: 768px) {
  #title,
  #title a {
    font-size: 2.25rem;
  }

  .page-index #title {
    font-size: 3rem;
  }

  .entry {
    padding: 30px 0;
  }

  .entry-content,
  .entry-footer {
    margin-right: 36px;
    margin-left: 36px;
  }

  .entry-header {
    padding: 0 36px;
  }

  .page-archive .archive-entry {
    padding: 28px;
  }
}

@media (min-width: 1020px) {
  #title,
  #title a {
    font-size: 2.55rem;
  }

  .page-index #title {
    font-size: 3.45rem;
  }
}

@media (max-width: 480px) {
  body {
    background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px, auto;
  }

  .entry,
  .hatena-module,
  .page-archive .archive-entry {
    padding-right: 14px;
    padding-left: 14px;
  }

  .entry-header {
    padding-right: 6px;
    padding-left: 6px;
  }

  .entry-content,
  .entry-footer {
    margin-right: 6px;
    margin-left: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  body,
  body::before {
    animation: none !important;
  }
}