.container{position:relative;width:100%;max-width:600px;text-align:center;margin:0 auto;padding:0 20px;box-sizing:border-box}.column{position:center;width:100%;float:center;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:0}.column:first-child,.columns:first-child{margin-left:0}}html{font-size:100%}body{background-color:var(--bg-color);font-size:18px;line-height:24px;font-weight:400;font-family:"Open Sans",HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--font-color)}h1{margin-top:0;margin-bottom:16px;font-weight:800}h1{font-size:24px;line-height:64px;letter-spacing:0}@media (min-width:550px){h1{font-size:48px;line-height:96px}}p{margin-top:0}a{color:var(--a-color)}a:hover{color:var(--a-color)}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;color:var(--font-color);white-space:nowrap;background:var(--code-color);border:1px solid var(--code-color);border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,ol,p,pre{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid var(--hr-color)}.avatar{vertical-align:middle;width:128px;height:128px;border-radius:50%}.footer{margin-top:36px;padding-bottom:36px}.button.button-devto,.button.button-ghost,.button.button-gitea,.button.button-gitlab,.button.button-signal,.button.button-stackoverflow{border-style:var(--button-border-style);border-color:var(--border-color);border-width:1px}
/*# sourceMappingURL=littlelink.css.map*//* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}
/* ========================================
   LITTLELINK EARTHY & WARM TONES THEME
   ======================================== */

/* ========================================
   COLOR PALETTE REFERENCE
   ======================================== */
/*
   Dark Walnut: #582f0e - Very dark, chocolate brown
   Saddle Brown: #7f4f24 - Deep brown with golden undertones
   Toffee Brown: #936639 - Rich, deep toffee brown
   Camel: #a68a64 - Soft golden tan
   Khaki Beige: #b6ad90 - Soft, muted beige with khaki warmth
   Dry Sage: #c2c5aa - Gentle, earthy yellow-green
   Dry Sage Alt: #a4ac86 - Alternative earthy yellow-green
   Dusty Olive: #656d4a - Earthy olive-moss shade
   Ebony: #414833 - Muted greenish-black
   Charcoal Brown: #333d29 - Cool, deep earth tone
*/

/* ========================================
   BASE STYLES & LAYOUT
   ======================================== */

/* Background & Body */
body {
    background: linear-gradient(135deg, #392f1a 0%, #4a3120 25%, #58402f 50%, #4a3120 75%, #392f1a 100%) !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html, body {
    background-color: transparent !important;
    color: #f5e6d3 !important;
}

/* Main Container */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Container Glow Effect */
.container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, 
        rgba(212, 165, 116, 0.3), 
        rgba(184, 134, 11, 0.3), 
        rgba(160, 82, 45, 0.3), 
        rgba(139, 69, 19, 0.3)) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    animation: borderGlow 6s ease-in-out infinite !important;
    opacity: 0 !important;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

/* Avatar Styling */
.avatar {
    border: 4px solid #b99364 !important;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
    animation: avatarPulse 4s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5) !important;
}

/* Title Styling */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate !important;
    letter-spacing: 0.5px !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Bio Text */
.bio {
    animation: fadeInUp 1s ease-out !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

/* Text Colors */
h1, .bio, .footer {
    color: #f5e6d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.footer {
    background: rgba(44, 24, 16, 0.8) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 2rem !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.button {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: buttonSlideIn 0.8s ease-out forwards !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}

/* Button Hover Effects */
.button:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Button Shimmer Effect */
.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.button:hover::before {
    left: 100% !important;
}

/* Button Icon Styling */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   BUTTON COLORS
   Base colors are set via buttons.env (BUTTON_*_COLOR).
   Gradients below use the earthy palette flowing dark→light.
   GitHub and Discord are overridden here since they use
   LittleLink's built-in styling, not buttons.env colors.
   
   To add a new button: set its color in buttons.env only.
   The gradient overlay (rgba lines below) applies automatically.
   ======================================== */

/* Universal gradient overlay — applies to ALL buttons.
   Lightens the top-left and darkens the bottom-right of
   whatever background-color is set by buttons.env */
.button {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(0,0,0,0.18) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.button:hover {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.1) 100%
    ) !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45) !important;
}

/* GitHub — Dry Sage (earthy green, fits the palette flow) */
.button-github {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(164,172,134,0.35) !important;
}

.button-github:hover {
    background-color: #a4ac86 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(164,172,134,0.5) !important;
}

/* Discord — Dusty Olive (darker green end of the palette) */
.button-discord {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.18) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 15px rgba(101,109,74,0.35) !important;
}

.button-discord:hover {
    background-color: #656d4a !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%) !important;
    box-shadow: 0 8px 25px rgba(101,109,74,0.5) !important;
}

/* ========================================
   STAGGERED BUTTON ANIMATIONS
   ======================================== */

.button:nth-child(1) { animation-delay: 0.1s !important; }
.button:nth-child(2) { animation-delay: 0.2s !important; }
.button:nth-child(3) { animation-delay: 0.3s !important; }
.button:nth-child(4) { animation-delay: 0.4s !important; }
.button:nth-child(5) { animation-delay: 0.5s !important; }
.button:nth-child(6) { animation-delay: 0.6s !important; }
.button:nth-child(7) { animation-delay: 0.7s !important; }
.button:nth-child(8) { animation-delay: 0.8s !important; }
.button:nth-child(9) { animation-delay: 0.9s !important; }
.button:nth-child(10) { animation-delay: 1.0s !important; }

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

@keyframes containerFadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(50px) scale(0.9) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3) !important;
        border-color: #d4a574 !important;
    }
    50% { 
        box-shadow: 0 6px 25px rgba(212, 165, 116, 0.5) !important;
        border-color: #e6c085 !important;
    }
}

@keyframes titleGlow {
    from { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 165, 116, 0.3) !important;
    }
    to { 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.6) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes buttonSlideIn {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   STATUS BADGE
   ======================================== */

/* Status badge injected after the bio using a pseudo-element on the container */
.column > p:not(.footer)::after {
    content: '🟡  Employed  ·  Open to freelance & part-time' !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: rgba(210, 105, 30, 0.15) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #f0c890 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: badgePulse 3s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(210, 105, 30, 0.0);
        border-color: rgba(210, 105, 30, 0.4);
    }
    50% { 
        box-shadow: 0 0 10px 2px rgba(210, 105, 30, 0.2);
        border-color: rgba(210, 105, 30, 0.7);
    }
}

/* ========================================
   FUTURE BUTTON TEMPLATES (COMMENTED)
   Add a new button: set its color in buttons.env only.
   The gradient/border/shadow is applied automatically by
   the BUTTON COLORS section above — no CSS needed here.

   Example colors from the earthy palette:
   #582f0e  Dark Walnut
   #7f4f24  Saddle Brown
   #936639  Toffee Brown
   #a68a64  Camel
   #b6ad90  Khaki Beige
   #a4ac86  Dry Sage
   #656d4a  Dusty Olive
   #414833  Ebony
   #333d29  Charcoal Brown
   #d2691e  Warm Amber (use for highlight buttons)
   ======================================== *//* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

/* Ensure body doesn't override animations */
body {
    min-height: 100vh !important;
    overscroll-behavior: none !important;
}

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}