/* 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." */

img{ /* General Images Format*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%; /* Image will be no wider than the screen/container */
  height: auto;    /* Maintains the image's aspect ratio */
}

.grid-container {/*Main Image Grid Layout*/
  display: grid;
  grid-template-columns: repeat(3,1fr); /* Creates 3 columns, each taking up 1 fraction of the available space */
  gap: 5px; /* Adds space between the grid items */
  width: 100%; /* Optional: Adjusts the overall width of the grid */
  margin: auto; /* Optional: Centers the grid on the page */
  background-color: #000000; /* Black background color (hex code) */
    border: 2px solid #fc0384; /* pink border */
    padding: 2px; /* Space between the image and the border */
}

.grid-container img { /*Layout of images on main grid*/
  max-width: 100%; /* Ensures images fill their grid cell */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes default image bottom margin issues */
  /* Optional: You can add object-fit: cover; to make all images the same size */
}

abbr::after { content: '(not accesible via mobile)'; }

a {/*link Format*/
  color: #47ff00;
}

h1 { 
  color: black; 
  text-align: center; 
  text-shadow: 2px 2px 2px #ff00b1;
}

a1 {
  color:black;
  text-decoration: underline;
}

h2 {
  color: #c5ff00;
  font-family: helvetica, Verdana, Arial;
  text-align: center;
  border-style: dashed;
    border-width: 3px;
    border-left-width: 3px;
    border-right-width: 3px;
    border-color: #c5ff00;
    padding: 2px;
    margin: auto;
    width: 50%;
}

h3 {
  color: black;
  text-align: center;
  text-shadow: 2px 2px 2px red
}

p {/*general paragraph format*/
  color: #ff00b1;
  text-align: center;
  text-shadow: 1px 1px 2px white;
}

.black-box {/*Black boxed Paragraphs*/
    background-color: #000000; /* Black background color (hex code) */
    border: 2px solid #ffffff; /* White border: width, style, and color */
    padding: 15px; /* Space between the text and the border */
    margin: auto; /* Space outside the box */
    width: 50%; /* Optional: Adjusts the width of the box */
}

.flex-container {
    display: flex;
    list-style: none; /* Optional: Removes default bullets */
    padding: 0; /* Optional: Removes default padding */
    gap: 20px; /* Optional: Adds space between items */
    text-align: center;
    color: black;
    text-shadow: 2px 2px 2px #ff00b1;
    font-size: 2em;
}

/* Optional styling for the list items */
.flex-container li {
    background-color: black;
    border: 1px solid #fc0384;
    text-align: center;
}

.container ul {
  display: flex;         /* Enables flexbox layout for the list */
  justify-content: center; /* Centers the list items horizontally */
  list-style: none;      /* Removes default bullet points */
  padding: 0; /* Removes default padding */
  margin: 0;             /* Removes default margin */
}

.container li {
  margin: 0 10px;        /* Adds some space between the items */
}

.centered-list {
  /* 1. Stack the items vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  color: black;
  text-shadow: 2px 2px 2px #ff00b1;
  font-size: 1.5em;
  

  /* Optional: Give the list a width to illustrate centering on the page */
  width: 100%;
}

.centered-list li {
  /* Optional: Add some spacing between items */
  margin-bottom: 10px;

  /* Optional: Center the text *inside* each list item (if items have varying widths) */
  text-align: center;
  list-style: none;
}


body {
  background-image: url(background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
  background-color: black;
  color: white;
  font-family: Verdana;
}