/* Base styles: Neutral, minimalist aesthetic with clean lines */
body {
    font-family: 'Roboto', sans-serif;
    /* Modern typeface */
    background-color: #f7f9fc;
    /* Soft background color */
    color: #333;
    padding: 0;
    margin: 0;

    display: grid;
    place-items: center;
}

table {
    width: 90vw;
    border-collapse: collapse;
    margin: 40px 0;
    overflow: hidden;
    /* To clip the pseudo-element */
}

/* Gradient header (if any) for a touch of color */
thead {
    background-image: linear-gradient(45deg, #6C5CE7, #8E44AD);
}

thead th {
    padding: 15px 20px;
    color: #fff;
    border-bottom: 3px solid #5a449a;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Table body: subtle hover transitions and modern styles */
tbody tr {
    transition: background-color 0.3s, transform 0.2s;
}

tbody tr:hover {
    background-color: rgba(108, 92, 231, 0.1);
    /* Slight purple tint */
    transform: scale(1.01);
    /* Subtle zoom effect */
}

td {
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5eb;
    position: relative;
    cursor: pointer;
}

td::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #6C5CE7;
    /* Purple line */
    transition: width 0.3s;
}

td:hover::before {
    width: 100%;
    /* Full width line animation on hover */
}

/* First column styling: Bold and more pronounced */
td:first-child {
    font-weight: 500;
    color: #4a4a4a;
    background-color: #f7f9fc;
    border-right: 1px solid #e1e5eb;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {

    table,
    tbody,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
        /* Hide headers on small screens */
    }

    td {
        border-bottom: none;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        top: 6px;
        left: 6px;
        width: 45%;
        height: 1px;
        background-color: #e1e5eb;
    }

    td:nth-child(1):before {
        content: "Index";
    }

    td:nth-child(2):before {
        content: "French";
    }

    td:nth-child(3):before {
        content: "German";
    }
}