.responsive-table {
width: 100%;
max-width: 1100px;
margin: 4rem auto;
border-collapse: collapse;
font-family: 'Roboto Mono', monospace;
font-size: 1.25rem;
background-color: transparent;
}
.responsive-table thead tr,
.responsive-table tbody tr {
display: grid;
grid-template-columns: 1fr 1.5fr 2fr 1.5fr; justify-content: center;
align-items: center;
}
.responsive-table th,
.responsive-table td {
padding: 1rem;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.responsive-table thead th {
color: #000;
font-weight: 700;
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-bottom: 2px solid #000;
}
.responsive-table tbody td {
color: #000;
font-size: 2rem;
font-weight: 500;
}
.responsive-table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.03);
transition: background-color 0.2s ease;
}  .lower-bar {
display: flex;
justify-content: center;
gap: 2rem;
padding: 1rem;
} @media (max-width: 768px) {
.lower-bar {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;           
padding: 0.5rem 0.5rem; 
}
.lower-bar a {
all: unset; display: block;
font-size: 1.5rem;
text-align: center;
width: 100%;
max-width: 300px;
color: inherit;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.lower-bar a:hover {
transform: scale(1.05); }
}