.tool-container {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 1200px; /* Wider for the table */
  margin: 40px auto;
}

.tool-container h2 {
  color: #007bff;
  margin-bottom: 25px;
  font-size: 2em;
}

.tool-description {
  margin-bottom: 30px;
  color: #666;
  line-height: 1.6;
}

.periodic-table-grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr); /* 18 columns for the table */
  gap: 2px; /* Small gap between elements */
  max-width: 100%;
  margin: 20px auto;
  border: 1px solid #ddd;
  padding: 5px;
  background-color: #f0f0f0;
  overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
}

.element-cell {
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75em; /* Smaller font for cells */
  height: 60px; /* Fixed height for consistent layout */
  box-sizing: border-box;
  user-select: none; /* Prevent text selection */
}

.element-cell:hover {
  background-color: #d0d0d0;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.element-cell.placeholder {
  background-color: transparent;
  border: none;
  cursor: default;
}

.element-cell .atomic-number {
  font-size: 0.6em;
  align-self: flex-start;
  margin-bottom: -5px; /* Adjust spacing */
}

.element-cell .symbol {
  font-size: 1.5em;
  font-weight: bold;
}

.element-cell .name {
  font-size: 0.6em;
  text-align: center;
}

/* Category Colors (Example - you can refine these) */
.alkali-metal {
  background-color: #ff9999;
} /* Light Red */
.alkaline-earth-metal {
  background-color: #ffcc99;
} /* Light Orange */
.transition-metal {
  background-color: #ffff99;
} /* Light Yellow */
.post-transition-metal {
  background-color: #ccffcc;
} /* Light Green */
.metalloid {
  background-color: #99ffcc;
} /* Light Cyan */
.nonmetal {
  background-color: #99ccff;
} /* Light Blue */
.noble-gas {
  background-color: #cc99ff;
} /* Light Purple */
.halogen {
  background-color: #ff99ff;
} /* Light Magenta */
.lanthanide {
  background-color: #cceeff;
} /* Pale Blue */
.actinide {
  background-color: #eeddff;
} /* Pale Purple */
.unknown {
  background-color: #f0f0f0;
} /* Grey for placeholders */

/* Detail Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
  padding-top: 60px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 30px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%; /* Could be more responsive */
  max-width: 600px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  text-align: left;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-content h3 {
  color: #007bff;
  margin-top: 0;
  font-size: 1.8em;
}

.modal-content p {
  margin-bottom: 10px;
  color: #333;
  line-height: 1.5;
}

.modal-content p strong {
  color: #0056b3;
}

.modal-content .symbol-big {
  font-size: 3em;
  font-weight: bold;
  color: #28a745;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .tool-container {
    padding: 25px;
    margin: 20px auto;
  }
  .tool-container h2 {
    font-size: 1.8em;
  }
  .periodic-table-grid {
    grid-template-columns: repeat(
      18,
      minmax(30px, 1fr)
    ); /* Adapt for smaller screens */
    gap: 1px;
    font-size: 0.6em;
  }
  .element-cell {
    height: 45px;
    padding: 2px;
  }
  .element-cell .symbol {
    font-size: 1em;
  }
  .element-cell .atomic-number,
  .element-cell .name {
    font-size: 0.5em;
  }
  .modal-content {
    width: 95%;
    margin: 10% auto;
    padding: 20px;
  }
  .modal-content h3 {
    font-size: 1.5em;
  }
  .modal-content .symbol-big {
    font-size: 2.5em;
  }
}

@media (max-width: 480px) {
  .periodic-table-grid {
    gap: 0; /* No gap for very small screens */
  }
  .element-cell {
    height: 40px;
  }
}