testing... sigh.

Layout CSS

/* ---- GOOGLE FONT IMPORT ---- */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Courier+Prime:ital@0;1&display=swap');

body, .blog-page {
  background-color: #04020f !important;
  background-image:
    repeating-linear-gradient(108deg, transparent, transparent 55px, rgba(74,158,255,0.07) 55px, rgba(74,158,255,0.07) 56px),
    repeating-linear-gradient(102deg, transparent, transparent 80px, rgba(123,47,255,0.05) 80px, rgba(123,47,255,0.05) 81px),
    radial-gradient(ellipse 90% 55% at 50% 0%,  rgba(74,158,255,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 8%  88%, rgba(123,47,255,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 92% 60%, rgba(74,100,255,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(40,10,100,0.25)  0%, transparent 70%),
    linear-gradient(170deg, #0c0428 0%, #04020f 45%, #080228 100%) !important;
  background-attachment: fixed !important;
  color: #c8b8e8 !important;
  font-family: 'Indie Flower', cursive !important;
}


body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}


body::before {
  content: '' !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 460px !important;
  background:
    radial-gradient(ellipse 44% 54% at 28% 44%, rgba(74,158,255,0.11) 0%, transparent 70%),
    radial-gradient(ellipse 44% 54% at 72% 44%, rgba(74,158,255,0.11) 0%, transparent 70%),
    radial-gradient(ellipse 28% 32% at 28% 68%, rgba(123,47,255,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 28% 32% at 72% 68%, rgba(123,47,255,0.09) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: butterflyPulse 8s ease-in-out infinite alternate !important;
}

@keyframes butterflyPulse {
  0%   { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%,-50%) scale(1.07); }
}

/* ---- BLOG ENTRY CARD ---- */
.blog-entry {
  background: linear-gradient(135deg, rgba(8,4,28,0.94) 0%, rgba(6,2,20,0.90) 100%) !important;
  border: 1px solid rgba(74,158,255,0.35) !important;
  border-radius: 6px !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow:
    0 4px 35px rgba(74,158,255,0.12),
    0 0 80px rgba(74,158,255,0.05),
    inset 0 0 40px rgba(74,158,255,0.04) !important;
  transition: border-color 0.4s, box-shadow 0.4s !important;
}

.blog-entry:hover {
  border-color: rgba(74,158,255,0.70) !important;
  box-shadow:
    0 4px 45px rgba(74,158,255,0.22),
    0 0 80px rgba(74,158,255,0.08),
    inset 0 0 40px rgba(74,158,255,0.06) !important;
}


.blog-entry::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(74,158,255,0.9) 20%,
    rgba(123,47,255,0.7) 55%,
    rgba(74,158,255,0.5) 80%,
    transparent 100%
  ) !important;
  border-radius: 3px 0 0 3px !important;
  pointer-events: none !important;
  box-shadow: 0 0 8px rgba(74,158,255,0.4) !important;
}


.blog-entry::after {
  content: ' this action will have consequences...' !important;
  position: absolute !important;
  bottom: 12px !important; right: 16px !important;
  font-family: 'Indie Flower', cursive !important;
  font-size: 0.72em !important;
  font-style: italic !important;
  color: rgba(74, 158, 255, 0.45) !important;
  text-shadow: 0 0 10px rgba(74, 158, 255, 0.4) !important;
  letter-spacing: 1px !important;
  pointer-events: none !important;
}


.blog-entry .title {
  font-family: 'Indie Flower', cursive !important;
  color: #c0e0ff !important;
  text-shadow:
    0 0 20px rgba(74,158,255,0.85),
    0 0 50px rgba(74,158,255,0.35),
    0 0 80px rgba(74,158,255,0.15) !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid rgba(74,158,255,0.22) !important;
  padding-bottom: 8px !important;
  font-size: 1.5em !important;
}


.blog-entry .author-details {
  font-family: 'Courier Prime', monospace !important;
  font-size: 0.72em !important;
  color: rgba(74,158,255,0.70) !important;
  letter-spacing: 1.5px !important;
  background: rgba(74,158,255,0.06) !important;
  border: 1px solid rgba(74,158,255,0.15) !important;
  border-radius: 4px !important;
}

.blog-entry .publish-date {
  font-family: 'Courier Prime', monospace !important;
  font-size: 0.68em !important;
  color: rgba(74,158,255,0.50) !important;
  letter-spacing: 2px !important;
}


.blog-entry .content p {
  color: #cab8e8 !important;
  line-height: 1.95 !important;
  font-family: 'Indie Flower', cursive !important;
  font-size: 1em !important;
}


.blog-entry .content blockquote {
  border-left: 3px solid rgba(74,158,255,0.70) !important;
  margin: 16px 0 !important;
  padding: 12px 20px !important;
  color: rgba(180,220,255,0.88) !important;
  font-style: italic !important;
  font-family: 'Indie Flower', cursive !important;
  font-size: 1.05em !important;
  background: rgba(74,158,255,0.08) !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow:
    inset 0 0 20px rgba(74,158,255,0.05),
    0 0 15px rgba(74,158,255,0.06) !important;
}

.blog-entry .content a {
  color: #88c8ff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(74,158,255,0.35) !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}

.blog-entry .content a:hover {
  color: #cc88ff !important;
  text-shadow: 0 0 10px rgba(204,136,255,0.7) !important;
  border-color: rgba(204,136,255,0.5) !important;
}

/* ---- PFP ---- */
.blog-entry .profile-pic img {
  border: 2px solid rgba(74,158,255,0.55) !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 16px rgba(74,158,255,0.45),
    0 0 40px rgba(74,158,255,0.18) !important;
}


.comments-table {
  background: rgba(6,3,20,0.85) !important;
  border: 1px solid rgba(74,158,255,0.18) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 20px rgba(74,158,255,0.07) !important;
  font-family: 'Indie Flower', cursive !important;
}


.blog-entry .kudos-container {
  border-top: 1px solid rgba(74,158,255,0.18) !important;
  color: rgba(168,212,255,0.55) !important;
  font-family: 'Courier Prime', monospace !important;
  font-size: 0.75em !important;
  letter-spacing: 1px !important;
}


a { color: #88c8ff !important; transition: color 0.2s !important; }
a:hover { color: #cc88ff !important; }
h1, h2, h3 {
  color: #b8dcff !important;
  font-family: 'Indie Flower', cursive !important;
  text-shadow: 0 0 12px rgba(74,158,255,0.45) !important;
}
.row.article { background: rgba(4,2,15,0.78) !important; }