* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: url('images/cursor.png'), auto !important;
}

/* ========== BODY / BACKGROUND ========== */

body {
  font-family: "Verdana", "Tahoma", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #f8f5ff;

  /* Deep, night-sky purple */
  background-color: #0e0b1d;

  /* Soft glowy gradients + optional tiling stars if you add one later */
  background-image:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(193, 177, 255, 0.22), transparent 55%);
  background-repeat: repeat;
}

/* Centered layout like an old fansite frame */

.page-wrapper {
  max-width: 900px;
  margin: 40px auto;
  padding: 10px 20px 30px;
  background: rgba(14, 5, 40, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  border-radius: 6px;
}

/* ========== HEADER ========== */

.site-header {
  padding: 14px 10px 10px;
  background: linear-gradient(135deg, #322a6e, #6940a8);
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* Your pixel banner */

.header-banner {
  display: block;
  margin: 0 auto 8px auto;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated; /* keep the pixel art look */
}

/* Tagline under banner */

.tagline {
  margin-top: 4px;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #e2d7ff;
}

/* ========== MAIN NAVIGATION ========== */

.main-nav {
  margin-top: 8px;
  background: #21163f;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}

/* Top-level nav list */
.main-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.main-nav-list > li {
  position: relative; /* needed so dropdown can attach to each li */
}

/* Top-level links */
.main-nav a {
  display: block;
  padding: 8px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #f4edff;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap; /* keep labels on one line */
}

.main-nav-list > li:last-child > a {
  border-right: none;
}

.main-nav a:hover,
.main-nav a.current {
  background: linear-gradient(135deg, #624bb5, #b26ee0);
  color: #ffffff;
}


/* ========== CURRENT PAGE MOON SPARKLE ========== */

.main-nav a.current {
  position: relative;
}

/* The sparkle */
.main-nav a.current::after {
  content: "?"; /* you can change this to ? ? ? ? etc. */
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #ffe6ff; /* soft moon-pink */
  text-shadow: 0 0 6px rgba(255, 200, 255, 0.9);
}

/* If you want the sparkle ALSO on dropdown items */
.dropdown-menu a.current::after {
  content: "?";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #ffe6ff;
  text-shadow: 0 0 6px rgba(255, 200, 255, 0.9);
}

/* ========== CURRENT PAGE MOON SPARKLE (Animated) ========== */

/* Shimmer animation keyframes */
@keyframes moonShimmer {
  0%   { opacity: 0.45; transform: translateY(-50%) scale(1); }
  50%  { opacity: 1;    transform: translateY(-50%) scale(1.25); }
  100% { opacity: 0.45; transform: translateY(-50%) scale(1); }
}

/* Sparkle after the current page link */
.main-nav a.current::after {
  /* Animation settings */
  animation: moonShimmer 1.8s ease-in-out infinite;
}

/* Sparkle on dropdown current pages too */
.dropdown-menu a.current::after {
  animation: moonShimmer 1.8s ease-in-out infinite;
}


/* ========== DROPDOWN ========== */

/* container li already has position: relative */

.dropdown-menu {
  display: none;              /* hidden by default */
  position: absolute;
  top: 100%;                  /* directly under the Identities link */
  left: 0;
  list-style: none;
  background: #2b1b55;
  border: 1px solid rgba(255, 255, 255, 0.25);
  min-width: 180px;
  z-index: 999;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

/* dropdown links */
.dropdown-menu li a {
  border-right: none;         /* no vertical dividers inside dropdown */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dropdown-menu li:last-child a {
  border-bottom: none;
}

/* Show dropdown when hovering the list item */
.dropdown:hover > .dropdown-menu {
  display: block;
}

/* Slight extra padding on the Identities label with arrow */
.dropbtn {
  padding-right: 10px;
}



/* ========== CONTENT AREA ========== */

.content {
  padding: 20px 4%;
}

.content-box {
  margin-bottom: 24px;
  padding: 14px 16px 16px;
  background: rgba(19, 12, 52, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

/* Headings */

.content-box h2 {
  font-family: "Georgia", serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  color: #ffe9ff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 4px;
}

.content-box h3 {
    color: #b26ee0;
}

.content-box p {
  margin-bottom: 10px;
}

.content-box a {
  color: #ffcfff;
  text-decoration: none;
}

.content-box a:hover {
  color: #ffffff;
}

/* Cute bullet list */

.bullet-stars {
  list-style: none;
  padding-left: 0;
}

.bullet-stars li {
  margin-left: 0;
  padding-left: 1.2em;
  position: relative;
}

.bullet-stars li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffd8ff;
}

/* ========== PROFILE IMAGE WRAP (for About page) ========== */

.about-content {
  font-size: 1em;
}

.profile-image {
  float: left;
  max-width: 220px;
  height: auto;
  margin: 0 20px 15px 0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Clear float after the about content */
.about-content::after {
  content: "";
  display: block;
  clear: both;
}

/* For smaller screens */
@media (max-width: 768px) {
  .profile-image {
    float: none;
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto 15px auto;
  }
}

/* ========== IDENTITY GRID ========== */

.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.identity-card {
  padding: 12px 12px 14px;
  background: rgba(29, 17, 72, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.identity-card h3 {
  font-family: "Georgia", serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  color: #ffe9ff;
}

.identity-tagline {
  font-size: 12px;
  color: #d6c8ff;
  margin-bottom: 6px;
}


/* ========== CICI BUTTON (for links) ========== */

.cici-button {
  display: inline-block;
  padding: 0.6em 1.6em;
  margin: 0.5em 0;
  border-radius: 999px;
  font: 0.9rem 'Verdana', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #2b1b55;
  background: linear-gradient(135deg, #322a6e, #b26ee0);
  box-shadow: 0 0 8px rgba(137, 145, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cici-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(190, 200, 255, 1);
}


.image-text-block {
  margin-bottom: 1.5em;
}

/* Float the image left so text wraps around it */
.left-image {
  float: left;
  max-width: 220px;       /* adjust to taste */
  height: auto;
  margin: 0 14px 8px 0;   /* space to the right/bottom of image */
  border-radius: 4px;     /* optional */
}

/* Clear the float at the end of the block so it doesn't affect later sections */
.image-text-block::after {
  content: "";
  display: block;
  clear: both;
}



/* Essay list */

.essay-list {
  list-style: none;
  padding-left: 0;
}

.essay-list li {
  margin-bottom: 4px;
}

.essay-title {
  font-weight: bold;
  color: #ffe7ff;
}

.note {
  font-size: 12px;
  color: #d5c9ff;
}


/* ========== 88x31 BUTTON WALL ========== */

.button-wall {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.button-wall a {
  display: inline-block;
}

.button-wall img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated; /* that crunchy old-school look */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  background: #000000;
}

.button-wall a:hover img {
  box-shadow: 0 0 8px rgba(200, 200, 255, 0.9);
  border-color: #ffffff;
}


/* ========== DIVIDER WITH YOUR CICI IMAGE ========== */

.cici-divider {
  text-align: center;
  margin: 24px 0;
}

.cici-divider img {
  max-width: 20%;        /* 50% of container width */
  width: 20%;            /* ? CHANGED FROM 100% TO 30% */
  height: auto;
  filter: drop-shadow(0 0 6px rgba(190, 200, 255, 0.9));
}

/* ========== FOOTER ========== */

.site-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 11px;
  color: #c5b3ff;
  text-align: center;
}

.site-footer a {
  font-size: 11px;
  color: #b26ee0;
  text-transform: uppercase;
  text-decoration: none;
}

/* ========== FLOATING CICI BADGE (CORNER) ========== */
.cici-floating-badge {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 110px;
  height: auto;
  display: block;
  z-index: 9999;
}

.cici-floating-badge img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cici-floating-badge:hover img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(210, 220, 255, 1));
}  /* ? ADDED THIS CLOSING BRACE */
/* ========== RESPONSIVE TWEAKS ========== */

@media (max-width: 700px) {
  .page-wrapper {
    margin: 20px auto;
    padding-inline: 10px;
  }

  .main-nav a {
    padding: 6px 8px;
    font-size: 10px;
  }

  .content-box {
    padding: 12px;
  }

  .cici-floating-badge {
    right: 0px;
    bottom: 0px;
    width: 90px;
  }
}