body {
  font-weight:800;
  font-size: 200px;
  color: red;
  font-family: "arial", Times, serif;
}

h3 {
  font-weight:800;
  font-size: 50px;
  color: red;
  font-family: "arial", Times, serif;
}

h4 {
  font-weight:100;
  font-size: 40px;
  color: orange;
  font-family: "arial", Times, serif;
}

h1 {
  font-size: 3rem;
  color: red;
  font-family: "arial", Times, serif;
  font-style: normal;
  text-align: left;
}

.container {
 justify-content: space-evenly;
 display: flex;
 flex-wrap:wrap;
 justify-content:left;
}

.containerlist {
  display: flex;
  flex-direction: column;   /* Stacks them vertically */
  justify-content: left;
  margin: 0;
  gap: 0;                   /* Tells flex items to have 0 space */
}

/* FIX: Target the links inside the container */
.containerlist a {
  display: inline-flex;     /* Forces the link wrapper to perfectly wrap the image */
  margin: 0;
  padding: 0;
  line-height: 0;           /* Eliminates any hidden text-line spacing underneath */
}

/* Ensure the images themselves don't carry native bottom margins */
.containerlist img {
  display: block;
  margin: 0;
}
body {
  background-image: url('');
  background-color:  white;
  background-position: center;
  /* Always provide a background color in case the image fails to load */
  background-attachment: fixed;
  background-repeat: norepeat;
  background-size: 100%;
}


  /* Container controls the width of your normal image box */
.gallery-container {
  width: 100%;       
  max-width: 500px;  
  margin: 20px 0;    
}

.image-box {
  width: 42rem;
  height: 70vh;     
  overflow: hidden;  
  background-color: #f0f0f0; 
  margin-left:5vw;
}

#galleryBlock {
  width: 100%;
  height: 100%;
  object-fit: fill; 
  display: block;     
}

/* FIX: Removes any empty space gaps entirely */
.gallery-controls {
  margin-top: .5rem; 
   margin-left:5vw; 
  display: block;
}

#changeImgBtn {
  display: block;   /* Eliminates inline vertical text spacing underneath */
  margin: 0;        /* Strips native browser button margins */
  padding: 8px 16px;
  cursor: pointer;
  
  /* Optional Tip: If you want the button box to stretch 
     the full width of the photo border, add: width: 100%; */
}


 body {
            cursor: none; /* Hides the standard mouse arrow */
            height: 100vh;
            margin: 0;
        }
       #basketball-cursor {
            position: fixed;
            pointer-events: none; /* Clicks pass right through to elements below */
            transform: translate(-50%, -50%);
            z-index: 9999;
            transition: filter 0.2s ease, transform 0.1s ease; /* Smooth transition for the glow */
        }
        
        #basketball-cursor.glowing {
            /* Creates a bright orange neon glow around the transparent edges of your PNG */
            filter: drop-shadow(0 0 15px #ff5722) drop-shadow(0 0 5px #ff9800);
            transform: translate(-50%, -50%) scale(1.0); /* Slightly grows the ball when hovering */
        }