Bi

Layout CSS

<style>

/* 🌈 Bi‑flag gradient background + yellow stars */
body {
  background: linear-gradient(
    to bottom,
    #d60270 0%,
    #d60270 33%,
    #0038a8 33%,
    #0038a8 66%,
    #9b4f96 66%,
    #9b4f96 100%
  );
  background-attachment: fixed;
  position: relative;
}

/* ⭐ Soft floating yellow stars */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    radial-gradient(circle, #ffeb3b 0%, #ffeb3b 40%, transparent 60%),
    radial-gradient(circle, #ffeb3b 0%, #ffeb3b 40%, transparent 60%),
    radial-gradient(circle, #ffeb3b 0%, #ffeb3b 40%, transparent 60%);
  background-size: 80px 80px, 60px 60px, 100px 100px;
  background-position: 10% 20%, 70% 40%, 40% 80%;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

/* 🌸 Blog entry container */
.blog-entry {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  border: 2px solid #ffb7e0;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 12px #ff9ad9;
}

/* 💗 Title */
.blog-entry .title {
  color: #d60270;
  text-shadow: 0 0 6px #ff8acb;
  font-weight: bold;
}

/* 📝 Content text */
.blog-entry .content p {
  color: #2b2b2b;
}

/* 💬 Blockquotes */
.blog-entry .content blockquote {
  background: rgba(155, 79, 150, 0.25);
  border-left: 4px solid #9b4f96;
  padding: 10px;
  color: #3a003a;
}

/* 🔗 Links */
.blog-entry .content a {
  color: #0038a8;
  text-shadow: 0 0 4px #7ab0ff;
  font-weight: bold;
}

/* 🖼 Images */
.blog-entry .content img {
  border: 3px solid #d60270;
  border-radius: 6px;
}

/* 👤 Profile picture */
.blog-entry .profile-pic {
  border: 3px solid #9b4f96;
  border-radius: 50%;
}

/* 🧁 Author details box */
.blog-entry .author-details {
  background: rgba(0, 56, 168, 0.25);
  border: 2px solid #0038a8;
  border-radius: 8px;
  padding: 10px;
  color: #001a4d;
}

/* 📅 Publish date */
.blog-entry .publish-date {
  color: #9b4f96;
  font-style: italic;
}

/* ⭐ Kudos section */
.blog-entry .kudos-container {
  background: rgba(255, 235, 59, 0.25);
  border: 2px solid #ffeb3b;
  border-radius: 6px;
  padding: 8px;
  color: #6b5a00;
}

/* 📄 Article row wrapper */
.row.article {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 10px;
}

/* 💬 Comments table */
.comments-table {
  background: rgba(0, 56, 168, 0.2);
  border: 2px solid #0038a8;
  border-radius: 8px;
  color: #001a4d;
}

.comments-table td {
  background: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid #9b4f96;
}

</style>