:root {
    --bg-color: #0a0a0a;
    --bright-green: #d0f399;
    --accent-green: #72c228;
    --dark-blue: #1a3849;
    --pastel-pink: #ffb7ce;
    --violet-acid: #a100ff;
    --accent-pink: #ff66cc;
    --glow: 0 0 10px var(--bright-green), 0 0 20px var(--accent-green);
}

/* 1. THE BACKGROUND */
body {
    cursor: url('images/weirdcur.png'), auto;
    background-color: var(--bg-color);
    /* Use 'background' for shorthand, and fixed the 'boackground' typo */
    background: url("images/Purplesmoke.png") no-repeat center center;
    background-size: cover; 
    color: var(--bright-green);
    font-family: 'Trebuchet MS', sans-serif;
    margin: 0;
}

a, button {
  cursor: url('images/weirdcur.png'), auto;
  
}

.heart {
    position: fixed;
    pointer-events: none; /* So the glitter doesn't block clicks */
    width: 4px;
    height: 4px;
    background: var(--bright-green);
    box-shadow: 0 0 5px var(--pastel-pink), 0 0 10px var(--violet-acid);
    border-radius: 50%;
    z-index: 999; /* Stay on the very top */
    animation: fadeOut 0.8s linear forwards;
}

@keyframes fadeOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}


.main-wrapper {
    max-width: 750px;
    margin-right:  auto;
    margin-left:  auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-banner {
    position: relative; /* This is the anchor */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 250px;      /* If this is missing, the banner is 0px tall (blank) */
    margin-right: auto;
    margin-left: auto;
    padding-top: 5px;
    background: url('images/starshine.png') no-repeat center;
    background-size: cover;
    border: 4px solid var(--accent-green);
    box-shadow: var(--glow);
    border-radius: 20px;
    overflow: hidden;   /* Keeps the overlay from bleeding out */
    z-index: 1;         /* Sets the base layer */
    margin-bottom: 40px;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 0, 77, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;         /* Sits ON TOP of the image */
}

.hero-title {
    margin: 0;
    font-size: 3.5rem;
    color: #72c228;
    text-shadow: #ffb7ce;
    z-index: 3;         /* Sits ON TOP of the purple tint */
}




/* 3. THE NAVBAR */

.nav-button-oval {
  padding: 10px 30px;
  border-radius: 50px; /* Large value creates the pill/oval shape */
  background: #08ec27; /* A deep violet */
  color: rgb(214, 241, 162);
  text-decoration: solid;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.nav-sticker {
  position:absolute;
  margin:auto;
  width: 100% !important; 
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  
  }

.nav-button-oval:hover {
  transform: scale(1.05);
}

.nav-link {
  text-decoration: none; /* Removes the underline */
  color: inherit;        /* Removes the default blue */
  display: inline-block; /* Allows the button to have width/height */
}



/* Make it responsive on hover */
.nav-button-oval:hover {
  background-color: #f7aeca;
  box-shadow: 0 0 15px #EE82EE; /* A neon-acid glow */
  transform: translateY(-2px);
}

.side-nav {
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    right: 0;
    top: -20%;
    width: 20%;
    gap: 10px;
    transform: translateY(-50%);
    z-index: 100;
}

.nav-gif-container {
    padding: 15px 10px;
    background-size: 150px auto;
    background-position: center;
    margin-right: 30%;
    margin-left: 30%;
    border: 2px solid var(--accent-green);
    box-shadow: var(--glow);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 12px;
}

.sticker-float-cascade {
    justify-content: center;
    padding-top: 20px;
}


/* 4. THE NEON GRID - FORCE CENTER */
.neon-grid {
    display: flex;
    justify-content: center; 
    padding-top: 40px;
    gap: 40px;               /* Increased gap for better "breathing room" */
    width: 90%;              /* Pulls the grid away from the 750px wrapper edges */
    margin: 0 auto 40px auto; 
    top: auto;
    bottom: 20px;        
}

.flex-box {
    flex: 1;
    min-width: 150px;        /* Ensures they don't get too skinny */
    max-width: 200px;        /* Keeps them neatly contained */
    background: rgba(10, 10, 10, 0.9);
    border: 2px solid var(--accent-green);
    box-shadow: var(--glow);
    border-radius: 15px;
    padding: 15px;
    text-align: center;
}

/* 4. THE NEON GRID - FORCE CENTER */

.gif-shelf img { 
    max-width: 100% !important; 
    height: auto !important; 
    object-fit: contain;
    margin: 3px; 
}

.box-img { 
    width: 100% !important; 
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain; /* Enforces that the image stays inside its dimensions */
    border-radius: 10px; 
    display: block;
}

/* 5. Big Stickers */
.sticker-shrine {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.shrine-heart { width: 30px; }
.main-kitsune { max-width: 250px; }

/* 6. Bottom Row */
.bottom-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
}





.bunny-spot {
    text-align: center;
    width: 300px;
}

.bunny-portrait {
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--accent-pink);
    box-shadow: var(--glow);
}

.bunny-caption {
    font-style: italic;
    margin-top: 10px;
    color: var(--accent-pink);
} 

/* The Footer Container */
.site-footer {
  width: 100%;
  padding-bottom: 40px; /* Space from the very bottom of the page */
  margin-top: 50px;     /* Space above the footer */
  text-align: center;
}

/* The Line of Demarcation */
.footer-line {
  height: 1px;
  width: 80%;          /* Adjust width to your liking */
  margin: 0 auto 30px; /* Centers the line and adds space below it */
  background: linear-gradient(to right, transparent, #85538b, transparent); 
  /* A violet gradient creates a sharp but elegant end-point */
}

/* The Stamp Row Layout */
.stamp-row {
  display: flex;
  justify-content: center;
  gap: 15px;           /* Space between stamps */
  flex-wrap: wrap;
}

/* The Stamps */
.glow-stamp {
  border: none;        /* Ensures no borders */
  width: 150px;         /* Standard stamp size */
  height: 81px;
  transition: filter 0.3s ease;
  
  /* The Glow Effect */
  filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.6));
}

/* Optional: Intense glow on hover */
.glow-stamp:hover {
  filter: drop-shadow(0 0 10px rgba(224, 255, 0, 0.8)); /* Acid-neon shift */
}