html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* All elements will include padding and border in their width/height */
}

body {
  background-color: #333;
  color: #eee;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}


.main-nav {
  background-color: #2a2a2a;
  padding: 15px 20px;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-button {
  color: #87CEEB;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-button:hover {
  background-color: rgba(135, 206, 235, 0.2);
  color: #fff;
}

.content {
  padding: 20px;
}

.file-list-container {
  max-width: 900px; /* Limit table width for readability */
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.file-list-container h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 2.2em;
  font-weight: 700;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.95em;
  line-height: 1.5;
}

.file-table th,
.file-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.file-table th {
  background-color: #eef2f7;
  color: #555;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-table tbody tr:nth-child(even) {
  background-color: #f6f6f6;
}

.file-table tbody tr:hover {
  background-color: #e0f2f7;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.file-table td a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.file-table td a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.file-icon {
  margin-right: 8px;
  font-size: 1.1em;
  vertical-align: middle;
}

.pdf-color { color: #dc3545;}
.doc-color { color: #007bff;}
.img-color { color: #28a745;}
.zip-color { color: #ffc107;}


.action-icon {
  font-size: 1.2em;
  color: #6c757d;
  transition: color 0.3s ease;
}

.action-icon:hover {
  color: #343a40;
}

@media (max-width: 768px) {
  .file-list-container {
    margin: 20px;
    padding: 15px;
  }
  .file-table {
    font-size: 0.9em;
  }
  .file-table th,
  .file-table td {
    padding: 10px 12px;
  }
}

.games-grid {
  display: grid;
  /* This creates responsive columns: min 200px, max 300px, fitting as many as possible */
  grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  gap: 25px; /* Space between game cards */
  padding: 20px;
  max-width: 900px; /* Max width for the entire grid */
  margin: 40px auto; /* Center the grid on the page */
  justify-content: center; /* Center cards if they don't fill the entire row */
}

.game-card {
  display: flex; /* Use flexbox to stack items vertically */
  flex-direction: column;
  align-items: center; /* Center content horizontally within the card */

  /* NO WHITE BACKGROUND - Removed background-color: #fff; */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  overflow: hidden; /* Ensures any rounded corners from child img are respected */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  padding-bottom: 15px; /* Padding below the title */

  /* Make the card itself responsive, but limit its max width */
  max-width: 300px; /* Maximum width for each individual card (adjust as desired) */
  width: 100%; /* Makes the card expand to fill its grid column */
}

.game-card:hover {
  transform: translateY(-8px); /* Lift effect on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* More pronounced shadow on hover */
}

.game-card a { /* Styling for the link wrapping the image */
  display: block; /* Make the link a block to contain the image */
  width: 100%; /* Link fills the width of the card */
  line-height: 0; /* Helps prevent extra space below the image */
  text-decoration: none; /* No underline for the image link */
}

.game-card img {
  /* Scale the image */
  width: 100%; /* Image fills the width of its parent <a> link */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Ensures no extra space below the image */
  object-fit: cover; /* Image covers the area, cropping if aspect ratios differ */
  border-radius: 10px 10px 0 0; /* Rounds only the top corners to match the card */
}

.game-title {
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
  padding: 10px; /* Padding around the title */
  color: #eee; /* Adjust text color to contrast with your site's dark background */
}

/* Optional: Adjust for smaller screens */
@media (max-width: 600px) {
  .games-grid {
    grid-template-columns: 1fr; /* Stack cards vertically on very small screens */
    padding: 15px;
  }
  .game-card {
    max-width: 90%; /* Allow cards to be a bit smaller on mobile */
    margin: 0 auto; /* Center individual cards on mobile */
  }
}

.wordle-cell.correct { /* Green for correct letter, correct position */
  background-color: #6aaa64; /* A common Wordle green */
  color: white;
  border-color: #6aaa64;
}

.wordle-cell.present { /* Yellow for correct letter, wrong position */
  background-color: #c9b458; /* A common Wordle yellow */
  color: white;
  border-color: #c9b458;
}

.wordle-cell.absent { /* Gray for letter not in the word */
  background-color: #787c7e; /* A common Wordle gray */
  color: white;
  border-color: #787c7e;
}

/* Optional: Animation for flipping the tiles (makes it look nicer) */
.wordle-cell.flipped {
  animation: flip 0.5s ease forwards;
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); background-color: #333; border-color: #333; }
  100% { transform: rotateX(0deg); }
}

.wordle-cell {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}