body {
    font-size:18px;
    color: #876863;
    background-color: black;
    font-family: Veranda, "Times New Roman"
}

.table-wrapper {
  position: relative; /* Makes positioning inside possible */
  width: 1525px; /* Or your background image width */
  height: auto;
}

.table-background {
  display: block;
  width: 100%; /* Stretches to fit wrapper */
  height: auto;
}

.grid-overlay {
  position: absolute; /* Sits on top of the table image */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Example: 3 equal columns */
  grid-template-rows: repeat(2, 1fr);    /* Example: 2 equal rows */
  gap: 0;
  pointer-events: none; /* Grid areas won't block background clicks */
}

.box {
  position: absolute;
  pointer-events: auto;
  background: none; /* No background color, fully transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto; /* Allow clicking inside links */
}

.box:first-child {
  top: 50px;
  left: 625px;
}

.box:nth-child(2) { 
  top: 325px;
  left: -30px;
  width: 618px;
  height: 275px;
}

.box:nth-child(3) { 
  top: 500px;
  left: 300px;
  width: 618px;
  height: 275px;
}

.box:nth-child(4) { 
  top: 150px;
  left: 725px;
  width: 500px;
  height: 575px;
}

.box:nth-child(5) { 
  top: 275px;
  left: 900px;
  width: 575px;
  height: 575px;
}

.box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hoverimage:hover{
  transform: scale(1.1);
}

/* If you want specific placement, you can either: adjust the grid layout by setting precise column/row sizes OR absolutely position individual boxes inside the wrapper instead of relying entirely on the grid. Example for absolute positioning: .box {
  position: absolute;
}

.box {
  position: absolute; allow free placement
  pointer-events: auto; clickable
}

.box:first-child {
  top: 50px;
  left: 120px;
}

.box:nth-child(2) { (2) is the element number)
  top: 150px;
  left: 300px;
  width: 80px;
  height: 80px;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
This method for pixel-perfect placement of items over a static image. 
.box img {
  width: 100%;
  height: 100%;
  object-fit: contain;  keeps aspect ratio 
  pointer-events: auto;  ensure clicks work 
} */

*/