body, html {
    height: 100%;
    margin: 0;
}

.container {
    text-align: center;
}

.request-id {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Adjustments for the buttons to make them wider and prevent wrapping */
.btn-lg {
    padding: 10px 20px; /* Good horizontal padding */
    font-size: 18px; /* Suitable font size */
    line-height: 1.5; /* Adequate line spacing */
    display: block; /* Make the anchor fill its container */
    width: 100%; /* Ensures the button takes the full width of its container */
    text-align: center; /* Centers the text inside the button */
    box-sizing: border-box; /* Padding and border included in width/height calculation */
    overflow: hidden; /* Prevents content from spilling out */
}

.col-md-6 {
    padding: 5px; /* Adds spacing around each button */
    flex: 0 0 100%; /* Each button can potentially take the full width */
    max-width: 100%; /* Caps the width to prevent overflow */
}

@media (min-width: 992px) { /* Adjustments for larger screens */
    .row {
        flex-wrap: nowrap; /* Keeps buttons in a single row */
    }
    .col-md-6 {
        flex: 0 0 50%; /* Allows each button to take up to half the container's width */
        max-width: 50%; /* Caps the width at half of the container */
    }
}

@media (max-width: 991px) { /* Adjustments for smaller screens */
    .btn-lg {
        padding: 12px 16px; /* Slightly larger padding for better touch targets */
        font-size: 16px; /* Smaller font for smaller screens */
    }
    .col-md-6 {
        width: 100%; /* Each button takes full width on smaller screens */
        max-width: 100%; /* Ensures buttons do not exceed screen width */
    }
}

/* Media Queries for request ID font size responsiveness */
@media (max-width: 600px) {
    .request-id {
        font-size: 0.6rem;
    }
}

@media (max-width: 400px) {
    .request-id {
        font-size: 0.5rem;
    }
}