styles.css

:root {
   --primary-color: #184c84;
   --secondary-color: #ffffff;
   --border-color: #e0e0e0;
   --table-header-bg: #f5f5f5;
   --table-hover-bg: #f0f7ff;
   --font-family: "Segoe UI", Arial, sans-serif;
   --button-hover-color: #608cc4;
}

body {
   background-color: var(--secondary-color);
   font-family: var(--font-family);
   margin: 0 auto;
   max-width: 908px;
   text-align: center;
   width: 100%;
}

a {
   text-decoration: none;
}

a:hover {
   color: var(--primary-color);
}

.table-container {
   overflow-x: auto;
}

table {
   border-collapse: collapse;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   width: 100%;
   margin: 0 auto;
}

thead {
   background-color: var(--table-header-bg);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
}

th,
td {
   padding: 10px;
   text-align: center;
   border-bottom: 1px solid var(--border-color);
}

th {
   font-weight: 600;
   color: #333;
   text-transform: uppercase;
   font-size: 0.9em;
   letter-spacing: 0.5px;
}

tbody tr:hover {
   background-color: var(--table-hover-bg);
   transition: background-color 0.3s ease;
}

.table-container table {
   margin: 0 auto;
}

footer {
   font-size: 13px;
}

.button,
.button2 {
   background-color: var(--secondary-color);
   border: 1px solid var(--primary-color);
   border-radius: 5px;
   color: var(--primary-color);
   display: inline-block;
   margin-top: 1px;
   padding: 8px 12px;
   text-decoration: none;
   transition: all 0.3s ease;
   font-weight: 500;
}

.button {
   width: 160px;
}

.button2 {
   width: 60px;
   margin-right: 2px;
}

.button:hover,
.button:focus,
.button2:hover,
.button2:focus {
   background-color: var(--button-hover-color);
   color: var(--secondary-color);
}

.logo {
   margin-top: 10px;
   margin-right: 100px;
   max-width: 100%;
   height: auto;
}

.social {
   margin-inline-start: 15px;
   margin-top: 10px;
   max-height: 30px;
   max-width: 30px;
}