.quarto-title h1 {
  color: rgba(124, 255, 0, 0.95); /* Bright color for active link */
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.project-tile {
  border: 1px solid rgba(124, 255, 0, 0.95);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  color: red;
}

.project-tile:hover {
  transform: translateY(-5px);
}

.project-tile img {
  max-width: 100%; /* Added max-width */
  height: auto; /* Changed height to auto */
  object-fit: cover;
  /* background-color: black; */
}

.project-tile h1 {
  margin: 15px 0 5px;
  font-size: 2em;
  margin-top: auto; /* Push text to bottom */
  color: rgba(124, 255, 0, 0.95); /* Bright color for active link */
}

.project-tile p {
  font-size: 1.1em; /* Increased font size */
  /* color: white; /* Changed color to white */ */
  padding: 0 15px 10px; /* Changed bottom padding to 10px */
  margin-top: 0; /* Remove default margin that might interfere */
  color: rgba(124, 255, 0, 0.95); /* Bright color for active link */
}

.project-tile a {
  text-decoration: none;
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack children vertically */
  height: 100%; /* Ensure it takes full height of tile */
  align-items: center; /* Center items horizontally */
}