*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #CDCDCD;
    color:black;
}
nav{
    background-color: black;
    color: white;
    padding: 21px 24px;
    font-size: 24px;
    font-weight: 400;
    font-family: inter;
}
.page{
    padding: 28px 28px 0px 28px;
}
.search{
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}
.sort{
    display: flex;         
    gap: 30px;                  
    width: 100%;          
    box-sizing: border-box;
    margin-bottom: 28px;
}
button{
    flex:1;
    padding: 18px;
    color: white;
    background-color: black;
    font-size: 24px;
    font-weight: 400;
    font-family: inter;
    border:none;
}
input[type="search"]{
    padding-left: 25px;
    padding-top: 18px;
    padding-bottom: 18px;
    background-color: #D9D9D9;
    width: 80%;
    font-size: 24px;
    font-weight: 400;
    font-family: inter;
}

input:focus, 
button:focus {
    outline: none;
}

table{
    width: 100%;
    border-collapse: collapse;
    background-color: #D9D9D9;
    color: black;
    table-layout: fixed;
    margin-bottom: 28px;
}

th:nth-child(1), td:nth-child(1) { width: 4%; }  /* ID */
th:nth-child(2), td:nth-child(2) { width: 20%; } /* Name */
th:nth-child(3), td:nth-child(3) { width: 12%; } /* Gender */
th:nth-child(4), td:nth-child(4) { width: 10%; } /* Class */
th:nth-child(5), td:nth-child(5) { width: 10%; } /* Marks */
th:nth-child(6), td:nth-child(6) { width: 10%; } /* Passing */
th:nth-child(7), td:nth-child(7) { width: 20%; } /* Email*/

th,td{
    border:0.5px solid black;
    padding: 18px 25px;
    font-size: 24px;
    font-weight: 400;
    font-family: inter;
    text-align: left;
    vertical-align: middle;
}

img{
    border-radius: 1000px;
    border:1px solid black;
}



.name-cell {
    display: flex;          /* Enables Flexbox */
    align-items: center;    /* Vertically centers image and text */
    gap: 12px;              /* Spacing between image and name */
}

.name-cell img {
    flex-shrink: 0;         /* Prevents the image from squishing */
    display: block;         /* Removes extra whitespace at bottom */
}

.name-td {
    padding-left: 10px;     
}