{box-sizing: border-box;
    margin: 0; /* Remove default margins from everything */
    padding: 0; /* Remove default paddings from everything */
}

/* --- 1. Body and Background Image --- */
body {
    background-image: url('/images/white-background.jpg'); /* 👈 Replace with your white image path */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    min-height: 100vh; /* Ensures the body covers at least the full viewport height */
    overflow: hidden; /* IMPORTANT: Prevent scrolling if content extends beyond viewport */
    font-family: "Rubik", sans-serif;
}

/* --- 2. Interactive Container (holds all squares) --- */
.interactive-container {
    position: relative; /* IMPORTANT: This is the positioning context for absolute squares */
    width: 100vw; /* Take full viewport width */
    height: 100vh; /* Take full viewport height */
    overflow: hidden; /* Hide anything that goes outside this area */
}

/* --- 3. Common Styles for All Squares --- */
.interactive-square {
    position: absolute; /* Allows precise positioning relative to .interactive-container */
    width: 25px; /* Default width of the squares */
    height: 25px; /* Default height of the squares (makes them square) */
    background-color: #ff6f69; /* Default color (will be overridden by individual IDs) */
    text-decoration: none; /* Remove underline from links */
    color: white; /* Text color inside the squares */
    cursor: pointer; /* Change cursor to a hand */
    box-shadow: none; /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transitions for hover */
    z-index: 10; /* Ensures squares are above the background */
}

/* Square text span to handle potential wrapping */
.interactive-square .square-text {
    position: absolute; /* Position the text absolutely relative to its square parent */
    bottom: 100%; /* Position the text directly above the square */
    left: 50%; /* Center horizontally relative to the square */
    transform: translateX(-50%) translateY(-10px); /* Center and initially push it down 10px */

    width: auto; /* Allow width to be determined by text content */
    white-space: nowrap; /* Keep text on a single line */
    padding: 8px 8px; /* Padding around the text */
    color: rgba(0, 0, 0, 0.85); /* text color */
    font-family: 'Rubik', sans-serif; /* Your chosen font */
    font-weight: 400;
    font-size: 0.8rem; /* Adjust text size as needed */
    text-align: center; /* Ensure text is centered within its own box */

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
    z-index: 20; /* Ensure text appears above everything else, including other squares */
    pointer-events: none; /* ADDED: Important! Allows clicks to go through to the square below */
}

/* --- 4. Hover Effect for Squares --- */
.interactive-square:hover {
    /* transform: scale(1.1); /* Pop-up effect: makes square 10% larger */
    box-shadow: none; /* Stronger shadow on hover */
    background-color: #ff918d; /* Slightly lighter color on hover */
    z-index: 11; /* Bring hovered square slightly to the front */
}

.interactive-square:hover .square-text {
    opacity: 1; /* Make text fully visible */
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

#square-about {
    top: 15%;
    left: 10%;
    background-color: #6a0572; /* Dark Purple */
}

#square-gallery {
    top: 30%;
    right: 15%;
    background-color: #3b5998; /* Facebook Blue */
}

#square-blog {
    bottom: 20%;
    left: 25%;
    background-color: #008cba; /* Light Blue */
}

#square-work {
    top: 50%;
    left: 5%;
    background-color: #d11141; /* Red */
}

#square-contact {
    top: 60%;
    right: 5%;
    background-color: #00b159; /* Green */
}

#square-resources {
    bottom: 5%;
    right: 60%;
    background-color: #fce400; /* Yellow */
    color: #333; /* Change text color for light background */
}

/* Add more IDs for your other squares (e.g., #square-7, #square-8) */
/* Example:
#square-7 {
    top: 10%;
    right: 40%;
    background-color: #ff7f50;
}
*/

.page-main-title {
    position: absolute;
    top: 40%;    /* Move 50% down from the top */
    left: 50%;   /* Move 50% right from the left */
    transform: translate(-50%, -50%); /* Pull it back by half its own width AND half its own height */

    z-index: 100;
    font-family: "Funnel Display", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 4rem;
    color: black;
    white-space: nowrap;
}


/* --- 6. Responsive Adjustments for Smaller Screens (Media Queries) --- */
/* This is crucial! Absolute positioning can look bad on small screens without adjustments. */

@media (max-width: 768px) {
  
    .page-main-title {
        font-size: 3rem; /* Smaller font on mobile */
        top: 2%; /* Maybe closer to the top edge */
        right: 4%; /* Closer to the left edge */
        white-space: normal; /* Allow title to wrap on multiple lines */
        width: 90%; /* Give it a width to wrap within */
        text-align: left; /* Keep multi-line text left-aligned */
        transform: none; /* Ensure no transformations interfere */
    }
  
    .interactive-square {
        width: 20px; /* Make squares smaller on tablets/phones */
        height: 20px;
        font-size: 0.9rem; /* Smaller text */
        box-shadow: none; /* Smaller shadow */
    }

    /* Adjust individual positions for smaller screens */
    #square-about { top: 5%; left: 5%; }
    #square-gallery { top: 18%; right: 5%; }
    #square-blog { bottom: 30%; left:20%; } /* Move up and slightly in */
    #square-work { top: 40%; left: 50%; transform: translateX(-50%); } /* Center it on mobile */
    #square-contact { top: 60%; right: 10%; }
    #square-resources { bottom: 15%; left: 5%; } /* Move to bottom left */
    /* Adjust more square positions as needed for your specific layout */

    /* If squares start to overlap too much, you might consider: */
    /* - Hiding some on very small screens (display: none;) */
    /* - Stacking them in a simpler grid layout (more advanced, would require different HTML/CSS) */
}

@media (max-width: 480px) {
    .interactive-square {
        width: 8px; /* Even smaller for tiny phones */
        height: 8px;
        font-size: 0.8rem;
    }
    /* Further position adjustments for very small screens if necessary */
    #square-about { top: 3%; left: 3%; }
    #square-gallery { top: 12%; right: 3%; }
    #square-blog { bottom: 25%; left: 7%; }
    #square-work { top: 35%; left: 50%; transform: translateX(-50%); }
    #square-contact { top: 55%; right: 7%; }
    #square-resources { bottom: 13%; left: 3%; }

    /* For extremely small screens, you might just stack them: */
    /*
    .interactive-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px;
        height: auto; // Let height adjust to content
    }
    .interactive-square {
        position: static; // Remove absolute positioning
        width: 80%; // Make them take full width
        height: 60px; // A fixed height for stacked buttons
        margin: 0; // Remove margin for gap
    }
    */
}