body {
         font-family: "Georgia", serif;
         background-image: url("https://derrickrossignol.com/pokemonbook/blog/resources/bg.png");
         background-size: 6px 6px;
         background-repeat: repeat;
         background-attachment: fixed;
         background-color: #121212;
         color: #e0e0e0;
         margin: 0;
         line-height: 1.7;
         }
         a {
         color: #66ccff;
         text-decoration: none;
         }
         a:hover {
         text-decoration: underline;
         }
         header {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 1000;
         text-align: center;
         padding: 1px 1px 10px;
         background: #1b1b1b;
         border-bottom: 5px solid #000;
         }
         header h1 a {
         font-family: "Helvetica Neue", sans-serif;
         font-size: 1em;
         color: #fff;
         letter-spacing: 1px;
         }
         header p {
         color: #bbb;
         margin-top: 10px;
         font-size: 1.2em;
         }
         main {
         max-width: 700px;
         margin: 0 auto;        /* center horizontally */
         padding: 175px 20px 0; /* top padding ≈ header height */
         }
         .article-box {
         background-color: #1b1b1b;
         border-radius: 10px;
         padding: 30px;
         margin-bottom: 40px;
         box-shadow: 0 6px 20px rgba(0,0,0,0.4);
         }
         .article-box h2 {
         font-family: "Helvetica Neue", sans-serif;
         margin-top: 0;
         }
         .article-box h2 a {
         color: #fff;
         transition: color 0.3s ease;
         }
         .article-box h2 a:hover {
         color: #66ccff;
         }
         .article-box p {
         margin: 15px 0;
         }
         .article-share-box {
         background-color: #1b1b1b;
         border-radius: 10px;
         padding: 30px;
         margin-bottom: 40px;
         box-shadow: 0 6px 20px rgba(0,0,0,0.4);
         }
         .article-share-box h2 {
         font-family: "Helvetica Neue", sans-serif;
         margin-top: 0;
         }
         .article-share-box h2 a {
         color: #fff;
         transition: color 0.3s ease;
         }
         .article-share-box h2 a:hover {
         color: #66ccff;
         }
         .article-share-box p {
         margin: 15px 0;
         }
         .article-share-box img {
         transition: transform 0.3s ease;
         }
         .article-share-box img:hover {
         transform: scale(1.1);
         }
         .meta {
         font-size: 0.9em;
         color: #aaa;
         }
         .responsive-img {
         max-width: 100%;
         border-radius: 8px;
         margin: 20px 0;
         display: block;
         transition: transform 0.3s ease;
         }
         .responsive-img:hover {
         transform: scale(1.02);
         }
         .button-link {
         display: inline-block;
         margin-top: 20px;
         padding: 12px 25px;
         background: #ff0000;
         color: white;
         border-radius: 6px;
         font-weight: bold;
         text-decoration: none;
         transition: background 0.3s ease;
         }
         .button-link:hover {
         background: #e60000;
         }
         .back-button-box {
         text-align: center;
         max-width: 300px;
         margin: 30px auto;
         padding: 20px;
         border-radius: 10px;
         background-color: #1b1b1b;
         border: 1px solid #2e2e2e;
         box-shadow: 0 6px 20px rgba(0,0,0,0.3);
         }
         .back-button-box a {
         text-decoration: none;
         color: #fff;
         font-weight: bold;
         font-size: 1.1em;
         }
         .back-button-box a:hover {
         color: #66ccff;
         }
         footer {
         text-align: center;
         padding: 30px 20px;
         font-size: 0.9em;
         color: #777;
         }
         footer a {
         color: #66ccff;
         }
         footer a:hover {
         text-decoration: underline;
         }
         .social-links {
         display: none; /* hidden by default */
         font-size: 1em;
         background-color: none;
         border-radius: 1px;
         padding: 1px;
         margin: 1px auto;
         max-width: 600px;
         }
         .social-links img {
         transition: transform 0.3s ease;
         }
         .social-links img:hover {
         transform: scale(1.1);
         filter: invert(0.5);
         }
         .subscribe-links {
         display: none; /* hidden by default */
         font-size: 1em;
         background-color: none;
         border-radius: 1px;
         padding: 1px;
         margin: 1px auto;
         max-width: 600px;
         }
         .grow-text {
         display: inline-block;
         transition: transform 0.3s ease, color 0.3s ease;
         }
         .grow-text:hover {
         transform: scale(1.05);
         color: #66ccff;
         }
         #toast {
         visibility: hidden;
         min-width: 250px;
         background-color: #fff;
         color: #333;
         text-align: center;
         border-radius: 6px;
         padding: 12px;
         position: fixed;
         z-index: 9999;
         left: 50%;
         bottom: 30px;
         font-size: 1em;
         opacity: 0;
         transform: translateX(-50%); /* CENTER horizontally */
         transition: opacity 0.5s, bottom 0.5s;
         }
         #toast.show {
         visibility: visible;
         opacity: 1;
         bottom: 50px;
         }
         h1.title-bg-box {
         position: relative;
         display: inline-block;
         animation: textRotate 6s ease-in-out infinite;
         z-index: 1; /* keep text above the box */
         }
         
         /* aura rectangle */
         h1.title-bg-box::before {
         content: "";
         position: absolute;
         top: 0px;   /* expand beyond text */
         left: 0px;
         width: 100%;  /* set width manually or relative */
         height: 100%; /* set height manually or relative */
         
         background: #FF0044;      /* rectangle color */
         border-radius: 0px;  /* optional: rounded corners */
         filter: blur(0px);    /* glow effect (remove if you want solid box) */
         opacity: 0.7;
         z-index: -1;          /* behind the text */
         animation: boxGlow 3s ease-in-out infinite;
         }
         
         /* aura pulsing + rotation */
         @keyframes boxGlow {
         0%, 100% {
           transform: scale(1.05, 0.7) rotate(-2deg);
           opacity: 0.9;
         }
         50% {
           transform: scale(1.1) rotate(2deg);
           opacity: 0.6;
         }
         }
         
         /* whole text rotation */
         @keyframes textRotate {
         0%   { transform: rotate(-2deg); }
         50%  { transform: rotate(2deg); }
         100% { transform: rotate(-2deg); }
         }
  /* Start hidden */
  body {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* Fade in when class is applied */
  body.fade-in {
    opacity: 1;
  }

  /* Accessibility: skip animations for reduced-motion users */
  @media (prefers-reduced-motion: reduce) {
    body {
      transition: none;
      opacity: 1;
    }
  }