body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: #2c3e50; /* Dark blue-gray text color */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Adjusted to flex-start for better top alignment */
    font-size: 16px; /* Increased font size for body text */
    position: relative;
}

header {
    width: 100%;
    padding: 10px 0;
}

.header-content {
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
}

header img {
    max-width: 11vw;
    height: auto;
    margin-right: 20px; /* Add space between image and text */
    flex-shrink: 0; /* Prevent the image from shrinking */
}

header h1 {
    font-size: 2vw; /* Adjust font size based on viewport width */
    font-weight: 700;
    color: #093646;
    margin: 0; /* Remove default margin */
    padding-left: 20px; /* Add padding to the left for more space */
}

.board {
    display: flex;
    flex-direction: column; /* Stacks columns vertically */
    gap: 10px;
    width: 90%;
    background-color: #ffffff; /* White background for the board */
    padding: 20px; /* Added padding for better spacing */
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow for more pop */
    border: 1px solid #d1d1d1; /* Subtle border to distinguish from background */
    overflow: hidden; /* Changed to 'hidden' */
    margin-bottom: 10px; /* Increase this value to add more space at the bottom */
    padding-bottom: 40px; /* Added padding to the bottom */
    max-height: 80vh; /* Limit the maximum height */
}

.column {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

h2 {
    color: #093646; /* Dark blue-gray for headers */
    font-size: 3vw; /* Adjust font size based on viewport width */
    font-weight: lighter; /* Use lighter instead of thin */
    margin-bottom: 10px;
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed; /* Ensure the table adjusts its layout */
}

th,
td {
    border: 1px solid #bdc3c7; /* Light gray borders */
    padding: 0.5vw; /* Adjust padding for better spacing */
    font-size: 1vw; /* Adjust font size based on viewport width */
    font-weight: bolder; /* Bolder font weight */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none; /* Removed max-width to allow variable width */
}

th {
    background-color: #093646; /* Dark blue-gray background for headers */
    color: #ecf0f1; /* Light gray text color */
    border: none; /* Remove border line for table headers */
}

th:first-child {
    border-top-left-radius: 0px; /* Rounded top-left corner */
}

th:last-child {
    border-top-right-radius: 0px; /* Rounded top-right corner */
}

tr:nth-child(even) {
    background-color: #ecf0f1; /* Light gray background for even rows */
}

th:nth-child(6),
td:nth-child(6) {
    white-space: normal;
}

.footer {
    position: absolute;
    bottom: 1vw; /* Adjusted for scaling */
    left: 1vw; /* Adjusted for scaling */
    font-size: 1.5vw; /* Adjust font size based on viewport width */
}

.footer img {
    width: 10vh; /* Adjust as needed */
    height: auto;
    vertical-align: middle; /* Align image with text */
}

@media (max-width: 748px) {
    /* Adjustments for phone-sized screens */
    header img {
        max-width: 25vw;
        margin-right: 10px;
    }

    header h1 {
        font-size: 4vw; /* Adjust font size based on viewport width */
        padding-left: 10px; /* Adjust padding for smaller screens */
    }

    h2 {
        font-size: 4vw; /* Adjust font size based on viewport width */
    }

    th,
    td {
        padding-left: 2px;
        font-size: 2vw; /* Adjust font size based on viewport width */
        font-weight: 600; /* Regular font weight */
    }

    th:nth-child(6),
    td:nth-child(6) {
        display: table-cell;
    }
}

@media (min-width: 750px) and (max-width: 1000px) {
    /* Adjustments for tablet-sized screens */
    header img {
        max-width: 20vw;
        margin-right: 10px;
    }

    header h1 {
        font-size: 4vw; /* Adjust font size based on viewport width */
        padding-left: 10px; /* Adjust padding for smaller screens */
    }

    h2 {
        font-size: 4vw; /* Adjust font size based on viewport width */
    }

    th,
    td {
        padding-left: 2px;
        font-size: 2vw; /* Adjust font size based on viewport width */
        font-weight: 400; /* Regular font weight */
    }

    th:nth-child(6),
    td:nth-child(6) {
        display: table-cell;
    }
}

@media (min-width: 1001px) {
    .board {
        max-height: 80vh; /* Limit the maximum height */
        overflow: hidden; /* Remove vertical scroll */
    }

    th,
    td {
        padding: 0.5vw; /* Increase padding for better spacing */
        font-size: 0.9vw; /* Adjust font size based on viewport width */
    }

    tr {
        height: auto; /* Let the row height adjust automatically */
    }

    table {
        table-layout: auto; /* Allow table to adjust its layout */
    }
	.footer {
    position: absolute;
    bottom: 1vw; /* Adjusted for scaling */
    left: 5vw; /* Adjusted for scaling */
    font-size: .5vw; /* Adjust font size based on viewport width */
}

	.footer img {
    width: 10vh; /* Adjust as needed */
    height: auto;
    vertical-align: middle; /* Align image with text */
}
}