/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: lightgrey;
  font-family: Verdana;
}

img {
    max-width: 100%;
    height: auto;
    display: flex;
    margin: 20px auto; /* Centers the image nicely with some breathing room */
}


/* 1. The default look of the link */
a {
    color: green;        /* A soft neon blue */
    text-decoration: none; /* Removes the default underline */
}

/* 2. When a user hovers their mouse over the link */
a:hover {
    color: darkgreen;        /* Turns a lighter blue */
    text-decoration: underline; /* Adds the underline back on hover */
}

/* 3. The color of a link AFTER it has been clicked before */
a:visited {
    color: green;        /* Turns a soft purple so you know you've been there */
}

/* 4. The exact millisecond you actively click down on the link */
a:active {
    color: pink;        /* Flashes red upon clicking */
}

/* Container for multiple images */
.image-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;           /* Allows covers to drop to a new row when needed */
  justify-content: center;   /* Centers all images horizontally on the page */
  gap: 12px;                 /* Spacing between covers */
  margin: 20px 0;
}

.image-gallery img {
  display: inline-block; 
  width: auto;          
  height: auto;          
  margin: 0;             
}