/* CSS Zen Garden - Space Odyssey Theme *//* CSS Zen Garden - Space Odyssey Theme */
/* Liquid Glass Design with Space Elements */

/* Import Inter font family from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* === VARIABLES === */
/* Defined CSS custom properties (variables) for reusable colors throughout the stylesheet */
:root {
  --glass-bg: rgba(15, 15, 35, 0.7); /* Semi-transparent dark blue background for glass effect */
  --glass-border: rgba(255, 255, 255, 0.1); /* Subtle white border for glass containers */
  --accent-purple: #a78bfa; /* Light purple accent color */
  --accent-blue: #60a5fa; /* Light blue accent color */
  --accent-pink: #f472b6; /* Pink accent color */
  --text-primary: #e5e7eb; /* Light gray color for main text */
  --text-secondary: #9ca3af; /* Darker gray for secondary text */
}

/* === SPACE BACKGROUND === */
/* Styles the main body element */
body {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Set font with fallbacks */
  background: #0a0a1a; /* Very dark blue base background */
  color: var(--text-primary); /* Set default text color */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  position: relative; /* Enable positioning context for absolute children */
}

/* Created a radial gradient background layer using a pseudo-element */
body::before {
  content: ''; /* for pseudo-element to display */
  position: fixed; /* Keep background fixed during scroll */
  top: 0; /* Position at top edge */
  left: 0; /* Position at left edge */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: radial-gradient(ellipse at top, #1a1a3a 0%, #0a0a1a 50%, #000000 100%); /* Gradient from light to dark */
  z-index: -3; /* Place behind other content */
}

/* === STARDUST ANIMATION === */
/* Animated stars using another pseudo-element */
body::after {
  content: ''; /* for pseudo-element to display */
  position: fixed; /* Keep stars fixed during scroll */
  top: 0; /* Position at top edge */
  left: 0; /* Position at left edge */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  /* Created multiple layers of star patterns using radial gradients */
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent), /* Star at 20% 30% position */
    radial-gradient(2px 2px at 60% 70%, white, transparent), /* Star at 60% 70% position */
    radial-gradient(1px 1px at 50% 50%, white, transparent), /* Smaller star at center */
    radial-gradient(1px 1px at 80% 10%, white, transparent), /* Smaller star at 80% 10% */
    radial-gradient(2px 2px at 90% 60%, white, transparent), /* Star at 90% 60% */
    radial-gradient(1px 1px at 33% 85%, white, transparent), /* Smaller star at 33% 85% */
    radial-gradient(1px 1px at 75% 45%, white, transparent); /* Smaller star at 75% 45% */
  background-repeat: repeat; /* Tile the star pattern */
  /* Sets different sizes for each star layer to create depth */
  background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px, 220px 220px, 280px 280px;
  animation: stardust 120s linear infinite; /* Apply slow vertical scrolling animation */
  opacity: 0.6; /* Make stars semi-transparent */
  z-index: -2; /* Place above gradient but behind content */
}

/* Define the stardust animation that moves stars vertically */
@keyframes stardust{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-600px);
  }
  100%{
    transform: translateY(0);
  }
}

/* === PLANETS === */
/* Base styles for all planet decorative elements */
.extra1, .extra2, .extra3 {
  position: fixed; /* Fix planets in viewport */
  border-radius: 50%; /* Make circular */
  opacity: 0.8; /* Slight transparency */
  pointer-events: none; /* Don't interfere with mouse interactions */
  z-index: -1; /* Place behind main content but above stars */
  background-size: cover; /* Scale image to cover element */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Don't repeat the image */
}

/* Earth planet styling and positioning */
.extra1 {
  width: 300px; /* Set width */
  height: 300px; /* Set height (same as width for circle) */
  background-image: url('/IMG/earth.png'); /* Earth image */
  top: 10%; /* Position 10% from top */
  right: -100px; /* Position partially off right edge */
  animation: orbit1 60s linear infinite, glow1 4s ease-in-out infinite; /* Apply orbit and glow animations */
  filter: drop-shadow(0 0 40px rgba(255, 107, 157, 0.5)); /* Pink glow shadow */
}

/* Moon styling and positioning */
.extra2 {
  width: 200px; /* Smaller than Earth */
  height: 200px; /* Square for circular shape */
  background-image: url('/IMG/moon.png'); /* Moon image */
  bottom: 20%; /* Position 20% from bottom */
  left: -50px; /* Position partially off left edge */
  animation: orbit2 80s linear infinite, glow2 3s ease-in-out infinite; /* Slower orbit, faster glow */
  filter: drop-shadow(0 0 30px rgba(96, 165, 250, 0.5)); /* Blue glow shadow */
}

/* Jupiter styling and positioning */
.extra3 {
  width: 150px; /* Smallest planet */
  height: 150px; /* Square for circular shape */
  background-image: url('/IMG/jupiter.png'); /* Jupiter image */
  top: 60%; /* Position 60% from top */
  right: 10%; /* Position 10% from right edge */
  animation: orbit3 100s linear infinite, glow3 5s ease-in-out infinite; /* Slowest orbit */
  filter: drop-shadow(0 0 25px rgba(167, 139, 250, 0.5)); /* Purple glow shadow */
}

/* Circular orbit animation for Earth. used Claude AI to help troubleshoot*/
@keyframes orbit1 {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); } /* Start position */
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); } /* Complete circle, counter-rotate to keep upright */
}

/* Circular orbit animation for Moon (opposite direction) */
@keyframes orbit2 {
  0% { transform: rotate(0deg) translateX(80px) rotate(0deg); } /* Start position */
  100% { transform: rotate(-360deg) translateX(80px) rotate(360deg); } /* Orbit counter-clockwise */
}

/* Circular orbit animation for Jupiter */
@keyframes orbit3 {
  0% { transform: rotate(0deg) translateX(60px) rotate(0deg); } /* Start position */
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); } /* Complete circle */
}

/* Pulsing glow effect for Earth */
@keyframes glow1 {
  0%, 100% { opacity: 0.3; } /* Start and end at low opacity */
  50% { opacity: 0.5; } /* Peak at medium opacity */
}

/* Pulsing glow effect for Moon (brighter) */
@keyframes glow2 {
  0%, 100% { opacity: 0.3; } /* Start and end at low opacity */
  50% { opacity: 0.6; } /* Peak at higher opacity */
}

/* Pulsing glow effect for Jupiter (dimmer) */
@keyframes glow3 {
  0%, 100% { opacity: 0.3; } /* Start and end at low opacity */
  50% { opacity: 0.4; } /* Peak at lower opacity */
}

/* === SPACESHIPS === */
/* Base styles for spaceship elements */
.extra4, .extra5, .extra6 {
  position: fixed; /* Fix in viewport */
  pointer-events: none; /* Don't interfere with interactions */
  z-index: 0; /* Place above planets but below main content */
  opacity: 0.4; /* Make semi-transparent */
}

/* First spaceship moving left to right */
.extra4 {
  width: 60px; /* Set width */
  height: 20px; /* Set height */
  background: linear-gradient(90deg, transparent, #60a5fa, transparent); /* Blue gradient for ship body */
  top: 25%; /* Position 25% from top */
  left: -100px; /* Start off left edge */
  animation: spaceship1 25s linear infinite; /* Apply movement animation */
  border-radius: 50%; /* Round the edges */
  box-shadow: 0 0 20px #60a5fa, 0 0 40px #60a5fa; /* Blue glow effect */
}

/* Add trail effect to first spaceship */
.extra4::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Position relative to parent */
  width: 100px; /* Trail length */
  height: 2px; /* Trail thickness */
  background: linear-gradient(90deg, #60a5fa, transparent); /* Blue fading trail */
  right: 100%; /* Position to the left of ship */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect centering */
}

/* Second spaceship moving right to left */
.extra5 {
  width: 50px; /* Slightly smaller */
  height: 15px; /* Thinner */
  background: linear-gradient(90deg, transparent, #f472b6, transparent); /* Pink gradient */
  bottom: 35%; /* Position 35% from bottom */
  right: -100px; /* Start off right edge */
  animation: spaceship2 30s linear infinite; /* Slower movement */
  border-radius: 50%; /* Round edges */
  box-shadow: 0 0 15px #f472b6, 0 0 30px #f472b6; /* Pink glow */
}

/* Third spaceship moving left to right */
.extra6 {
  width: 70px; /* Largest spaceship */
  height: 25px; /* Thickest */
  background: linear-gradient(90deg, transparent, #a78bfa, transparent); /* Purple gradient */
  top: 70%; /* Position 70% from top */
  left: -120px; /* Start off left edge */
  animation: spaceship3 20s linear infinite; /* Fastest movement */
  border-radius: 50%; /* Round edges */
  box-shadow: 0 0 25px #a78bfa, 0 0 50px #a78bfa; /* Purple glow */
}

/* Movement animation for first spaceship. Used Claude AI to help troubleshoot*/
@keyframes spaceship1 {
  0% { transform: translateX(0) translateY(0); } /* Start off left */
  100% { transform: translateX(calc(100vw + 200px)) translateY(-100px); } /* Move across and slightly up */
}

/* Movement animation for second spaceship (opposite direction) */
@keyframes spaceship2 {
  0% { transform: translateX(100vw) translateY(0); } /* Start off right */
  100% { transform: translateX(-200px) translateY(100px); } /* Move left and slightly down */
}

/* Movement animation for third spaceship */
@keyframes spaceship3 {
  0% { transform: translateX(0) translateY(0); } /* Start off left */
  100% { transform: translateX(calc(100vw + 220px)) translateY(50px); } /* Move across and slightly down */
}

/* === LIQUID GLASS CONTAINERS === */
/* Main content wrapper */
.page-wrapper {
  max-width: 1200px; /* Limit maximum width */
  margin: 0 auto; /* Center horizontally */
  padding: 40px 20px; /* Add padding around content */
  position: relative; /* Create positioning context */
  z-index: 1; /* Place above background elements */
}

/* Glass morphism effect for main content sections */
.intro, .main.supporting, .sidebar {
  background: var(--glass-bg); /* Semi-transparent background */
  backdrop-filter: blur(20px) saturate(180%); /* Blur and enhance colors behind element */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* Safari prefix for backdrop filter */
  border: 1px solid var(--glass-border); /* Subtle border */
  border-radius: 24px; /* Rounded corners */
  padding: 40px; /* Inner spacing */
  margin-bottom: 30px; /* Space between sections */
  /* Multiple shadows for depth */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3), /* Outer shadow for depth */
    inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Inner highlight for glass effect */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transitions with custom easing */
  animation: fadeIn 0.8s ease-out; /* Fade in on page load */
}

/* Fade in animation for content sections */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); } /* Start invisible and below */
  to { opacity: 1; transform: translateY(0); } /* End visible at normal position */
}

/* Hover effect for glass containers Used Claude AI to help troubleshoot*/
.intro:hover, .main.supporting:hover, .sidebar:hover {
  transform: translateY(-5px); /* Lift up slightly */
  /* Enhanced shadows on hover */
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.4), /* Deeper outer shadow */
    inset 0 1px 0 rgba(255, 255, 255, 0.15), /* Brighter inner highlight */
    0 0 60px rgba(167, 139, 250, 0.2); /* Purple glow around element */
  border-color: rgba(255, 255, 255, 0.2); /* Brighter border */
}

/* === TYPOGRAPHY === */
/* Styles for all heading levels */
h1, h2, h3 {
  font-weight: 700; /* Bold weight */
  letter-spacing: -0.02em; /* Slightly tighter letter spacing */
  margin-bottom: 20px; /* Space below headings */
  /* Animated gradient text effect */
  background: linear-gradient(135deg, #ffffff, var(--accent-purple), var(--accent-blue)); /* Multi-color gradient */
  -webkit-background-clip: text; /* Clip background to text shape (webkit) */
  -webkit-text-fill-color: transparent; /* Make text transparent to show gradient (webkit) */
  background-clip: text; /* Clip background to text shape (standard) */
  animation: gradientShift 6s ease infinite; /* Animate gradient position */
  background-size: 200% 200%; /* Make background larger for animation */
}

/* Animation that shifts gradient colors across text */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; } /* Start and end at left */
  50% { background-position: 100% 50%; } /* Move to right at midpoint */
}

/* Main title styling */
h1 {
  font-size: 4rem; /* Large size */
  margin: 0; /* Remove margin */
  text-transform: uppercase; /* Convert to uppercase */
  letter-spacing: 0.05em; /* Wide letter spacing */
  animation: titleGlow 3s ease-in-out infinite; /* Pulsing glow effect */
}

/* Pulsing glow animation for title */
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.6)); } /* Start/end with medium glow */
  50% { filter: drop-shadow(0 0 40px rgba(167, 139, 250, 0.9)); } /* Peak with bright glow */
}

/* Subtitle styling */
h2 {
  font-size: 1.5rem; /* Medium size */
  font-weight: 400; /* Normal weight */
  margin-top: 10px; /* Small top margin */
  opacity: 0.9; /* Slightly transparent */
}

/* Section heading styling */
h3 {
  font-size: 1.75rem; /* Slightly larger than paragraphs */
  margin-top: 30px; /* Space above */
  position: relative; /* Enable pseudo-element positioning */
  padding-bottom: 15px; /* Space for underline */
}

/* Animated underline for h3 headings */
h3::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Position relative to h3 */
  bottom: 0; /* Place at bottom */
  left: 0; /* Align to left */
  width: 60px; /* Initial width */
  height: 3px; /* Thickness */
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue)); /* Gradient color */
  border-radius: 2px; /* Slightly rounded ends */
  animation: lineExpand 2s ease-in-out infinite; /* Animate width */
}

/* Animation that expands and contracts underline */
@keyframes lineExpand {
  0%, 100% { width: 60px; } /* Start and end at short */
  50% { width: 90px; } /* Expand to longer at midpoint */
}

/* Paragraph styling */
p {
  line-height: 1.8; /* line spacing for readability */
  margin-bottom: 20px; /* Space between paragraphs */
  color: var(--text-primary); /* Use primary text color */
  font-size: 1.05rem; /* Slightly larger than default */
  font-weight: 300; /* Light weight */
  opacity: 0.95; /* Very slight transparency */
}

/* === LINKS === */
/* Base link styling */
a {
  color: var(--accent-blue); /* Blue link color */
  text-decoration: none; /* Remove underline */
  position: relative; /* Enable pseudo-element positioning */
  transition: all 0.3s ease; /* Smooth transitions */
  font-weight: 500; /* Medium weight */
}

/* Animated underline for links */
a::after {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Position relative to link */
  bottom: -2px; /* Place just below text */
  left: 0; /* Start from left */
  width: 0; /* Start with no width */
  height: 2px; /* Underline thickness */
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue)); /* Gradient underline */
  transition: width 0.3s ease; /* Animate width change */
}

/* Link hover state */
a:hover {
  color: var(--accent-purple); /* Change to purple */
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.6); /* Add glow effect */
}

/* Expand underline on hover */
a:hover::after {
  width: 100%; /* Expand to full width */
}

/* === SECTIONS === */
/* Styling for content sections */
.summary, .preamble, .explanation, .participation, .benefits, .requirements {
  margin-bottom: 40px; /* Space between sections */
  padding: 30px; /* Inner spacing */
  background: rgba(255, 255, 255, 0.02); /* Very subtle white tint */
  border-radius: 16px; /* Rounded corners */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
  transition: all 0.4s ease; /* Smooth transitions */
  position: relative; /* Enable pseudo-element positioning */
  overflow: hidden; /* Hide overflowing animation elements */
}

/* Animated ripple effect background Used Claude AI to help troubleshoot */
.summary::before, .preamble::before, .explanation::before, 
.participation::before, .benefits::before, .requirements::before {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Position absolutely within section */
  top: -50%; /* Start above element */
  left: -50%; /* Start to left of element */
  width: 200%; /* Larger than container */
  height: 200%; /* Larger than container */
  background: radial-gradient(circle, rgba(167, 139, 250, 0.1) 0%, transparent 70%); /* Purple radial gradient */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.6s ease; /* Fade in/out transition */
}

/* Show and animate ripple on hover */
.summary:hover::before, .preamble:hover::before, .explanation:hover::before,
.participation:hover::before, .benefits:hover::before, .requirements:hover::before {
  opacity: 1; /* Make visible */
  animation: ripple 2s linear infinite; /* Apply ripple animation */
}

/* Ripple animation */
@keyframes ripple {
  0% { transform: scale(0.8) rotate(0deg); } /* Start small */
  100% { transform: scale(1.2) rotate(360deg); } /* Grow and rotate */
}

/* Section hover effects */
.summary:hover, .preamble:hover, .explanation:hover,
.participation:hover, .benefits:hover, .requirements:hover {
  background: rgba(255, 255, 255, 0.05); /* Brighten background */
  border-color: rgba(167, 139, 250, 0.3); /* Purple border */
  transform: translateX(10px); /* Shift right */
}

/* === SIDEBAR === */
/* Special styling for sidebar */
.sidebar {
  background: linear-gradient(135deg, rgba(20, 20, 45, 0.8), rgba(15, 15, 35, 0.8)); /* Darker gradient background */
}

/* Remove default list styling */
.design-selection ul, .design-archives ul, .zen-resources ul {
  list-style: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

/* Style list items in sidebar */
.design-selection li, .design-archives li, .zen-resources li {
  margin-bottom: 20px; /* Space between items */
  padding: 15px; /* Inner spacing */
  background: rgba(255, 255, 255, 0.03); /* Subtle background */
  border-radius: 12px; /* Rounded corners */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition with easing */
  position: relative; /* Enable pseudo-element positioning */
  overflow: hidden; /* Hide sweep effect overflow */
}

/* Sweep effect for design selection items */
.design-selection li::before {
  content: ''; /* Required for pseudo-element */
  position: absolute; /* Position absolutely within item */
  top: 0; /* Align to top */
  left: -100%; /* Start off left side */
  width: 100%; /* Full width of item */
  height: 100%; /* Full height of item */
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.2), transparent); /* Light sweep gradient */
  transition: left 0.6s ease; /* Animate horizontal position */
}

/* Move sweep effect across on hover */
.design-selection li:hover::before {
  left: 100%; /* Move to right side */
}

/* Hover effects for all list items */
.design-selection li:hover, .design-archives li:hover, .zen-resources li:hover {
  background: rgba(255, 255, 255, 0.08); /* Brighten background */
  border-color: var(--accent-purple); /* Purple border */
  transform: translateX(10px) scale(1.02); /* Shift right and grow slightly */
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.3); /* Purple shadow */
}

/* Style for design name in list */
.design-name {
  display: block; /* Take full width */
  font-weight: 600; /* Semi-bold */
  font-size: 1.1rem; /* Slightly larger */
  margin-bottom: 5px; /* Space below */
}

/* Style for designer name */
.designer-name {
  font-size: 0.9rem; /* Smaller text */
  opacity: 0.7; /* More transparent */
}

/* === FOOTER === */
/* Footer container styling */
footer {
  text-align: center; /* Center content */
  padding: 40px 0; /* Vertical padding */
  margin-top: 40px; /* Space above */
}

/* Footer link styling */
footer a {
  display: inline-block; /* Allow padding and margin */
  margin: 0 15px; /* Horizontal spacing between links */
  padding: 12px 24px; /* Inner spacing */
  background: rgba(255, 255, 255, 0.05); /* Subtle background */
  border: 1px solid var(--glass-border); /* Glass border */
  border-radius: 50px; /* Pill shape */
  transition: all 0.3s ease; /* Smooth transitions */
  backdrop-filter: blur(10px); /* Blur background behind */
}

/* Footer link hover effects */
footer a:hover {
  background: rgba(167, 139, 250, 0.2); /* Purple tinted background */
  border-color: var(--accent-purple); /* Purple border */
  transform: translateY(-3px) scale(1.05); /* Lift and grow */
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.4); /* Purple shadow */
}

/* === ABBR === */
/* Abbreviation styling */
abbr {
  text-decoration: none; /* Remove default underline */
  border-bottom: 2px dotted var(--accent-purple); /* Purple dotted underline */
  cursor: help; /* Show help cursor */
  transition: all 0.3s ease; /* Smooth transitions */
}

/* Abbreviation hover state */
abbr:hover {
  border-bottom-style: solid; /* Change to solid underline */
  color: var(--accent-purple); /* Purple text */
}

/* === RESPONSIVE === */
/* Styles for tablet and mobile devices */
@media (max-width: 768px) {
  h1 { font-size: 2.5rem; } /* Smaller main title */
  h2 { font-size: 1.2rem; } /* Smaller subtitle */
  h3 { font-size: 1.4rem; } /* Smaller section headings */
  
  /* Reduce padding and border radius on smaller screens */
  .intro, .main.supporting, .sidebar {
    padding: 25px; /* Less padding */
    border-radius: 16px; /* Smaller border radius */
  }
  
  /* Reduce padding in content sections */
  .summary, .preamble, .explanation, .participation, .benefits, .requirements {
    padding: 20px; /* Less padding */
  }
  
  /* Scale down planet sizes */
  .extra1 { width: 200px; height: 200px; } /* Smaller Earth */
  .extra2 { width: 150px; height: 150px; } /* Smaller Moon */
  .extra3 { width: 100px; height: 100px; } /* Smaller Jupiter */
}

/* === SMOOTH SCROLLING === */
/* Enable smooth scrolling for anchor links */
html {
  scroll-behavior: smooth; /* Smooth scroll animation */
}

/* === SELECTION STYLING === */
/* Style selected text */
::selection {
  background: rgba(167, 139, 250, 0.4); /* Purple semi-transparent background */
  color: white; /* White text */
}

/* Webkit scrollbar track (background) */
::-webkit-scrollbar {
  width: 10px; /* Scrollbar width */
}

/* Scrollbar track styling */
::-webkit-scrollbar-track {
  background: rgba(15, 15, 35, 0.5); /* Dark semi-transparent background */
}

/* Scrollbar thumb (draggable part) styling */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-purple), var(--accent-blue)); /* Purple to blue gradient */
  border-radius: 5px; /* Rounded edges */
}

/* Scrollbar thumb hover state */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-blue), var(--accent-pink)); /* Blue to pink gradient */
}