/* auction.css */
.tableClass {
    width: 100%;
    border-collapse: collapse; /* Makes the table borders clean */
    margin: 20px 0;
    font-size: 18px;
    text-align: center;
    background-color: #666666; /* Adds a subtle background color */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a slight shadow for depth */
    color: gold;
    text-shadow:
            -1px -1px 0 #000, /* Top left shadow */
            1px -1px 0 #000,  /* Top right shadow */
            -1px 1px 0 #000,  /* Bottom left shadow */
            1px 1px 0 #000;   /* Bottom right shadow */
}

.tableClass th, .tableClass td {
    padding: 12px 15px;
    border: 1px solid #ddd; /* Light border for a clean look */
}

.tableClass th {
    background-color: #333; /* Header background color */
    color: white; /* Header text color */
    text-transform: uppercase; /* Capitalize the header text */
    position: sticky;
    top: 0;
    z-index: 2; /* Ensure it's on top of the table rows */
}

.tableClass tr:nth-child(even) {
    background-color: #888888; /* Light gray background for every other row */
}

.tableClass tr:hover {
    background-color: #e9e9e9; /* Highlight the row when hovered */
    cursor: pointer; /* Optional: Adds a pointer to indicate interaction */
}

@media screen and (max-width: 600px) {
    .tableClass {
        font-size: 8px; /* Reduce the font size on small screens */
    }

    .tableClass th, .tableClass td {
        padding: 8px; /* Reduce padding for smaller screens */
    }
}