body {
  overflow-y: scroll; /* Always show vertical scrollbar */
  overflow-x: scroll; /* Always show horizontal scrollbar */
}
header {
  max-width: 1600px; /* Prevents the main content from exceeding 1200px in width */
  width: 100%;       /* Ensures the element takes up the full width available on smaller screens */
  margin: 0 auto;    /* Centers the content within its parent container when the max-width is reached */
}

main {
  max-width: 1600px; /* Prevents the main content from exceeding 1200px in width */
  width: 100%;       /* Ensures the element takes up the full width available on smaller screens */
  margin: 0 auto;    /* Centers the content within its parent container when the max-width is reached */
}

.checkbox-pills label {
    display: inline-block;
    margin: 5px;
    padding: 6px 12px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded corners for pill shape */
    cursor: pointer;
    transition: background-color 0.3s;
}

.checkbox-pills input[type="checkbox"] {
    display: none; /* Hide the actual checkbox input */
}

.checkbox-pills input[type="checkbox"]:checked + label {
    background-color: #007bff; /* Color when checked */
    color: white;
    border-color: #007bff;
}


/* Optional: Hover effect for pills */
.checkbox-pills label:hover {
    background-color: #e2e6ea;
}

.format-slider {
    display: flex;
    position: relative;
    background: #e9ecef;
    border-radius: 50px;
    padding: 4px;
    width: 240px;
}
.format-slider input { display: none; }
.format-slider label {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.slider-selection {
    position: absolute;
    width: calc(33.33% - 8px);
    height: calc(100% - 8px);
    background: #007bff;
    border-radius: 50px;
    transition: transform 0.3s ease;
    z-index: 1;
}
/* Move the blue pill based on checked radio */
#f-mp3:checked ~ .slider-selection { transform: translateX(0); }
#f-aac:checked ~ .slider-selection { transform: translateX(100%); }
#f-opus:checked ~ .slider-selection { transform: translateX(200%); }

#f-mp3:checked ~ label[for="f-mp3"],
#f-aac:checked ~ label[for="f-aac"],
#f-opus:checked ~ label[for="f-opus"] { color: white; }