*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:sans-serif;
    
}

td img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5rem;

}
body{
   min-height: 100px;
    background: url(Images/gifc.gif) center/cover; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    
}
main.table{
    width: 82vw;
    height: 100vh;
    background-color:#fff5;
    backdrop-filter: blur(7px);
    box-shadow:0 4rem .8rem #0005;
    border-radius: .8rem;
    overflow: hidden;

}
.theader {
    width: 100%;
    height: 10%;
    background-color: #fff4;
    padding: .8rem 1rem;

}
.table body{
    width: 95%;
    max-height: calc(89%  .8rem);
    background-color: #fffb;
    border-radius: .6rem;
    overflow: auto;

    margin: .8rem auto;
}

table{
    width: 100%;
}
table, td, th{
    padding: 1rem;
    border-collapse: collapse;
    border: 1px solid black;

}
thead, th{
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d5d1defe;
}

  tbody,tr,td{
    border: 1px solid black;
    
  }

 tbody tr:hover{
    background-color: #0006;
}

.navbar li{
float: right;
list-style: none;
margin: 13px 16px;
}
.navbar li a{
    padding: 2px 2px;
    text-decoration: none;
    color: black;
    

}
.navbar li a:hover{
    background-color: rgb(227, 10, 10);
    border-radius:7px ;
    padding: 8px;
}
 .abc{
    color: rgb(8, 240, 8);
 }   

 .xyz{
    color: rgb(252, 14, 14);
 } 
  
/*Media Query*/
@media (max-width: 991px) {
    html {
        font-size: 55%;
    }
}