body {
  font-family: "Open Sans", Arial, sans-serif;
  background-color: #fdfbf7; /* Off-white for a warm, nostalgic feel */
  color: #333333;
  margin: 0;
  padding: 20px;
}

header {
  background-color: #0055a4; /* Thomas Blue! */
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 20px;
}

.train-card {
  background-color: white;
  border: 2px solid #cccccc;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.train-card h2 {
  color: #e32636; /* James Red! */
  margin-top: 0;
}

/* The main grid container */
.train-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* Styling the images inside the cards */
.train-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border-bottom: 3px solid #0055a4; /* Thomas Blue accent */
  margin-bottom: 10px;
}

/* Tweaking the card to look like a neat display box */
.train-card {
  background-color: white;
  border: 2px solid #cccccc;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s,
    border-color 0.2s; /* Smooth animation for hover */
}

/* Adds a fun little pop when you mouse over a train */
.train-card:hover {
  transform: translateY(-5px);
  border-color: #e32636; /* James Red accent */
}

/* Removes the default underline and color from our clickable cards */
.train-link {
  text-decoration: none;
  color: inherit; /* Forces the text to use the colors we already set */
  display: block; /* Ensures the whole card area is clickable, not just the text */
}

/* Styling for the back button on individual engine pages */
.back-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.back-link:hover {
  text-decoration: underline;
}

/* Styling for the large display photo on individual engine pages */
.engine-detail-image {
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* Added a subtle shadow to make it pop! */
}
