@font-face {
    font-family: 'Digital-7';
    src: url('https://db.onlinewebfonts.com/t/8e22783d70940175005884e9d722e036.woff2') format('woff2');
}

@font-face {
    font-family: 'Lemon';
    src: url('https://fonts.gstatic.com/s/lemon/v11/ieVw2ZHn6-6j0fLw.woff2') format('woff2');
}

.font-digital {
    font-family: 'VT323', monospace;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url('https://image2url.com/r2/bucket2/images/1767722502315-ffb1c56a-c89c-4995-ba52-716a2a91cfb0.blob');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff; /* Default text color */
    overflow-x: hidden; /* Prevent horizontal scroll from marquee */
}

/* Cross-browser Reset/Safety */
a {
    text-decoration: none !important;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* Custom Scrollbar for Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a; 
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    border-radius: 5px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); 
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #0000ff #1a1a1a; /* Blue thumb, Dark track */
}

/* Hide Scrollbar Utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animation Keyframes for RGB Cycle */
@keyframes rgb-border {
    0% { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; }
    15% { border-color: #ffff00; box-shadow: 0 0 5px #ffff00; }
    30% { border-color: #00ff00; box-shadow: 0 0 5px #00ff00; }
    45% { border-color: #00ffff; box-shadow: 0 0 5px #00ffff; }
    60% { border-color: #0000ff; box-shadow: 0 0 5px #0000ff; }
    75% { border-color: #ff00ff; box-shadow: 0 0 5px #ff00ff; }
    100% { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; }
}

/* Class to apply the animation */
.rgb-border-animate {
    position: relative;
    /* border: 2px solid transparent; Removed to use overlay border instead */
    /* border-radius: 0.75rem; Removed to allow inheriting from utility classes */
    z-index: 1; /* Ensure proper stacking context */
}

/* Pseudo-element for RGB walking border with transparency mask */
.rgb-border-animate::before {
    content: "";
    position: absolute;
    inset: 1px; /* Slight inset to prevent clipping */
    z-index: 50; /* Ensure visibility on top of all content */
    pointer-events: none; /* Allow clicks to pass through to content */
    
    /* Double the spectrum for seamless looping */
    background: linear-gradient(90deg, 
        #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000,
        #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
    );
    background-size: 200% 100%;
    animation: rgb-walk-border 3s linear infinite;
    
    border-radius: inherit; /* Inherit border radius from parent */
    padding: 3px; /* Thickness of the border */
    
    /* Masking logic to keep center transparent */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    
    /* Standard syntax for Firefox and modern browsers */
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

@keyframes rgb-walk-border {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; } /* Moves exactly half the width (one full spectrum) */
}


/* Removed animation here, now handled by child .char-rgb elements */

@keyframes rgb-cycle-glow {
    0% { color: #ff0000; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000; }
    15% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00, 0 0 70px #ffff00, 0 0 80px #ffff00, 0 0 100px #ffff00; }
    30% { color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 70px #00ff00, 0 0 80px #00ff00, 0 0 100px #00ff00; }
    45% { color: #00ffff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff; }
    60% { color: #0000ff; text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff, 0 0 40px #0000ff, 0 0 70px #0000ff, 0 0 80px #0000ff, 0 0 100px #0000ff; }
    75% { color: #ff00ff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 70px #ff00ff, 0 0 80px #ff00ff, 0 0 100px #ff00ff; }
    100% { color: #ff0000; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000; }
}

@keyframes rgb-cycle {
    0% { color: #ff0000; text-shadow: 2px 2px 2px #000000; }
    15% { color: #ffff00; text-shadow: 2px 2px 2px #000000; }
    30% { color: #00ff00; text-shadow: 2px 2px 2px #000000; }
    45% { color: #00ffff; text-shadow: 2px 2px 2px #000000; }
    60% { color: #0000ff; text-shadow: 2px 2px 2px #000000; }
    75% { color: #ff00ff; text-shadow: 2px 2px 2px #000000; }
    100% { color: #ff0000; text-shadow: 2px 2px 2px #000000; }
}

@keyframes rgb-cycle-flat {
    0% { color: #ff0000; }
    15% { color: #ffff00; }
    30% { color: #00ff00; }
    45% { color: #00ffff; }
    60% { color: #0000ff; }
    75% { color: #ff00ff; }
    100% { color: #ff0000; }
}

/* Per-character animation with delay */
.char-rgb {
    display: inline-block;
    animation: rgb-cycle 3s linear infinite; /* Restore glow animation */
    animation-fill-mode: both; /* Apply 0% style (Red) before animation starts */
    white-space: pre; /* Preserve spaces on PC */
    text-decoration: none !important; /* Ensure no strikethrough/underline */
    color: #ff0000; /* Fallback color */
}

.rgb-text {
    text-decoration: none !important;
}

/* RGB Icon Animation */
.rgb-icon {
    animation: rgb-cycle 3s linear infinite;
}

/* Navbar RGB Link Styles - Default State (Inactive) */
.nav-rgb .char-rgb {
    animation: none;
    color: inherit;
    text-shadow: none;
}

/* Navbar RGB Link Styles - Active State */
.nav-rgb.active-rgb .char-rgb {
    animation: rgb-cycle 3s linear infinite;
}

/* Hover Effect for Navbar Links */
.nav-rgb:hover .char-rgb {
    animation: rgb-cycle 3s linear infinite;
}

@keyframes rgb-cycle-text {
    0% { color: #ff0000; }
    15% { color: #ffff00; }
    30% { color: #00ff00; }
    45% { color: #00ffff; }
    60% { color: #0000ff; }
    75% { color: #ff00ff; }
    100% { color: #ff0000; }
}

.glow-effect .char-rgb {
    animation-name: rgb-cycle-glow;
}

@media (max-width: 768px) {
    .char-rgb {
        display: inline;
        white-space: normal;
    }
    
    /* Ensure marquee text doesn't wrap on mobile */
    .marquee-text .char-rgb {
        white-space: pre;
    }
}

/* Loop to generate delays for up to 100 characters (simplified for efficiency) */
/* We will use JS to assign style="animation-delay: Xms" instead of 100 classes */

.marquee-container {
    width: 100%;
    /* overflow: hidden !important; Force hidden to prevent horizontal scroll */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    white-space: nowrap;
    position: relative;
    /* padding: 30px 0; Removed to reduce width as requested */
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite; /* Faster speed for PC */
}

@media (max-width: 768px) {
    .marquee-text {
        animation-duration: 10s; /* Faster speed for Mobile */
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.animate-bounce-interval {
    animation: bounce-interval 5s infinite;
}

@keyframes bounce-interval {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-30px);
    }
    15% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-15px);
    }
    30% {
        transform: translateY(0);
    }
}