body { /* This styles the entire webpage */
  background: #111; /* Sets a very dark gray background color */
  color: white; /* Makes all text white */
  font-family: Arial, sans-serif; /* Uses Arial font (or any simple sans-serif font) */
  text-align: center; /* Centers all text horizontally */
   /* Sets an image called bg.png as the background */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  background-size: 100% 100%; /* Stretches the background image to cover the whole screen */
  background-attachment: fixed; /* Keeps the background image fixed when scrolling */
} /* End of body styles */

.selection-screen { /* Styles the container that holds the characters */
  display: flex; /* Uses flexbox layout to arrange items */
  justify-content: center; /* Centers the items horizontally */
  gap: 30px; /* Adds 30px space between each item */
  margin-top: 50px; /* Adds 50px space above this section */
} /* End of selection-screen styles */

.character { /* Styles each character image */
  width: 200px; /* Sets the width of each character to 200 pixels */
  cursor: pointer; /* Changes the mouse cursor to a pointer when hovering */
  transition:  /* Adds smooth animation effects */
    transform 0.3s ease, /* Animates size/position changes over 0.3 seconds smoothly */
    box-shadow 0.3s ease, /* Animates shadow changes over 0.3 seconds smoothly */
    filter 0.3s ease; /* Animates filter effects over 0.3 seconds smoothly */
  filter: grayscale(80%); /* Makes the character image mostly black and white */
} /* End of character styles */
 
/* Hover = highlight */ /* This comment explains the hover effect section */
.character:hover { /* Styles the character when the mouse is over it */
  transform: scale(1.1); /* Makes the character slightly bigger (110% size) */
  filter: grayscale(10%); /* Removes black and white effect (full color) */
  box-shadow: 0 0 25px rgba(255, 200, 255, 0.8); /* Adds a glowing light blue shadow around the character */
} /* End of hover styles */

/* Selected character */ /* This comment explains the selected state */
.character.selected { /* Styles the character when it has the "selected" class */
  transform: scale(1.25); /* Makes the character much bigger (125% size) */
  filter: grayscale(0%); /* Shows the character in full color */
  box-shadow: 0 0 700px rgba(255, 215, 0, 1); /* Adds a very large bright gold glow around the character */
} /* End of selected character styles */