.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*//* Custom Earthy & Warm Tones Theme for LittleLink */

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

/* Override any conflicting background colors */
html, body {
    background-color: transparent !important;
}

/* Animated container styling - Ensure animations show behind */
.container {
    background: rgba(60, 40, 30, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    animation: containerFadeIn 1.2s ease-out !important;
    position: relative !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    /* Added data attributes for easier identification */
    data-container-type: "main-content" !important;
    data-theme: "earthy-warm" !important;
}

/* Add specific identifiers to common elements */
h1 {
    data-element-type: "page-title" !important;
}

.avatar {
    data-element-type: "profile-image" !important;
}

.bio {
    data-element-type: "profile-description" !important;
}

.button {
    data-element-type: "link-button" !important;
}

.footer {
    data-element-type: "page-footer" !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* Custom button colors - Earthy & Warm Tones (Non-repeating) */

/* PDF Editor - Terracotta */
.button[href*="stirling"] {
    background: linear-gradient(135deg, #c65d07 0%, #e67e22 100%) !important;
    border: 2px solid #d68910 !important;
    box-shadow: 0 4px 15px rgba(198, 93, 7, 0.3) !important;
}

/* Blog - Burnt Sienna */
.button[href*="blog"] {
    background: linear-gradient(135deg, #a0522d 0%, #cd853f 100%) !important;
    border: 2px solid #b8651f !important;
    box-shadow: 0 4px 15px rgba(160, 82, 45, 0.3) !important;
}

/* RSS Hub - Rust Orange */
.button[href*="rsshub"] {
    background: linear-gradient(135deg, #b7410e 0%, #dc7633 100%) !important;
    border: 2px solid #ca6f1e !important;
    box-shadow: 0 4px 15px rgba(183, 65, 14, 0.3) !important;
}

/* ACS EPC - Warm Brown */
.button[href*="linkedin.com/groups"] {
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%) !important;
    border: 2px solid #96501f !important;
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3) !important;
}

/* QuickQR - Golden Brown */
.button[href*="quickqr"] {
    background: linear-gradient(135deg, #b8860b 0%, #daa520 100%) !important;
    border: 2px solid #c49c16 !important;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3) !important;
}

/* GitHub - Forest Green */
.button[href*="github"] {
    background: linear-gradient(135deg, #556b2f 0%, #6b8e23 100%) !important;
    border: 2px solid #607d29 !important;
    box-shadow: 0 4px 15px rgba(85, 107, 47, 0.3) !important;
}

/* LinkedIn - Warm Teal */
.button[href*="linkedin.com/in"] {
    background: linear-gradient(135deg, #2f4f4f 0%, #5f8a8b 100%) !important;
    border: 2px solid #456c6d !important;
    box-shadow: 0 4px 15px rgba(47, 79, 79, 0.3) !important;
}

/* Discord - Deep Purple */
.button[href*="discord"] {
    background: linear-gradient(135deg, #663399 0%, #8a2be2 100%) !important;
    border: 2px solid #7a4db8 !important;
    box-shadow: 0 4px 15px rgba(102, 51, 153, 0.3) !important;
}

/* YouTube - Warm Red */
.button[href*="youtube"] {
    background: linear-gradient(135deg, #b22222 0%, #dc143c 100%) !important;
    border: 2px solid #c42c2f !important;
    box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3) !important;
}

/* Twitch - Plum */
.button[href*="twitch"] {
    background: linear-gradient(135deg, #8b008b 0%, #ba55d3 100%) !important;
    border: 2px solid #9f2ba8 !important;
    box-shadow: 0 4px 15px rgba(139, 0, 139, 0.3) !important;
}

/* Twitter - Slate Blue */
.button[href*="twitter"] {
    background: linear-gradient(135deg, #483d8b 0%, #6a5acd 100%) !important;
    border: 2px solid #574cac !important;
    box-shadow: 0 4px 15px rgba(72, 61, 139, 0.3) !important;
}

/* Instagram - Warm Pink */
.button[href*="instagram"] {
    background: linear-gradient(135deg, #c71585 0%, #ff1493 100%) !important;
    border: 2px solid #db2d8c !important;
    box-shadow: 0 4px 15px rgba(199, 21, 133, 0.3) !important;
}

/* Facebook - Navy Blue */
.button[href*="facebook"] {
    background: linear-gradient(135deg, #191970 0%, #4169e1 100%) !important;
    border: 2px solid #2d4199 !important;
    box-shadow: 0 4px 15px rgba(25, 25, 112, 0.3) !important;
}

/* TikTok - Dark Coral */
.button[href*="tiktok"] {
    background: linear-gradient(135deg, #cd5c5c 0%, #f08080 100%) !important;
    border: 2px solid #d96e6e !important;
    box-shadow: 0 4px 15px rgba(205, 92, 92, 0.3) !important;
}

/* Patreon - Warm Orange */
.button[href*="patreon"] {
    background: linear-gradient(135deg, #ff6347 0%, #ff7f50 100%) !important;
    border: 2px solid #ff714b !important;
    box-shadow: 0 4px 15px rgba(255, 99, 71, 0.3) !important;
}

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

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

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

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

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

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

/* Pulse animation for active buttons */
.button:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Additional styling for better visual appeal */
.button i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

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

/* PassGen - Warm Brown */
.button[href*="passgen"] {
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%) !important;
    border: 2px solid #96501f !important;
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3) !important;
}
/* Fix for white sections when scrolling - preserve all animations */
html {
    background: linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a3426 50%, #3d2817 75%, #2c1810 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    min-height: 100% !important;
}

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

/* Ensure animations work properly */
body::before, body::after {
    z-index: -1 !important;
}