style.css

:root {
    --secondary-background: #262730;
    --active-element: #FF4B4B;
    --text: #FAFAFA;
}

a {
    color: var(--text) !important;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #CCCCCC;
}
a:hover {
    text-decoration: underline;
}

table {
    width: 100%;
    border: 1px var(--active-element) solid !important;
    border-collapse: collapse;
    margin-bottom: 10px !important;
}

tbody {
    border: 0 !important;
}
thead th {
    background-color: var(--secondary-background);
    text-align: center;
    vertical-align: middle;
    border: 0 !important;
}
tfoot {
    border: 0 !important;
}
tr {
    border: 0 !important;
    height: 45px;
}
th, td {
    border: 0 !important;
}

tr:nth-child(even) {
    background-color: var(--secondary-background);
    border: 0 !important;
}

/* CSS for smaller screens */
@media (max-width: 600px) {
    table {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }
    tr {
        margin: 0 !important;
        padding: 0 !important;
    }
    td {
        margin: 5px !important;
        padding: 5px !important;
    }
}

.desaturated {
    filter: grayscale(100%); /* Full desaturation */
}

.transparent {
    opacity: 0.5; /* Adjust transparency as needed */
}