/* Base page centering */
body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a; /* Dark background to blend with image edges if needed */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Keeps the website perfectly square and responsive */
.web-canvas {
    position: relative;
    width: 100%;
    max-width: 800px; 
    aspect-ratio: 1 / 1; /* Forces a perfect square ratio */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.bg-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Base style for all clickable areas */
.click-zone {
    position: absolute;
    cursor: pointer;
    background: rgba(255, 255, 255, 0); /* Invisible by default */
    transition: background 0.2s ease;
    
    /* UNCOMMENT THE LINE BELOW TO SEE THE BOXES WHILE POSITIONING THEM */
    /* border: 2px dashed #ff4757; background: rgba(255, 71, 87, 0.2); */
}

/* Subtly highlights the area when hovered */
.click-zone:hover {
    background: rgba(255, 255, 255, 0.05); 
}

/* --- Positioning the 6 Zones via Percentages --- */

.zone-ai {
    top: 6%;
    left: 8%;
    width: 25%;
    height: 25%;
}

.zone-tools {
    top: 6%;
    right: 8%;
    width: 25%;
    height: 25%;
}

.zone-notes {
    top: 50%;
    left: 5%;
    width: 25%;
    height: 25%;
}

.zone-tryme {
    top: 55%;
    right: 5%;
    width: 28%;
    height: 22%;
}

.zone-tesol {
    bottom: 4%;
    left: 36%;
    width: 28%;
    height: 22%;
}

/* The Pebble Centerpiece (About/Contact) */
.zone-pebble {
    top: 30%;
    left: 31%;
    width: 38%;
    height: 38%;
    border-radius: 50%; /* Makes the link box a perfect circle to match the pebble */
}