/* Remove the backdrop styles from .overlay */
.overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    padding: 10px;
    z-index: 2000;
    opacity: 0;  
    padding: 10px;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);    
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
}

/* Overlay-specific styles including the backdrop */

    /* Bubble0 - Me=cv */
.overlay-1 {
    background: #F28123; /* Green backdrop */
    background-image: url('../images/outlay-1-none.png'); /* Replace with your image path */
    background-repeat: repeat; /* Tiling the image */
    background-size: auto; /* Default size, tiles naturally */
    background-position: top left; /* Starting position of the tiles */
    color: #ffffff;
    border-radius: 50px 5px 20px 20px;
    border: 1px solid #ffffff;
    transform: rotate(0.75turn);
}

    /* Bubble1 - About */
.overlay-2 {
    background: #74860c; /* Green backdrop */
    background-image: url('../images/outlay-1-none-dark.png'); /* Replace with your image path */
    background-repeat: repeat; /* Tiling the image */
    background-size: auto; /* Default size, tiles naturally */
    background-position: top left; /* Starting position of the tiles */
    border-radius: 80px 25px 50px 20px; 
    border: 1px solid #ffffff;
    transform: rotate(0.25turn);
    height: auto;
    overflow: auto;
}

    /* Bubble2 - Stories */
.overlay-3 {
    background: #D34E24; /* Blue backdrop */
    background-image: url('../images/outlay-1-none-light.png'); /* Replace with your image path */
    background-repeat: repeat; /* Tiling the image */
    background-size: auto; /* Default size, tiles naturally */
    background-position: top left; /* Starting position of the tiles */ 
    border-radius: 25px 80px 20px 50px;    
    border: 1px solid #ffffff;
    transform: rotate(0.5turn);
}

    /* Bubble4 - IT */
.overlay-4 {
    background: #563F1B; /* Blue backdrop */
    background-image: url('../images/outlay-1-none-light.png'); /* Replace with your image path */
    background-repeat: repeat; /* Tiling the image */
    background-size: auto; /* Default size, tiles naturally */
    background-position: top left; /* Starting position of the tiles */  
    border-radius: 12px 100px 100px 17px; 
    transform: rotate(-0.75turn);   
}

    /* Bubble7 - contact */
.overlay-5 {
    background: #946b29; /* Blue backdrop */
    background-image: url('../images/contact.png'); /* Replace with your image path */
    width: 100%;
    height: 100%;
    background-repeat: repeat; /* Tiling the image */
    background-size: auto; /* Default size, tiles naturally */
    background-position: top left; /* Starting position of the tiles */ 
    border-radius: 25px 80px 20px 50px;    
    border: 1px solid #ffffff;
    transform: rotate(0.5turn);  
    color: #fff;
}

    /* Bubble7 - contact */
    .overlay-6 {
        background: #946b29; /* Blue backdrop */
        background-image: url('../images/contact.png'); /* Replace with your image path */
        background-repeat: repeat; /* Tiling the image */
        background-size: auto; /* Default size, tiles naturally */
        background-position: top left; /* Starting position of the tiles */ 
        border-radius: 25px 80px 20px 50px;    
        border: 1px solid #ffffff;
        transform: rotate(0.5turn);  
        color: #fff;
    }


    /* Bubble7 - contact */
    .overlay-7 {
        background: #000; /* Blue backdrop */
        background-repeat: repeat; /* Tiling the image */
        background-size: auto; /* Default size, tiles naturally */
        background-position: top left; /* Starting position of the tiles */ 
        border-radius: 25px 80px 20px 50px;    
        border: 1px solid #ffffff;
        transform: rotate(0.5turn);  
        color: #fff;
    }
        
/* Active state to show overlay */
.overlay-1.show, .overlay-2.show, .overlay-3.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}


.overlay.hidden {
    opacity: 0; /* Keep it hidden but allow transitions */
    pointer-events: none; /* Prevent interaction */
}

.overlay.active {
    transform: translate(-50%, -50%) scale(1); /* Scale up smoothly */
    opacity: 1;
}

/* Close button */
.close-button {
    position: absolute;
    top: 15px; /* Adjust as needed */
    right: 15px; /* Adjust as needed */
    background: #f00;
    border: none;
    font-size: 24px; /* Adjust for size */
    color: white; /* Matches overlay theme */
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s ease, color 0.3s ease;
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.2); /* Subtle hover effect */
    color: #f00; /* Highlight color for hover */
}

.close-button i {
    pointer-events: none; /* Ensures the icon is not clickable */
}

/* Center content in the overlay */
.overlay-content {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Ensure it takes the full height of the overlay */
    position: relative; /* Maintain relative positioning for the content */
}

/* Flex container for fully visible divs */
.flex-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically (only applies in row layout) */
    flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
    gap: 20px; /* Add spacing between items */
    width: 100%; /* Ensure container takes full width */
    height: 100%; /* Adjust to fit overlay height */
    box-sizing: border-box; /* Include padding and border in width/height */
}

/* Fully visible div styles */
.fully-visible {
    flex: 1 1 300px; /* Flex-grow: 1, Flex-shrink: 1, Base width: 300px */
    max-width: 400px; /* Prevent items from growing too large */
    background: #000;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 1; /* Fully visible */
    text-align: center;
}

/* Media query for narrow screens */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column; /* Stack items vertically */
        align-items: stretch; /* Let items take full width */
    }

    .fully-visible {
        max-width: 100%; /* Allow items to stretch to the container width */
    }
}