styles.css

body {
    margin: 0;
    background: white;
    text-align: justify;
    padding: 100px;
}

.title {
    text-align: left;
    color: RoyalBlue;
}

table {
    margin: 0 auto; /* Center the table horizontally */
    max-width: 80%; /* Limit the maximum width of the table */
    width: auto; /* Allow the table to adjust its width based on content */
    border-collapse: collapse; /* Collapse table borders */
}

table th,
table td {
    border: 1px solid #ddd; /* Add borders to table cells */
    padding: 8px; /* Padding inside table cells */
    text-align: right;
    /* Retain the existing text alignment */
}

table th {
    text-align: left; /* Align text inside table headers to the left */
    background-color: #f2f2f2;
}

table td {
    text-align: left; /* Align text inside table data cells to the left */
}


/* For tablets and smaller devices */
@media (max-width: 1024px) {
    .your-element {
        padding: 20px;
    }
}

/* For mobile phones */
@media (max-width: 768px) {
    .your-element {
        padding: 15px;
    }
}

/* For smaller mobile phones */
@media (max-width: 480px) {
    .your-element {
        padding: 5px;
    }
}