:root{
    --body:#1c1c20;
    --logo:#4d4a4fa8;
    --text:#e1b5f3;
    --outline:#988db4;
    --link-text:#a841fc;
    --red-vio:#7014b1;
    --pro-back:#3e3151ba;
}


/* ========================== *\
|*        navbar              *|
\* ========================== */



.navbar {
    background-color:var(--logo);
    padding: 1.2rem;
    /* position: fixed; */
    width: 40%;
    z-index: 1000;
    margin-left: 60%;
    margin-top: 2%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.navbar a{
    text-decoration: none;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--text);
    margin-left: 18px;
    border-radius: 8px;
}

.navbar a:hover{
    background: var(--link-text);
    color: var(--text);
}





@media (max-width:768px) {
    .navbar{
        width: 100%;
        margin-left: 0%;
        border-radius: 12px;
    }
}









/* ====================================== */








.table{
     width:100% ;
     height:100%;
     padding: 32px;
    margin-top: 6%;
    

     th{
        padding: 18px 12px 16px 12px;
     }

     thead{
        background: var(--pro-back);
        color: var(--link-text);
         font-size: 18px;
     }

     tbody{
        background: var(--logo);
        color: var(--text);
         font-size: 16px;
     }

     tbody th a{
        color:#a841fc;
        margin: 6px;
        font-size: 19px;
     }

     tbody th a:hover{
        color: var(--red-vio);
     }

     tbody th:hover{
        background: #2f2b33b9;
        transition: ease-in-out 0.5s;
     }
}







@media (max-width:768px) {
    .table{
        width: 100%;
       padding: 4px;
       margin-top: 22%;
    }
}