/* ====================== GENERAL PAGE STYLING ====================== */
body {
  margin: 0;                                      /* Removes default white space around the page */
  background-color: purple;                       /* Fallback color if the image fails */
  background-image: url(https://galacticvagabond.neocities.org/cosmic.png); /* Epic space background */
  background-size: cover;                         /* Makes the image fill the whole screen */
  background-attachment: fixed;                   /* Background stays still when you scroll */
  color: white;                                   /* All text is white */
  font-family: 'Comic Sans MS', cursive, sans-serif; /* Classic 90s geek font */
  font-weight: bold;                              /* Everything looks THICC */
  text-shadow:                                    /* Hot-pink glowing outline on all text */
    1px 1px 0px #D000FF,
    -1px -1px 0px #D000FF,
    1px -1px 0px #D000FF,
    -1px 1px 0px #D000FF;
  min-height: 100vh;                              /* Page is always at least full screen height */
}

/* Center-align all paragraphs */
p { text-align: center; }

/* For any div with class "containner" (note: you spelled it with two n’s) */
div.containner { text-align: center; }

/* Makes bullet lists look nice when centered */
ul.myUL { 
  display: inline-block;   /* Allows the list to be centered */
  text-align: left;        /* But keeps the bullets left-aligned */
}

/* ====================== GALLERY BOX (LEFT SIDE) ====================== */
#gallery-box {
  position: absolute;          /* Sticks it in an exact spot on the page */
  top: 100px;                  /* 100px down from the top */
  left: 10px;                  /* 10px from the left edge */
  width: 800px;                /* Fixed width */
  height: 780px;               /* Fixed height */
  background-color: rgba(80, 0, 255, 0.2); /* Semi-transparent purple */
  border: 2px solid #9a8cff;   /* Light purple border */
  border-radius: 15px;         /* Rounded corners */
  padding: 20px;               /* Space inside the box */
  overflow: auto;              /* Adds scrollbar only if too many cards */
  backdrop-filter: blur(5px);  /* Cool frosted-glass effect */
  -webkit-backdrop-filter: blur(5px); /* Safari support for the blur */

  /* ←←← THIS IS THE GRID MAGIC →→→ */
  display: flex;               /* Turns the box into a flex container */
  flex-wrap: wrap;             /* Images automatically go to next row when full */
  gap: 20px;                   /* Space between every card */
  justify-content: flex-start; /* Cards start from the left (change to "center" if you want) */
  align-content: flex-start;   /* Starts filling from the top */
}

/* Controls the size & look of EVERY image inside the gallery */
#gallery-box img {
  width: 170px;                /* ←←← CHANGE THIS NUMBER to make cards bigger/smaller */
                               /* 180px ≈ fits 4 cards per row */
                               /* Try 230px for 3 per row, 350px for 2 per row */
  height: auto;                /* Keeps the card’s original proportions */
  object-fit: contain;         /* Makes sure the whole card is visible */
  border: 3px solid #D000FF;   /* Neon magenta border */
  border-radius: 8px;          /* Slightly rounded card corners */
  box-shadow: 0 0 15px rgba(208, 0, 255, 0.8); /* Glowing purple aura */
  transition: transform 0.3s ease; /* Smooth zoom animation */
}

/* When you hover over a card */
#gallery-box img:hover {
  transform: scale(1.1);       /* Makes the card 10% bigger */
  z-index: 10;                 /* Brings it above other cards so nothing overlaps weirdly */
}


#gallery-box2 {
  
  position: absolute;          /* Sticks it in an exact spot on the page */
  top: 950px;                  /* 100px down from the top */
  left: 10px;                  /* 10px from the left edge */
  width: 800px;                /* Fixed width */
  height: 780px;               /* Fixed height */
  background-color: rgba(80, 0, 255, 0.2); /* Semi-transparent purple */
  border: 2px solid #9a8cff;   /* Light purple border */
  border-radius: 15px;         /* Rounded corners */
  padding: 20px;               /* Space inside the box */
  overflow: auto;              /* Adds scrollbar only if too many cards */
  backdrop-filter: blur(5px);  /* Cool frosted-glass effect */
  -webkit-backdrop-filter: blur(5px); /* Safari support for the blur */
  
  }
  
  #gallery-box2 img {
  width: 170px;                /* ←←← CHANGE THIS NUMBER to make cards bigger/smaller */
                               /* 180px ≈ fits 4 cards per row */
                               /* Try 230px for 3 per row, 350px for 2 per row */
  height: auto;                /* Keeps the card’s original proportions */
  object-fit: contain;         /* Makes sure the whole card is visible */
  border: 3px solid #D000FF;   /* Neon magenta border */
  border-radius: 8px;          /* Slightly rounded card corners */
  box-shadow: 0 0 15px rgba(208, 0, 255, 0.8); /* Glowing purple aura */
  transition: transform 0.3s ease; /* Smooth zoom animation */
}

/* When you hover over a card */
#gallery-box2 img:hover {
  transform: scale(1.1);       /* Makes the card 10% bigger */
  z-index: 10;                 /* Brings it above other cards so nothing overlaps weirdly */
}

#gallery-box3{
  position: absolute;
  top: 1800px;
  left: 10px;
  width: 800px;
  height: 780px;
  background-color: rgba(80, 0, 255, 0.2);
  border: 2px solid #9a8cff;
  border-radius: 15px;
  padding: 20px;
  overflow: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#gallery-box4{
  position: absolute;
  top: 2650px;
  left: 10px;
  width: 800px;
  height: 780px;
  background-color: rgba(80, 0, 255, 0.2);
  border: 2px solid #9a8cff;
  border-radius: 15px;
  padding: 20px;
  overflow: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#gallery-box5{
  position: absolute;
  top: 3500px;
  left: 10px;
  width: 800px;
  height: 780px;
  background-color: rgba(80, 0, 255, 0.2);
  border: 2px solid #9a8cff;
  border-radius: 15px;
  padding: 20px;
  overflow: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#gallery-box6{
  position: absolute;
  top: 4350px;
  left: 10px;
  width: 800px;
  height: 780px;
  background-color: rgba(80, 0, 255, 0.2);
  border: 2px solid #9a8cff;
  border-radius: 15px;
  padding: 20px;
  overflow: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#gallery-box7{
  position: absolute;
  top: 5200px;
  left: 10px;
  width: 800px;
  height: 780px;
  background-color: rgba(80, 0, 255, 0.2);
  border: 2px solid #9a8cff;
  border-radius: 15px;
  padding: 20px;
  overflow: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* ====================== INFO BOX (RIGHT SIDE) ====================== */
#info-box {
  position: fixed;          /* Same positioning trick as gallery */
  top: 100px;                  /* Same height start as gallery */
  left: 860px;                 /* 860px = 800px gallery + 60px gap */
  width: 700px;                /* Width of the info panel */
  height: 580px;               /* A bit shorter than gallery */
  background-color: rgba(80, 0, 255, 0.2); /* Same frosted purple */
  border: 2px solid #9a8cff;
  border-radius: 15px;
  padding: 15px;
  color: white;
  overflow: auto;              /* Scroll if text is too long */
  backdrop-filter: blur(5px);  /* Frosted glass effect */
  -webkit-backdrop-filter: blur(5px); /* Safari fix */
}