.lego-rainbow-bar {
  width: 100%;
  height: 24px;
  background: linear-gradient(
    90deg,
    #e60012 0% 16.6%,   /* LEGO Red */
    #f37021 16.6% 33.3%, /* LEGO Orange */
    #ffd400 33.3% 50%,   /* LEGO Yellow */
    #00aa47 50% 66.6%,   /* LEGO Green */
    #0055a5 66.6% 83.3%, /* LEGO Blue */
    #69207a 83.3% 100%   /* LEGO Purple */
  );
  box-shadow: 
    inset 0 3px 0 rgba(255, 255, 255, 0.4), /* Top shine highlight */
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),       /* Bottom shadow depth */
    0 2px 4px rgba(0, 0, 0, 0.15);           /* Subtle drop shadow */
  border-radius: 4px;
  border: 1px solid rgba(250, 248, 248, 0.1);
}
.lego-brick-bg {
  width: 100%;
  min-height: 100vh;
  
  /* Base LEGO Red Color */
  background-color: #e60012; 
  
  /* Layered gradients to create the 3D grid and circular studs */
  background-image: 
    /* 1. Dark shadow at the bottom-right of each stud */
    radial-gradient(circle at 55% 55%, rgba(0, 0, 0, 0.15) 30%, transparent 30%),
    /* 2. Light highlight at the top-left of each stud */
    radial-gradient(circle at 45% 45%, rgba(255, 255, 255, 0.25) 30%, transparent 30%),
    /* 3. The actual raised stud circle */
    radial-gradient(circle, rgba(0, 0, 0, 0.08) 32%, transparent 32%),
    /* 4. Horizontal brick grid lines */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px, rgba(0, 0, 0, 0.12) 1px, transparent 2px),
    /* 5. Vertical brick grid lines */
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px, rgba(0, 0, 0, 0.12) 1px, transparent 2px);
  
  /* This controls the physical size of each LEGO brick "grid square" */
  background-size: 40px 40px; 
}

.rainbow-lego-bg {
  background-color: #ff3333; /* Fallback color */
  background-image: 
    /* 3D Highlights and Shadows for the studs */
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4) 6%, transparent 12%),
    radial-gradient(circle at 65% 65%, rgba(0, 0, 0, 0.3) 12%, transparent 12%),
    radial-gradient(circle at 50% 50%, currentColor 14%, transparent 15%),
    
    /* Alternating Rainbow Grid Rows */
    linear-gradient(90deg, #ff3333 0% 25%, #ff9933 25% 50%, #33cc33 50% 75%, #3399ff 75% 100%),
    linear-gradient(90deg, #cc33ff 0% 25%, #ff3399 25% 50%, #ffff33 50% 75%, #00ffff 75% 100%);
  
  /* Sizing and alignment of the bricks */
  background-size: 80px 80px, 80px 80px, 80px 80px, 80px 160px, 80px 160px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 80px;
  background-repeat: repeat;
  
  /* Text color inheritance used to shade the center of the studs */
  color: rgba(0, 0, 0, 0.15);
}

/* Reset margins so the bricks fill the entire screen edge-to-edge */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #222; /* Fallback dark color */
}

p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;      /* Improves readability */
    color: rgb(2, 2, 22);        /* Off-black / dark charcoal color */
    margin-bottom: 20px;   /* Generous spacing between paragraphs */
}

/* Container that fills the background */
.lego-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 40px);
    grid-auto-rows: 40px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed; /* Keeps it locked as a background */
    top: 0;
    left: 0;
    z-index: 1; /* Move background to base layer */
    filter:  brightness(180%);
}

/* Individual Brick */
.lego-brick {
    position: relative;
    background-color: var(--brick-color);
    box-shadow: 
        inset 1px 1px 0px rgba(255, 255, 255, 0.3),
        inset -1px -1px 0px rgba(0, 0, 0, 0.3);
}

/* The 3D Stud on top of each brick */
.lego-brick::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--brick-color);
    box-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.25),
        inset 1px 1px 1px rgba(255, 255, 255, 0.4),
        inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}

/* NEW: Forces your content wrapper to explicitly sit OVER the bricks */
.content-layer {
    position: relative;
    z-index: 10; /* Higher than lego-grid's z-index */
    color: rgb(252, 248, 248); 
    font-family: sans-serif;
    padding: 20px;
}