/*BACKGROUND*/
.parent-container {
    position: absolute; /* Establishes a positioning context for children */
    width: 300px;
    height: 300px;
    margin: auto; /* Center the container for example */
   
 }

.background-image-container {
    position: absolute; /* Position the background container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Lower z-index for the back layer */
    
}

.background-image-container img {
     position:absolute;
    justify-content: center; 
    left:830px;
    top: -47px;
    width: 50%;
    height: 50%;
    object-fit: contain; /* Ensures the image covers the container well */
}



/*SCROLLBOX*/
/* Hide the actual radio buttons */
input[type="radio"] {
    display: none;
}

  

/* Style the links/labels */
.links label {
    padding: 5px 15px;
    cursor: pointer;
    margin-right: 5px;
    display: block;
    position: relative;
    top: -30px;
    left: 980px;
    text-decoration: underline; 
}


/* The Scrollbox Container styling */
.scrollbox-container {
    border: 1px solid #ccc;
    padding: 15px;
    height: 550px; /* Fixed height makes it a scrollbox */
    width: 900px;
    overflow-y: auto; /* Adds the vertical scrollbar */
    margin-top: 10px;
    position: relative; /* For absolute positioning of content */
    left: 535px;
    top: 60px;
}

/* Hide all content sections by default */
.content {
    display: none;
    /* Optional: position absolutely inside the container to prevent layout shifts */
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
}

/* Show the relevant content section when its corresponding radio button is checked */
#tab1:checked ~ .scrollbox-container #content1,
#tab2:checked ~ .scrollbox-container #content2,
#tab3:checked ~ .scrollbox-container #content3, 
#tab4:checked ~ .scrollbox-container #content4 {
    display: block;
}






/*HOMEPAGE LINK - RABBIT*/
.image-link-container {
    /* Set the container position relative so the text can be positioned absolutely within it */
    position: relative;
    /* Optional: display as block for better control over dimensions */
    display: block;
    /* Optional: set a width/height or let content define it */
    width: fit-content;
    z-index: 2; /* Lower z-index for the back layer */

}

.image-text {
    /* Position the text absolutely within its parent container */
    position: absolute;
    /* Adjust these values to position the text exactly where you want */
    top: 90%;
    left: 60%;
    /* The transform is used to center the text precisely */
    transform: translate(-50%, -50%);
    /* Optional: styling for readability */
    color: Black; /* Example text color */
    background-color: rgba(0, 0, 0, 0); /* Example background for readability */
    padding: 10px;
    font-size: 15px;
    text-align: center;
    font-family: "Courier New", monospace; /* Change the font family */
 
}

/* Optional: Add hover effect to the text or the link */
.image-link-container:hover .image-text {
    background-color: rgba(0, 0, 0, 0);
    color: #cc1d10;
    font-family: 'Brush Script MT', cursive; /* Change the font family */
}