body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.center-container {
    text-align: center;
}

.large-button {
    display: inline-block;
    padding: 20px 40px;
    margin: 10px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #0066cc;
    border-radius: 8px;
}

.large-button:hover {
    background-color: #0052a3;
}

.button-group {
    margin-top: 30px;
}

/* Add this new CSS rule to create columns */
.reporting-columns {
    display: flex;
    flex-wrap: wrap;
}

.reporting-column {
    flex: 1;
    padding: 0 10px;
    box-sizing: border-box;
}

.twitter-timeline-container {
    width: 100%; /* Set the width of the embedded timelines to 100% */
}

/* Other existing CSS rules */

/* CSS media query to adjust columns for different screen sizes */
@media screen and (max-width: 600px) {
    .reporting-column {
        flex-basis: 100%; /* Set the column to take full width on smaller screens */
    }
}