.viewport-indicator-container {
    position: fixed; /* Fixes the element relative to the viewport */
    bottom: 20px;    /* 20px from the bottom */
    right: 20px;     /* 20px from the right */
    z-index: 1000;   /* Ensures it stays on top of other content */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    border-radius: 8px; /* Rounded corners for the container */
    display: flex; /* Use flexbox for inner alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    font-family: 'Inter', sans-serif; /* Use Inter font */
}

.breakpoint-box {
    color: white; /* White text color */
    font-weight: bold; /* Bold text */
    padding: 8px 12px; /* Padding inside each box */
    margin: 5px; /* Margin between boxes */
    border-radius: 6px; /* Rounded corners for individual boxes */
    text-transform: uppercase; /* Uppercase text */
    font-size: 0.9rem; /* Slightly smaller font size */
    min-width: 50px; /* Minimum width for consistency */
    text-align: center; /* Center text */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

/* Specific colors for each breakpoint */
.bg-xs { background-color: #dc3545; /* Red */ }
.bg-sm { background-color: #fd7e14; /* Orange */ }
.bg-md { background-color: #28a745; /* Green */ }
.bg-lg { background-color: #007bff; /* Blue */ }
.bg-xl { background-color: #6f42c1; /* Purple */ }
.bg-xxl { background-color: #20c997; /* Teal */ }