/* =========================================
   CONFIGURATION ZONE - ADJUST POSITIONS HERE
   ========================================= */

/* 
   --x: Horizontal center (0% left, 100% right)
   --y: Vertical center (0% top, 100% bottom)
   --w: Width size relative to container
   --r: Rotation angle
*/

/* 1. The Bag (Left side) */
.item-bag {
    --x: 5%;    /* Push further left/right */
    --y: 35%;   /* Push up/down */
    --w: 52%;   /* Size */
    --r: 20deg;  /* Rotation */
    z-index: 10;
}

/* 2. The CV (Top Middle) */
.item-cv-group {
    --x: 55%;
    --y: 30%;
    --w: 28%;
    --r: 3deg;
    z-index: 20;
}

/* 3. The ID Card (Center) */
.item-id-card {
    --x: 65%;
    --y: 55%;
    --w: 40%;
    --r: -8deg;
    z-index: 30;
}

/* 4. Softwares (Left Bottom) */
.item-softwares {
    --x: 23%;
    --y: 75%;
    --w: 35%;
    --r: -3deg;
    z-index: 20;
}

/* 5. Movie List (Right Side) */
.item-movies {
    --x: 65%;
    --y: 103%;
    --w: 27%;
    --r: 2deg;
    z-index: 25;
}

/* 6. Camera (Bottom Center) */
.item-camera {
    --x: 35%;
    --y: 113%;
    --w: 35%;
    --r: 10deg;
    z-index: 40;
}

/* =========================================
   END CONFIGURATION
   ========================================= */


/* --- Main Layout --- */
#about-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 8rem;
    overflow-x: hidden;
    background-color: #fff;
    padding-bottom: 4rem;
}

/* --- Intro Section (Avatar + Bubble) --- */
.intro-section {
    display: flex;
    justify-content: center;
    align-items: center; /* Aligns center of avatar with center of bubble */
    gap: 3rem;
    max-width: 1000px;
    width: 90%;
    margin-bottom: 3rem;
}

.avatar-container img.avatar {
    width: 250px;
    height: auto;
    display: block;
    border-radius: 10px; /* Optional rounded corners */
}

.speech-bubble {
    background-color: #f0eff2;
    padding-top: 4rem;
    padding-left: 4rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    border-radius: 125px;
    position: relative;
    flex: 1;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.05);
}

/* THE BUBBLE TAIL (Pointer) */
.speech-bubble::before {
    content: '';
    position: absolute;
    /* Position at 75% height */
    top: 25%; 
    left: -30px; /* Stick out to the left */
    
    /* Make a triangle pointing left */
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 40px solid #f0eff2; /* The color of the bubble */
}

/* Typography Fixes */
.speech-bubble h2 {
    color: #B4A6E8;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900; /* Bolder */
    font-size: 2.2rem;
    margin-bottom: 0.2rem; /* Reduced gap */
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

.speech-bubble p {
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
    color: #333;
}

/* Ensure the first paragraph is close to the header */
.speech-bubble h2 + p {
    margin-top: 0; 
}

.speech-bubble .signature {
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    margin-top: 1rem;
    color: #000;
}

/* --- Whoopsie Title --- */
.whoopsie-text {
    width: 100%;
    max-width: 1200px;
    padding-left: 5%;
    margin-bottom: -3%; /* Pull closer to the bag */
    position: relative;
    z-index: 5;
}

.whoopsie-text h2 {
    color: #B4A6E8;
    font-weight: 900;
    font-size: 3.5rem;
    margin: 0;
    line-height: 1;
}

.whoopsie-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: #000;
}

/* --- The Spill Container --- */
.spill-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    /* Maintain a specific aspect ratio so items don't drift apart */
    aspect-ratio: 16 / 12; 
    margin: 0 auto;
}

/* 
   Generic Item Class 
   This handles the math for centering based on the variables 
*/
.spill-item {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--w);
    transform: translate(-50%, -50%) rotate(var(--r));
    transform-origin: center center;
}

.spill-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Special styling for grouped items */

/* CV Group */
.click-hint-img {
    position: absolute;
    top: 20%;
    right: -30%;
    width: 30% !important;
}

.cv-img {
    border: 1px solid #929292;
}

.item-cv-group:hover .cv-img {
    transform: scale(1.05);
    transition: transform 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Ribbon on Movies */
.ribbon-decor {
    position: absolute;
    top: 40%;
    right: -25%;
    width: 40% !important;
    rotate: -15deg;
}

/* Cake on Camera */
.cake-decor {
    position: absolute;
    top: 35%;
    left: -20%;
    width: 35% !important;
    transform: rotate(-10deg);
}