body { font-family: 'Roboto', sans-serif; min-height: max(884px, 100dvh); }
    .font-playfair { font-family: 'Playfair Display', serif; }
    body.overflow-hidden { overflow: hidden; }
    #reboot-btn { position: absolute; left: 50%; top: 58%; width: 160px; height: 58px; transform: translate(-50%, -50%); opacity: 0; z-index: 10; cursor: pointer; }
    @media (max-width: 768px) {
      #reboot-btn { width: 120px; height: 48px; top: 57%; }
    }
    .dots::after {
  content: '';
  display: inline-block;
  animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}
<style>
.typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background: #555;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
    40%{opacity:1;}

}  /* ← this closing brace was missing */
    /* === BLOG MENU UNIVERSAL SKIN === */

body.blog-menu {

  background:

    radial-gradient(circle at 50% 15%, rgba(173,216,230,0.12), transparent 70%),

    url('Pictures/mainbg.png') center top / cover no-repeat fixed,

    #0b0d12;

  color: #cbd5e1;

  font-family: 'Roboto Mono', monospace;

  margin: 0;

  padding: 0;

}

/* Grid layout */

.blog-grid {

  display: grid;

  gap: 1.8rem;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  max-width: 1100px;

  margin: 0 auto;

  padding: 2rem;

}

/* Card base style */

.blog-card {

  background: rgba(15, 23, 42, 0.65);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(56, 189, 248, 0.2);

  border-radius: 1rem;

  overflow: hidden;

  box-shadow: 0 0 25px rgba(14, 165, 233, 0.2);

  transition: transform .25s ease, box-shadow .25s ease;

}

.blog-card:hover {

  transform: scale(1.04);

  box-shadow: 0 0 40px rgba(14,165,233,0.4);

}

.blog-card img {

  width: 100%;

  height: 200px;

  object-fit: cover;

}

.blog-card-content {

  padding: 1.2rem;

}

.blog-card-content h3 {

  color: #38bdf8;

  font-family: 'Playfair Display', serif;

  margin-bottom: .4rem;

}

.blog-card-content p {

  color: #cbd5e1;

  font-size: .95em;

  line-height: 1.5em;

  margin-bottom: 1rem;

}

.blog-card-content a {

  color: #38bdf8;

  text-decoration: none;

  border-bottom: 1px solid #38bdf8;

  font-weight: bold;

}

.blog-card-content a:hover {

  color: #fff;

  border-color: #fff;

}

/* Accent variants (optional per section) */

body.blog-menu.art .blog-card,

body.blog-menu.art .blog-card-content a { border-color: rgba(251,191,36,0.25); color: #fbbf24; }

body.blog-menu.art .blog-card-content h3 { color: #fbbf24; }

body.blog-menu.humor .blog-card,

body.blog-menu.humor .blog-card-content a { border-color: rgba(217,119,6,0.25); color: #f59e0b; }

body.blog-menu.humor .blog-card-content h3 { color: #f59e0b; }

body.blog-menu.codex .blog-card,

body.blog-menu.codex .blog-card-content a { border-color: rgba(56,189,248,0.25); color: #38bdf8; }

body.blog-menu.codex .blog-card-content h3 { color: #38bdf8; }
    /* --- Gentle glow pulse on hover --- */

@keyframes blogCardPulse {

  0%, 100% {

    box-shadow: 0 0 25px rgba(14,165,233,0.25);

  }

  50% {

    box-shadow: 0 0 40px rgba(14,165,233,0.45);

  }

}

/* Default cyan tone (Codex) */

.blog-card:hover {

  animation: blogCardPulse 2.4s ease-in-out infinite;

}

/* Variant colors adapt automatically */

body.blog-menu.art .blog-card:hover {

  animation: blogCardPulseAmber 2.4s ease-in-out infinite;

}

body.blog-menu.humor .blog-card:hover {

  animation: blogCardPulseGold 2.4s ease-in-out infinite;

}

/* Amber and gold glow versions */

@keyframes blogCardPulseAmber {

  0%, 100% { box-shadow: 0 0 25px rgba(251,191,36,0.25); }

  50%      { box-shadow: 0 0 40px rgba(251,191,36,0.45); }

}

@keyframes blogCardPulseGold {

  0%, 100% { box-shadow: 0 0 25px rgba(245,158,11,0.25); }

  50%      { box-shadow: 0 0 40px rgba(245,158,11,0.45); }

}
    /* === Blog-menu backgrounds by section === */

body.blog-menu.codex {

  background:

    radial-gradient(circle at 50% 15%, rgba(173,216,230,0.12), transparent 70%),

    url('/Pictures/mainbg.png') center top / cover no-repeat fixed,

    #0b0d12;

}

body.blog-menu.art {

  background:

    radial-gradient(circle at 50% 15%, rgba(251,191,36,0.10), transparent 70%),

    url('/Pictures/artbg.png') center top / cover no-repeat fixed,

    #0b0d12;
    color: #cbd5e1;
    /* 👇 this line restores your imported fonts */

  font-family: 'Roboto', sans-serif !important;

}

body.blog-menu.art h1,

body.blog-menu.art h2,

body.blog-menu.art h3 {

  font-family: 'Playfair Display', serif !important;

}

}

body.blog-menu.humor {

  background:

    radial-gradient(circle at 50% 15%, rgba(245,158,11,0.10), transparent 70%),

    url('/Pictures/humorbg.png') center top / cover no-repeat fixed,

    #0b0d12;

}
/* === ART BLOG THEME === */

body.blog-menu.art {

  background:

    radial-gradient(circle at 50% 15%, rgba(251,191,36,0.12), transparent 70%),

    url('Pictures/artbg.png') center top / cover no-repeat fixed,

    #0b0d12;

  color: #cbd5e1;

  font-family: 'Roboto', sans-serif !important;

}

body.blog-menu.art h1,

body.blog-menu.art h2,

body.blog-menu.art h3 {

  font-family: 'Playfair Display', serif !important;

}

body.blog-menu.art .card {

  background: rgba(33, 24, 8, 0.65);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(251,191,36,0.3);

  box-shadow: 0 0 25px rgba(251,191,36,0.25);

}
/* === HUMOR BLOG THEME === */

body.blog-menu.humor {

  background:

    radial-gradient(circle at 50% 15%, rgba(255,235,180,0.35), transparent 80%),

    url('Pictures/humorbg.png') center top / cover no-repeat fixed,

    #f6ecd9;

  color: #332211;

  font-family: 'Roboto', sans-serif !important;

}

/* gold Playfair titles */

body.blog-menu.humor h1,

body.blog-menu.humor h2,

body.blog-menu.humor h3 {

  font-family: 'Playfair Display', serif !important;

  color: #ae8b37;

}

/* glassy card look but inverted (light parchment w/ golden border) */

body.blog-menu.humor .card {

  background: rgba(255, 252, 240, 0.75);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(174,139,55,0.25);

  box-shadow: 0 0 20px rgba(174,139,55,0.2);

  border-radius: 1rem;

  transition: transform .25s ease, box-shadow .25s ease;

}

body.blog-menu.humor .card:hover {

  transform: scale(1.03);

  box-shadow: 0 0 30px rgba(174,139,55,0.35);

}

/* link color tuning */

body.blog-menu.humor a.btn,

body.blog-menu.humor a {

  color: #bb8516;

  border-color: #bb8516;

}

body.blog-menu.humor a:hover {

  color: #ae8b37;

  border-color: #ae8b37;

}

body.blog-menu.art .card:hover {

  transform: scale(1.03);

  box-shadow: 0 0 40px rgba(251,191,36,0.4);

}