/* BACKGROUND (GIF) */
body {
  margin: 0;
  position: relative; 
  z-index: 0;       
  background: url("https://i.ibb.co/ZzV6HJ6N/aesthetic-purple.gif") no-repeat center center fixed;
  background-size: cover;
  font-family: 'Verdana', sans-serif;
  color: #f0e6ff;

  /* cursor moved here so it doesn't override background */
  cursor: url("https://files.catbox.moe/2gexaz.png"), auto;
}
/* ICY BACKGROUND DURING CRYSTAL MODE */
body.crystal-glitch {
  background: url("https://files.catbox.moe/dcnk9k.gif") no-repeat center center fixed;
  background-size: cover;
}

/* REGULAR MODE TEXT HIGHLIGHT */
::selection {
  background: #C59BFF; /* soft purple highlight */
  color: #ffffff;      /* white text */
}

/* MAIN BOX */
.container {
  background: rgba(20, 0, 35, 0.65);
  border: 2px solid #A600FF;
  padding: 20px;
  width: 80%;
  margin: 90px auto 50px auto; /* lowered from 120px */
  border-radius: 20px;
  box-shadow: 0 0 20px #a600ff, 0 0 40px #3d0066;
  backdrop-filter: blur(4px);
}


/* BANNER */
.banner {
  background: linear-gradient(135deg, #2F2136, #1E0929);
  padding: 25px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 0 15px #A600FF;
}

/* GLITCH TITLE */
.glitch-title {
  font-size: 45px;
  letter-spacing: 6px;
  color: #d8b7ff;
  position: relative;
  text-transform: uppercase;
  text-shadow: 0 0 10px #A600FF;
  animation: glitch-left 1.4s infinite steps(2);
}


.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
}

.glitch-title::before {
  color: #ff2cff;
  transform: translate(2px, -2px);
}

.glitch-title::after {
  color: #2cffea;
  transform: translate(-2px, 2px);
}
/* GLITCH ANIMATION — LEFT ONLY */
@keyframes glitch-left {
  0% { opacity: 1; transform: none; }
  10% { opacity: 0.85; transform: translateX(-2px); }
  20% { opacity: 1; transform: none; }
  30% { opacity: 0.9; transform: translateX(-3px); }
  40% { opacity: 1; transform: none; }
  50% { opacity: 0.8; transform: translateX(-1px); }
  60% { opacity: 1; transform: none; }
  70% { opacity: 0.9; transform: translateX(-2px); }
  80% { opacity: 1; transform: none; }
  90% { opacity: 0.85; transform: translateX(-3px); }
  100% { opacity: 1; transform: none; }
}
/* change the two “ghost” layers behind the text to icy blues */
.crystal-glitch .glitch-title::before {
  color: #7fe9ff;   /* bright icy blue */
}

.crystal-glitch .glitch-title::after {
  color: #cfffff;   /* soft white-blue */
}


/* COLUMNS */
.columns {
  display: flex;
  gap: 20px;
}

/* LEFT NAV */
.left-column {
  width: 30%;
}
/* MIDDLE COLUMN */
.middle-column {
  width: 30%; /* smaller like your inspo */
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* RIGHT COLUMN (INFO BOX) */
.right-column {
  width: 35%; /* balances with new middle column */
}

/* BACKGROUND (GIF) */
body {
  margin: 0;
  position: relative; 
  z-index: 0;       
  background: url("https://i.ibb.co/ZzV6HJ6N/aesthetic-purple.gif") no-repeat center center fixed;
  background-size: cover;
  font-family: 'Verdana', sans-serif;
  color: #f0e6ff;

  /* cursor moved here so it doesn't override background */
  cursor: url("https://files.catbox.moe/2gexaz.png"), auto;
}
/* ICY BACKGROUND DURING CRYSTAL MODE */
body.crystal-glitch {
  background: url("https://files.catbox.moe/dcnk9k.gif") no-repeat center center fixed;
  background-size: cover;
}

/* REGULAR MODE TEXT HIGHLIGHT */
::selection {
  background: #C59BFF; /* soft purple highlight */
  color: #ffffff;      /* white text */
}

/* MAIN BOX */
.container {
  background: rgba(20, 0, 35, 0.65);
  border: 2px solid #A600FF;
  padding: 20px;
  width: 80%;
  margin: 90px auto 50px auto; /* lowered from 120px */
  border-radius: 20px;
  box-shadow: 0 0 20px #a600ff, 0 0 40px #3d0066;
  backdrop-filter: blur(4px);
}


/* BANNER */
.banner {
  background: linear-gradient(135deg, #2F2136, #1E0929);
  padding: 25px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 0 15px #A600FF;
}

/* GLITCH TITLE */
.glitch-title {
  font-size: 45px;
  letter-spacing: 6px;
  color: #d8b7ff;
  position: relative;
  text-transform: uppercase;
  text-shadow: 0 0 10px #A600FF;
  animation: glitch-left 1.4s infinite steps(2);
}


.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
}

.glitch-title::before {
  color: #ff2cff;
  transform: translate(2px, -2px);
}

.glitch-title::after {
  color: #2cffea;
  transform: translate(-2px, 2px);
}
/* GLITCH ANIMATION — LEFT ONLY */
@keyframes glitch-left {
  0% { opacity: 1; transform: none; }
  10% { opacity: 0.85; transform: translateX(-2px); }
  20% { opacity: 1; transform: none; }
  30% { opacity: 0.9; transform: translateX(-3px); }
  40% { opacity: 1; transform: none; }
  50% { opacity: 0.8; transform: translateX(-1px); }
  60% { opacity: 1; transform: none; }
  70% { opacity: 0.9; transform: translateX(-2px); }
  80% { opacity: 1; transform: none; }
  90% { opacity: 0.85; transform: translateX(-3px); }
  100% { opacity: 1; transform: none; }
}
/* change the two “ghost” layers behind the text to icy blues */
.crystal-glitch .glitch-title::before {
  color: #7fe9ff;   /* bright icy blue */
}

.crystal-glitch .glitch-title::after {
  color: #cfffff;   /* soft white-blue */
}


/* COLUMNS */
.columns {
  display: flex;
  gap: 20px;
}

/* LEFT NAV */
.left-column {
  width: 28%;
}
/* MIDDLE COLUMN */
.middle-column {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-left: -20px; /* <<< THIS MOVES THE BOXES LEFT */
}

/* RIGHT COLUMN (INFO BOX) */
.right-column {
  width: 28%; /* balances with new middle column */
}

/* SHARED BOX STYLE (Welcome, Updates, Info) */
.welcome-box,
.updates-box,
.info-box {
  background: rgba(255, 255, 255, 0.15);
  padding: 15px;
  border-radius: 15px;
  border: 1px solid #A600FF;
  box-shadow: 0 0 10px #A600FF;
  overflow-y: auto;
  width: 100%;   /* <<< THIS MAKES THEM WIDE */
}

.updates-box {
  height: 140px;
}

.welcome-box {
  height: 70px;
}


/* HEADERS INSIDE BOXES */
.welcome-box h2,
.updates-box h2,
.info-box h2 {
  margin-top: 0;
  color: #d8b7ff;
  text-shadow: 0 0 5px #A600FF;
}

.nav-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #d8b7ff;
  text-shadow: 0 0 5px #A600FF;
}

.nav-list li {
  list-style: none;
  margin: 8px 0;
}

.nav-list a {
  color: #f0e6ff;
  text-decoration: none;
  font-size: 15px;
  padding: 6px 10px;
  display: inline-block;
  border-left: 3px solid #A600FF;
  transition: 0.2s;
}

.nav-list a:hover {
  color: #ffffff;
  background: rgba(166, 0, 255, 0.25);
  transform: translateX(5px);
}

/* RIGHT CONTENT */
.right-column {
  width: 30%;
}

/* DIVIDER */
.purple-divider {
  margin-top: 20px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #A600FF, transparent);
}

/* cursor */

body {
  cursor: url("https://files.catbox.moe/2gexaz.png"), auto;
}
a:hover,
button:hover {
  cursor: url("https://files.catbox.moe/2gexaz.png"), pointer;
}

/* LUMINA CRYSTAL GLITCH IN — ICY MODE */

.crystal-glitch .container {
  background: #AED4E7; /* icy blue */
  border-color: #ffffff; /* white border */
  box-shadow: 0 0 20px #ffffff, 0 0 40px #dffaff; /* white glow */
}

.crystal-glitch .banner {
  background: #ffffff; /* white banner */
  box-shadow: 0 0 15px #ffffff; /* white glow */
}
/* ICY MODE CURSOR */
body.crystal-glitch {
  cursor: url("https://files.catbox.moe/n2td8i.png"), auto;
}

body.crystal-glitch a:hover,
body.crystal-glitch button:hover {
  cursor: url("https://files.catbox.moe/n2td8i.png"), pointer;
}

/* ICY MODE TEXT HIGHLIGHT */
.crystal-glitch ::selection {
  background: #AED4E7; /* icy blue highlight */
  color: #ffffff;      /* white text */
}

/* ICY MODE — SUBTITLE TEXT COLOR */
.crystal-glitch .subtitle {
  color: #AED4E7;
}

.crystal-glitch .glitch-title {
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff;
}

.crystal-glitch .nav-title {
  color: #ffffff;
  text-shadow: 0 0 5px #ffffff;
}

.crystal-glitch .nav-list a {
  border-left-color: #ffffff;
  color: #ffffff;
}

.crystal-glitch .scrollbox {
  background: rgba(255, 255, 255, 0.6); /* frosty white */
  border-color: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

.crystal-glitch .purple-divider {
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
}

/* Hide the original text */
.crystal-glitch .nav-list a span,
.crystal-glitch .nav-list a {
  color: transparent !important;
}

/* ICY MODE — INFO TEXT COLOR ONLY */
.crystal-glitch .scrollbox,
.crystal-glitch .scrollbox p,
.crystal-glitch .scrollbox h2 {
  color: #AED4E7;
}
/* ICY MODE — INFO TEXT COLOR ONLY */
.crystal-glitch .scrollbox,
.crystal-glitch .scrollbox p,
.crystal-glitch .scrollbox h2 {
  color: #AED4E7;
}

/* ICY MODE — LUMINA HACKS THE NAVIGATION */
.crystal-glitch .nav-list a {
  color: transparent !important; /* hide original text */
  position: relative;
  display: block;
  height: 22px;          /* keeps spacing even */
  line-height: 22px;     /* centers the text */
  overflow: hidden;      /* prevents overlap */
}

.crystal-glitch .nav-list a::after {
  content: "ABOUT LUMINA";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 10px; /* <<< FIXES THE SPACING */
  color: #ffffff !important;
  text-shadow: 0 0 5px #ffffff;
}


/* Hide the original text */
.crystal-glitch .nav-list a span,
.crystal-glitch .nav-list a {
  color: transparent !important;
}


/* CRYSTAL GLITCH OUT — smoother flicker back to purple */
.crystal-glitch-out {
  animation: crystalFadeOut 0.8s steps(4, end);
}

@keyframes crystalFadeOut {
  0%   { opacity: 1; }
  25%  { opacity: 0.4; }
  50%  { opacity: 1; }
  75%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* CRYSTAL GLITCH IN — flicker into icy mode */
.crystal-glitch {
  animation: crystalFlash 0.8s steps(2, end);
}

@keyframes crystalFlash {
  0% { opacity: 1; }
  20% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.4; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}
/* CRYSTAL GLITCH OUT — flicker back to purple */
.crystal-glitch-out {
  animation: crystalFadeOut 0.6s steps(2, end);
}


/* HEADERS INSIDE BOXES */
.welcome-box h2,
.updates-box h2,
.info-box h2 {
  margin-top: 0;
  color: #d8b7ff;
  text-shadow: 0 0 5px #A600FF;
}

.nav-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #d8b7ff;
  text-shadow: 0 0 5px #A600FF;
}

.nav-list li {
  list-style: none;
  margin: 8px 0;
}

.nav-list a {
  color: #f0e6ff;
  text-decoration: none;
  font-size: 15px;
  padding: 6px 10px;
  display: inline-block;
  border-left: 3px solid #A600FF;
  transition: 0.2s;
}

.nav-list a:hover {
  color: #ffffff;
  background: rgba(166, 0, 255, 0.25);
  transform: translateX(5px);
}

/* RIGHT CONTENT */
.right-column {
  width: 30%;
}

/* DIVIDER */
.purple-divider {
  margin-top: 20px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #A600FF, transparent);
}

/* cursor */

body {
  cursor: url("https://files.catbox.moe/2gexaz.png"), auto;
}
a:hover,
button:hover {
  cursor: url("https://files.catbox.moe/2gexaz.png"), pointer;
}

/* LUMINA CRYSTAL GLITCH IN — ICY MODE */

.crystal-glitch .container {
  background: #AED4E7; /* icy blue */
  border-color: #ffffff; /* white border */
  box-shadow: 0 0 20px #ffffff, 0 0 40px #dffaff; /* white glow */
}

.crystal-glitch .banner {
  background: #ffffff; /* white banner */
  box-shadow: 0 0 15px #ffffff; /* white glow */
}
/* ICY MODE CURSOR */
body.crystal-glitch {
  cursor: url("https://files.catbox.moe/n2td8i.png"), auto;
}

body.crystal-glitch a:hover,
body.crystal-glitch button:hover {
  cursor: url("https://files.catbox.moe/n2td8i.png"), pointer;
}

/* ICY MODE TEXT HIGHLIGHT */
.crystal-glitch ::selection {
  background: #AED4E7; /* icy blue highlight */
  color: #ffffff;      /* white text */
}

/* ICY MODE — SUBTITLE TEXT COLOR */
.crystal-glitch .subtitle {
  color: #AED4E7;
}

.crystal-glitch .glitch-title {
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff;
}

.crystal-glitch .nav-title {
  color: #ffffff;
  text-shadow: 0 0 5px #ffffff;
}

.crystal-glitch .nav-list a {
  border-left-color: #ffffff;
  color: #ffffff;
}

.crystal-glitch .scrollbox {
  background: rgba(255, 255, 255, 0.6); /* frosty white */
  border-color: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

.crystal-glitch .purple-divider {
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
}

/* Hide the original text */
.crystal-glitch .nav-list a span,
.crystal-glitch .nav-list a {
  color: transparent !important;
}

/* ICY MODE — INFO TEXT COLOR ONLY */
.crystal-glitch .scrollbox,
.crystal-glitch .scrollbox p,
.crystal-glitch .scrollbox h2 {
  color: #AED4E7;
}
/* ICY MODE — INFO TEXT COLOR ONLY */
.crystal-glitch .scrollbox,
.crystal-glitch .scrollbox p,
.crystal-glitch .scrollbox h2 {
  color: #AED4E7;
}

/* ICY MODE — LUMINA HACKS THE NAVIGATION */
.crystal-glitch .nav-list a {
  color: transparent !important; /* hide original text */
  position: relative;
  display: block;
  height: 22px;          /* keeps spacing even */
  line-height: 22px;     /* centers the text */
  overflow: hidden;      /* prevents overlap */
}

.crystal-glitch .nav-list a::after {
  content: "ABOUT LUMINA";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 10px; /* <<< FIXES THE SPACING */
  color: #ffffff !important;
  text-shadow: 0 0 5px #ffffff;
}


/* Hide the original text */
.crystal-glitch .nav-list a span,
.crystal-glitch .nav-list a {
  color: transparent !important;
}


/* CRYSTAL GLITCH OUT — smoother flicker back to purple */
.crystal-glitch-out {
  animation: crystalFadeOut 0.8s steps(4, end);
}

@keyframes crystalFadeOut {
  0%   { opacity: 1; }
  25%  { opacity: 0.4; }
  50%  { opacity: 1; }
  75%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* CRYSTAL GLITCH IN — flicker into icy mode */
.crystal-glitch {
  animation: crystalFlash 0.8s steps(2, end);
}

@keyframes crystalFlash {
  0% { opacity: 1; }
  20% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.4; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}
/* CRYSTAL GLITCH OUT — flicker back to purple */
.crystal-glitch-out {
  animation: crystalFadeOut 0.6s steps(2, end);
}