/* The @import statements must come before all other content in your CSS file (except for @charset declarations). 
If you put an @import below regular CSS styles, the browser will ignore it. */
/* @import "simple.min.css"; */
@import "headings.css";
@import "artifacts.css";

body {
    background-color: #A6C8CB;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #6A665C; /*This is the font colour, unless overridden by another sytle*/
    /* max-width: 600px; */
    margin: 40px auto;
    padding: 0 20px;
}

/* to target an ID in CSS, you use the hashtag (#) symbol followed by the exact ID name you wrote in your HTML. */
/* To target a class in your CSS stylesheet, you use a period (.) followed by the class name. */
.content-card {
    background-color: #f4f4f4;
    border: 2px solid #333333;
    padding: 20px;
    border-radius: 8px;
    /* max-width: 400px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Navigation bar **********************************************************************************************************************************************************/

/* Add a vertical line to the right side of every link except the last one using the class feature */
/* Naviagation bar at top of each page */
.navbar a:not(:last-child)::after {
    content: "|";
    margin-left: 12px;  /* Adjusts space before the bar */
    margin-right: 12px; /* Adjusts space after the bar */
    color: black;
}
/* End Naviationn bar ********************************************************************************************************************************************************/
/* Grid of images **************************************************************************************************************************************************************/
/* The best and most modern way to set up a grid of images in HTML is by using CSS Grid. It gives you total control over rows, columns, and spacing with very little code.*/
/* 1. The Grid Container */
.image-grid {
    display: grid;
    /* Creates a responsive grid: columns must be at least 150px, but will expand to fill space equitably.
    minmax() is a built-in function that defines a size range (a minimum and a maximum size)
    The Maximum (1fr): If there is extra space on the screen, the column is allowed to grow and take up 1fr (one fraction) of that available space. If three columns are side-by-side, they will share the extra space equally. */
    /*Fit as many columns as you can, as long as they are at least 150px wide. If there's extra space, distribute it equally (1fr).*/
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* Limits the grid to 2 columns maximum */
    /* grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); */
    /* Adds a 16px gap between all rows and columns */
    gap: 16px; 
    padding: 16px;
}
/* Style the <figure> as the grid item */
.grid-item {
  margin: 0; /* CRITICAL: Removes default browser margins from the figure tag */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the caption underneath the image */
}

/* Style the image inside the figure */
.grid-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Style the <figcaption> wrapper */
.grid-item figcaption {
  margin-top: 12px; /* Adds space between the image and the link */
  text-align: center;
}

/* Style the actual hyperlink */
.grid-link {
  font-family: system-ui, sans-serif;
  color: #0066cc;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.grid-link:hover {
  color: #004499;
  text-decoration: underline;
}
/* end Grid of images ************************************************************************************************************************************************/