/* ================================
   リセットボタン完全無効化
================================ */

.resetToggle,
.resetLabel {
  display: none !important;
}

/* ================================
   サイケデリック背景
================================ */

.entry,
.entry-content,
.entry-content-inner,
.article-container {
  animation: psychedelicBackground 3s infinite !important;
  background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/compsukisuki/20241227/20241227005657.jpg') !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
  background-position: left top !important;
  color: #ffffff !important;
}

/* 背景色アニメーション */
@keyframes psychedelicBackground {
  0% {
    background-color: rgba(255, 0, 255, 0.5);
  }

  25% {
    background-color: rgba(0, 255, 255, 0.5);
  }

  50% {
    background-color: rgba(255, 255, 0, 0.5);
  }

  75% {
    background-color: rgba(255, 102, 0, 0.5);
  }

  100% {
    background-color: rgba(255, 0, 255, 0.5);
  }
}

/* テキストアニメーション */
@keyframes psychedelicText {
  0% {
    color: #ff00ff;
    text-shadow: 2px 2px 10px #00ff00, -2px -2px 10px #ffff00;
  }

  25% {
    color: #00ffff;
    text-shadow: 2px 2px 10px #ff00ff, -2px -2px 10px #ff6600;
  }

  50% {
    color: #ffff00;
    text-shadow: 2px 2px 10px #00ffff, -2px -2px 10px #ff0000;
  }

  75% {
    color: #ff6600;
    text-shadow: 2px 2px 10px #ffff00, -2px -2px 10px #00ff00;
  }

  100% {
    color: #ff00ff;
    text-shadow: 2px 2px 10px #00ff00, -2px -2px 10px #ffff00;
  }
}

/* ================================
   ブログ全体タイトル周辺
================================ */

#blog-title,
#blog-title a,
#title,
#title a,
#blog-description,
.header-title,
.header-title a,
.header-description,
#blog-description a {
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
  font-weight: bold !important;
  animation: psychedelicText 2s infinite !important;
  color: #ff00ff !important;
  text-shadow: 2px 2px 10px #00ff00, -2px -2px 10px #ffff00 !important;
}

/* ブログ上部ヘッダー */
#blog-title,
#title,
.header,
#blog-title-inner {
  background: linear-gradient(45deg, #ff00ff, #00ffff) !important;
  border: 5px groove #ff00ff !important;
  padding: 20px !important;
  box-shadow: 0 0 20px #00ff00, 0 0 40px #ff0000 !important;
}

/* ================================
   記事タイトル・日付・カテゴリ
================================ */

.entry-header,
.entry-title,
.entry-title a,
.entry-header h1,
.entry-header h1 a,
.entry-header .date,
.entry-header .categories,
.entry-header .categories a,
.date,
.date a,
.categories,
.categories a,
.entry-categories,
.entry-categories a {
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
  font-weight: bold !important;
  animation: psychedelicText 2s infinite !important;
  color: #ff00ff !important;
  text-shadow: 2px 2px 10px #00ff00, -2px -2px 10px #ffff00 !important;
}

/* 記事タイトルの箱 */
.entry-header {
  border: 5px groove #ff00ff !important;
  padding: 20px !important;
  margin: 20px auto !important;
  background: linear-gradient(45deg, #ff00ff, #00ffff) !important;
  box-shadow: 0 0 20px #00ff00, 0 0 40px #ff0000 !important;
}

/* 記事タイトルリンク */
.entry-title a:link,
.entry-title a:visited,
.entry-header h1 a:link,
.entry-header h1 a:visited {
  color: #00ffff !important;
  background-color: #ff00ff !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  box-shadow: 0 0 15px #ff6600, 0 0 25px #00ffff !important;
  text-decoration: none !important;
}

/* 記事タイトルリンク hover */
.entry-title a:hover,
.entry-header h1 a:hover {
  color: #ffff00 !important;
  background-color: #00ff00 !important;
  text-shadow: 0 0 15px #ffffff, 0 0 30px #ff0000 !important;
  box-shadow: 0 0 20px #00ff00, 0 0 40px #ff6600 !important;
}

/* ================================
   記事本文
================================ */

.entry-content,
.entry-content-inner,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content li,
.entry-content div,
.entry-content span,
.entry-content blockquote,
.entry-content pre,
.entry-content code,
.entry-content strong,
.entry-content em,
.entry-content a,
.article-container,
.article-container h1,
.article-container h2,
.article-container h3,
.article-container h4,
.article-container h5,
.article-container h6,
.article-container p,
.article-container li,
.article-container div,
.article-container span,
.article-container blockquote,
.article-container pre,
.article-container code,
.article-container strong,
.article-container em,
.article-container a {
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
  font-weight: bold !important;
  animation: psychedelicText 2s infinite !important;
}

/* 記事本文の箱 */
.entry-content-inner,
.article-container .article-body,
.entry-content .article-body {
  border: 5px groove #ff00ff !important;
  padding: 20px !important;
  margin: 20px auto !important;
  background: linear-gradient(45deg, #ff00ff, #00ffff) !important;
  box-shadow: 0 0 20px #00ff00, 0 0 40px #ff0000 !important;
  animation: psychedelicText 3s infinite alternate !important;
}

/* 本文内見出し */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.article-container h1,
.article-container h2,
.article-container h3,
.article-container h4 {
  border: 3px dotted #ffff00 !important;
  padding: 10px !important;
  background: rgba(255, 0, 255, 0.6) !important;
  box-shadow: 0 0 15px #00ffff, 0 0 30px #ff6600 !important;
}

/* 本文内リンク */
.entry-content a:link,
.entry-content a:visited,
.article-container a:link,
.article-container a:visited {
  color: #00ffff !important;
  background-color: #ff00ff !important;
  padding: 5px !important;
  border-radius: 5px !important;
  box-shadow: 0 0 15px #ff6600, 0 0 25px #00ffff !important;
  animation: psychedelicText 1.5s infinite !important;
  text-decoration: none !important;
}

/* 本文内リンク hover */
.entry-content a:hover,
.article-container a:hover {
  color: #ffff00 !important;
  background-color: #00ff00 !important;
  text-shadow: 0 0 15px #ffffff, 0 0 30px #ff0000 !important;
  box-shadow: 0 0 20px #00ff00, 0 0 40px #ff6600 !important;
}

/* 引用 */
.entry-content blockquote,
.article-container blockquote {
  border-left: 8px solid #ff00ff !important;
  background: rgba(0, 255, 255, 0.5) !important;
  padding: 15px !important;
  box-shadow: 0 0 15px #ffff00, 0 0 30px #ff0000 !important;
}

/* コード・pre */
.entry-content pre,
.entry-content code,
.article-container pre,
.article-container code {
  background: #000000 !important;
  color: #00ffff !important;
  border: 2px solid #ff00ff !important;
  padding: 3px 5px !important;
  text-shadow: 0 0 10px #00ffff !important;
}

/* ================================
   before / after reset 系
================================ */

.before-reset {
  display: block !important;
}

.after-reset {
  display: none !important;
}

/* 念のため、checked状態によるプレーン化を上書き無効化 */
.resetToggle:checked ~ .article-container,
.resetToggle:checked ~ .entry,
.resetToggle:checked ~ .entry-content,
.resetToggle:checked ~ .entry-content-inner {
  animation: psychedelicBackground 3s infinite !important;
  background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/compsukisuki/20241227/20241227005657.jpg') !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
  background-position: left top !important;
  color: #ffffff !important;
}

.resetToggle:checked ~ .article-container h1,
.resetToggle:checked ~ .article-container h2,
.resetToggle:checked ~ .article-container h3,
.resetToggle:checked ~ .article-container p,
.resetToggle:checked ~ .article-container a,
.resetToggle:checked ~ .entry-content h1,
.resetToggle:checked ~ .entry-content h2,
.resetToggle:checked ~ .entry-content h3,
.resetToggle:checked ~ .entry-content p,
.resetToggle:checked ~ .entry-content a {
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
  font-weight: bold !important;
  animation: psychedelicText 2s infinite !important;
  text-shadow: 2px 2px 10px #00ff00, -2px -2px 10px #ffff00 !important;
}

/* ================================
   スマホ調整
================================ */

@media screen and (max-width: 768px) {
  .entry-header,
  .entry-content-inner,
  .article-container .article-body,
  .entry-content .article-body,
  #blog-title,
  #title,
  .header,
  #blog-title-inner {
    padding: 12px !important;
    margin: 10px auto !important;
  }

  .entry-title,
  .entry-title a,
  .entry-content,
  .entry-content p,
  .entry-content li,
  .article-container,
  .article-container p,
  .article-container li {
    font-size: 95% !important;
  }
}