/*-- Youtube Container --*/
@keyframes pulse-once {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.animate-pulse-once {
    animation: pulse-once 2s ease-out 2;
}

@keyframes pause-fade {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pause-fade {
    animation: pause-fade 1s ease-in-out;
}


/*-- Blog Post Styling --*/
.prose-blog {
    --tw-prose-headings: #1e3a8a; /* blue-900 */
    --tw-prose-links: #2563eb; /* blue-600 */
    --tw-prose-bold: #111827; /* gray-900 */
    --tw-prose-quotes: #4b5563; /* gray-600 */
    --tw-prose-code: #db2777; /* pink-600 */
    --tw-prose-th-borders: #e5e7eb;
    --tw-prose-td-borders: #e5e7eb;
}
    
.blog-post {
  max-width: 750px;
  margin: 3rem auto;
  padding: 2.5rem;
  background-color: #fefefe;
  border: 3px dotted #cbd5e1; /* gray-300 */
  border-radius: 1rem;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  color: #1f2937; /* gray-800 */
  line-height: 1.8;
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease;
}

/* Headings */
.blog-post h1 {
  font-size: 2.2rem;
  color: #065f46; /* emerald-800 */
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.blog-post h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #0f766e; /* teal-800 */
  border-left: 4px dotted #a5f3fc; /* cyan-100 */
  padding-left: 0.75rem;
  font-weight: 700;
}

.blog-post h3 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #0369a1; /* sky-800 */
  border-left: 3px dotted #bae6fd; /* sky-200 */
  padding-left: 0.65rem;
  font-weight: 600;
}

.blog-post h4 {
  font-size: 1.2rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: #1e40af; /* blue-800 */
  border-left: 2px dotted #bfdbfe; /* blue-200 */
  padding-left: 0.6rem;
  font-weight: 600;
}

.blog-post h5 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  color: #334155; /* slate-700 */
  padding-left: 0.5rem;
  font-style: italic;
}

/* Links */
.blog-post a {
  color: #0284c7; /* sky-600 */
  font-weight: 500;
  border-bottom: 1px dotted #bae6fd;
  text-decoration: none;
  transition: border-bottom-color 0.2s ease;
}
.blog-post a:hover {
  border-bottom-color: #38bdf8; /* sky-400 */
}

/* Paragraphs */
.blog-post p {
  margin: 1.4rem 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.1s;
}
.blog-post p:hover {
  background-color: #e0f2fe; /* sky-100 */
  box-shadow: 0 0 0 4px #e0f2fe66;
}

/* Lists */
.blog-post ul {
  list-style: none;
  padding-left: 40px;
}
.blog-post ul li::before {
  content: "✿";
  color: #c7c278;
  font-size: 1.2rem;
  font-weight: 600;
  margin-right: 0.5rem;
  display: inline-block;
}
.blog-post ul li:hover::before {
  animation: wiggle 0.3s ease-in-out;
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  33% { transform: rotate(10deg); }
  66% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

/* Author Image */
.blog-post img.author-avatar {
  border-radius: 9999px !important;
  margin: 0 !important; 
  display: inline-block !important;
}

/* Images */
.blog-post img {
  display: block;
  max-width: 100%;
  margin: 2rem auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

/* Blockquotes */
.blog-post blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: #f0fdf4; /* green-50 */
  border-left: 5px solid #10b981; /* emerald-500 */
  font-style: italic;
  color: #065f46; /* emerald-800 */
  border-radius: 0.75rem;
  font-size: 1.1rem;
}

/* Inline styles */
.blog-post em {
  font-style: italic;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-weight: 500;
}
.blog-post strong {
  background: #e0f2fe; /* sky-100 */
  color: #1e3a8a; /* indigo-800 */
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
}

/* Emoji intro */
.blog-post .emoji-intro {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}