/*BACKGROUND*/
.parent-container {
    position: relative; /* 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:420px;
    top: 110px;
    width: 230%;
    height: 230%;
    object-fit: contain; /* Ensures the image covers the container well */
}

body {
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=241304'), auto;
}




/*SCROLLBOX*/

.scroll-box-container {
    position: absolute; /* Position the scroll container */
    top: -30px; /* Example positioning within the parent */
    left: -500px;
    width: 700px;
    height: 700px;
    z-index: 10; /* Higher z-index to appear in front */
    overflow-y: scroll; /* Add vertical scrolling */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px;
    border: 1px solid #ccc;
}

.scroll-box-container img {
    display: block; /* Stack images vertically in the scroll box */
    width: 100%;
    margin-bottom: 10px;
}



a:visited {
  color: #cc1d10; /* Changes the text color to red after the link is visited */
}



/*TEXTBOX*/
.text-box {
    padding: 20px; /* Adds space between the border and the text inside */
    border: 1px solid #D9D7D7; /* Adds a solid, dark gray border (the "box" outline) */
    margin: 10px; /* Adds space outside the box (between the box and other elements) */
    background-color: #FFFFF; /* Adds a light gray background color */
    position: absolute; /* Position the scroll container */
    top: 70px; /* Example positioning within the parent */
    left: 1200px;
    width: 300px;
    height: 100px;
    z-index: 10; /* Higher z-index to appear in front */
    }



/*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: 85%;
    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 */
}