for legibility font should be between 14px -16px on body and heading 1 to 6 should use https://typescale.com/ to scale font fit with your browser.

you can set and define your primary color on root and other class you can use by function var().

:root{
--primary:#0B3259;
--secondary:#004274;
--activeborder:#FF5737;
}
.main table{
color: var(--primary);
}

using fixed table make you easy when your table have long height.

table,.main table {
 width: 100%;
background:white;
table-layout: fixed;
overflow: auto;
max-height: 500px;
display: block;
}

make style by using hover
example:when you hover on table tr and it will show background.
It notify you the point you stay.

.entry-content tr:hover{
background:#F1F1F1;
cursor:pointer;
}

this website https://getcssscan.com/css-box-shadow-examples provide shadow example and you can preview style too.
generally,we always use shadow on card box and make your website more friendly.

Hide an element when the browser’s width is 700px wide or less:

@media screen and (max-width: 700px) {
  .test {
    display: none;
  }
}

-webkit-line-clamp

when you have several lines on your card description,you should  truncate texts to make your website better then before.

.card-description{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

}