.libraryTabs {
}


/* 1. Hide the inputs */
input[type="radio"] {
    display: none;
}

/* 2. Style the Button Section (e.g., Flexbox for tabs) */
.button-section {
    display: flex;
    gap: 20px;
    color: gold;
    padding-left: 20px;
    background-image:url(../Images/siteElements/HmMtlGrn.png);
    border:5px solid!important;border-image:url(../Images/siteElements/border10.png) 15 round!important;

}

/* 3. Style the Content Section */
.tab-content {
    display: none;
    padding: 1px;
}

/* 4. The "Magic" Selectors */
/* When Tab 1 is checked, find the sibling .content-section and its child #content1 */
#tab1:checked ~ .content-section #content1,
#tab2:checked ~ .content-section #content2,
#tab3:checked ~ .content-section #content3 {
    display: block;
}

/* Optional: Style the active button */
#tab1:checked ~ .button-section label[for="tab1"],
#tab2:checked ~ .button-section label[for="tab2"],
#tab3:checked ~ .button-section label[for="tab3"] {
    color: white;
}


label{
padding: 4px;

}

label:hover {
 transform: scale(1.1); 
   color: white;
}


    background-image:url(../Images/siteElements/HmMtlBrnSm.png);
    border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 15 round!important;