body.light-mode {
    background-color: #f8f8f8;
    color: #333;
  }
  
  body.dark-mode {
    background-color: #121212;
    color: #f8f8f8;
  }
  
  .navbar.dark-mode {
    background-color: #1e1e1e;
  }
  
  .navbar.light-mode {
    background-color: #333;
  }
  
  .footer-content.dark-mode {
    background-color: #1e1e1e;
    color: #ccc;
  }
  
  .footer-content.light-mode {
    background-color: #f8f8f8;
    color: #666;
  }
  
/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #8A2BE2, #00FFFF); /* Neon Purple to Neon Blue gradient */
    color: #FFFFFF; /* White text for contrast */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    text-align: center;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: center; /* Center the nav-buttons horizontally */
    align-items: center; /* Center the nav-buttons vertically */
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent black for navbar */
}

.navbar .logo {
    color: #FFFFFF; /* White logo text */
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    color: #FFFFFF; /* White links */
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #00FFFF;
}

/* Ensure navigation buttons are perfectly centered */
.nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0; /* Add spacing around the buttons */
}

.nav-buttons .button {
    background: linear-gradient(90deg, #8A2BE2, #00FFFF, #FF7EB3, #FFD700); /* Animated gradient */
    background-size: 400%;
    animation: gradient-shift 5s infinite; /* Use the same animation as cta-button */
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: transform 0.3s ease;
    text-align: center;
}

.nav-buttons .button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #FFD700, 0 0 30px #FF7EB3; /* Same hover effect as cta-button */
}

/* Hero Section */
.hero {
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
    padding: 3rem 2rem;
    border-radius: 10px;
    text-align: center;
    margin: 2rem auto;
    max-width: 800px;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.cta-button {
    background: #8A2BE2; /* Neon Purple */
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background: #00FFFF; /* Neon Blue on hover */
}

/* Lessons Section */
.lessons {
    padding: 3rem 2rem;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent black for lessons section */
    border-radius: 10px;
    max-width: 1200px;
    margin: 2rem auto;
    color: #FFFFFF;
}

.lessons h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Fix for lesson-card text visibility */
.lesson-card {
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent black for cards */
    color: #FFFFFF; /* Ensure text is white for visibility */
    padding: 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
    display: flex; /* Ensure proper layout */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Space out content */
}

/* Remove duplicate or conflicting styles */
.lesson-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #FFFFFF; /* Ensure header text is visible */
}

.lesson-card p {
    font-size: 1rem;
    color: #FFFFFF; /* Ensure paragraph text is visible */
    margin: 0; /* Remove unnecessary margins */
}

/* Fix hover effect for lesson cards */
.lesson-card:hover {
    transform: scale(1.05);
    background: rgba(138, 43, 226, 0.9); /* Slightly brighter Neon Purple on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    border-color: #00FFFF; /* Neon Blue border on hover */
}

/* Platform-specific color coding */
.lesson-card.discord {
    background-color: #7289da; /* Discord blue */
    color: #fff;
}

.lesson-card.vrchat {
    background-color: #ffcc00; /* VRChat yellow */
    color: #333;
}

.lesson-card.minecraft {
    background-color: #34c759; /* Minecraft green */
    color: #fff;
}

/* Importance-based color coding */
.lesson-card.high-importance {
    border: 2px solid #ff3b30; /* High importance: red border */
}

.lesson-card.medium-importance {
    border: 2px solid #ff9500; /* Medium importance: orange border */
}

.lesson-card.low-importance {
    border: 2px solid #4cd964; /* Low importance: green border */
}

/* Text alignment for lesson cards */
.lesson-card h3 {
    margin: 0 0 8px;
    font-size: 1.2em;
}

.lesson-card p {
    margin: 0;
    font-size: 0.9em;
}

.lesson-header {
    text-align: center;
    padding: 1rem; /* Further reduced padding */
    background: linear-gradient(to right, #ff7eb3, #ff758c);
    color: #fff;
    border-radius: 10px;
    margin-bottom: 1rem; /* Further reduced margin */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Slightly smaller shadow */
}

.lesson-header h1 {
    font-size: 2.2rem; /* Further reduced font size */
    margin-bottom: 0.2rem; /* Further reduced margin */
    font-weight: 500; /* Slightly lighter font weight */
}

.lesson-header .lesson-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
}

.lesson-body {
    padding: 2rem;
    background: linear-gradient(135deg, #8A2BE2, #00FFFF); /* Match gradient with other sections */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.8;
    color: #FFFFFF; /* Ensure text is visible on gradient */
    text-align: center;
}

.section-title {
    font-size: 2rem;
    color: #ff758c;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ff758c;
    padding-bottom: 0.5rem;
}

.styled-list {
    list-style: none;
    padding-left: 0;
}

.styled-list li {
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
    font-size: 1.2rem;
    color: #333; /* Dark text for better contrast */
    font-size: 1.1rem; /* Slightly larger for readability */
}

.styled-list li::before {
    content: "✔️";
    position: absolute;
    left: 0;
    color: #ff758c; /* Keep the checkmark color consistent */
}

.highlight {
    color: #ff7eb3;
    font-weight: bold;
}

/* About Section */
.about {
    padding: 2rem;
    background-color: #f9f9f9;
    text-align: center;
    border-top: 5px solid #7289da; /* Discord accent */
}

.about h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
}

.about p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Contact Section */
.contact {
    padding: 2rem;
    background-color: #fff;
    border-top: 5px solid #4caf50; /* Minecraft accent */
}

.contact h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.contact form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact input, .contact textarea, .contact button {
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact button {
    background-color: #00bcd4;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact button:hover {
    background-color: #2196f3;
}

/* Footer */
.footer-content {
    text-align: center;
    padding: 1rem;
    background-color: #222;
    color: #fff;
    border-top: 5px solid #ff5722; /* FiveM accent */
}

.footer-content p {
    margin-bottom: 0.5rem; /* Adjust spacing for multiple lines */
    font-size: 0.9rem; /* Slightly smaller for secondary text */
}

.social-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #00bcd4;
}

footer {
    background: rgba(0, 0, 0, 0.9); /* Dark footer */
    color: #FFFFFF;
    padding: 1.5rem 0;
    text-align: center;
}

.footer-content p {
    margin: 0.5rem 0;
}

.social-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0;
}

.social-links a {
    color: #00FFFF; /* Neon Blue links */
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #8A2BE2; /* Neon Purple on hover */
}

#error-message {
    color: red;
    display: none;
    margin-top: 1rem;
}

#password-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#password-overlay input {
    padding: 10px;
    font-size: 16px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
}

#password-overlay button {
    background: #8A2BE2;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#password-overlay button:hover {
    background: #00FFFF;
}

.highlighted-title {
    color: #FFFFFF; /* Ensure text is white for visibility */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add shadow for better contrast */
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Animated gradient for the logo */
.animated-gradient {
    background: linear-gradient(90deg, #00FFFF, #8A2BE2, #00FFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-wigwag 10s infinite ease-in-out;
    font-size: 1.8rem;
    font-weight: bold;
    background-size: 200%; /* Extend background for smooth animation */
}

@keyframes gradient-wigwag {
    0% {
        background-position: 100% 50%; /* Start at the right */
    }
    50% {
        background-position: 0% 50%; /* Move to the left */
    }
    100% {
        background-position: 100% 50%; /* Move back to the right */
    }
}

/* Updated marquee announcement styles */
.marquee {
    background: linear-gradient(90deg, #8A2BE2, #00FFFF); /* Neon gradient background */
    color: #FFFFFF;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee p {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: bold;
    animation: marquee-fade 15s ease-in-out infinite; /* Slower animation with smooth easing */
    letter-spacing: 2px; /* Add spacing for better readability */
}

@keyframes marquee-fade {
    0% {
        transform: translateX(0); /* Start in the center */
        opacity: 1; /* Fully visible */
    }
    45% {
        transform: translateX(100%); /* Move off-screen to the right */
        opacity: 0; /* Start fading out */
    }
    55% {
        transform: translateX(100%); /* Fully off-screen on the right */
        opacity: 0; /* Still invisible */
    }
    60% {
        transform: translateX(-100%); /* Reappear from the left */
        opacity: 0; /* Still invisible */
    }
    100% {
        transform: translateX(0); /* Return to the center */
        opacity: 1; /* Fully visible */
    }
}

/* Updated progress bar styles */
.progress-section {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Ensure it stays on top of other elements */
    text-align: center;
    width: 250px; /* Fixed width for consistent appearance */
}

.progress-bar-container {
    background: #ccc;
    border-radius: 10px;
    overflow: hidden;
    height: 10px; /* Smaller height for compact design */
    width: 100%;
    margin: 5px 0;
}

.progress-bar {
    background: linear-gradient(90deg, #8A2BE2, #00FFFF);
    height: 100%;
    width: 0%; /* Initial progress */
    transition: width 0.3s ease-in-out;
}

#progress-text {
    font-size: 0.9rem;
    color: #FFFFFF;
    margin-top: 5px;
}

/* Platform-specific styling */
.carousel-item img {
    width: 250px;
    height: 350px;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(100%);
}

.carousel-item:hover img {
    transform: scale(1.2);
    filter: grayscale(0%);
}

/* Style for hidden hyperlink text in footer */
.social-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0;
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #00FFFF; /* Neon Blue */
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a::before {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.social-links a:hover {
    background-color: #8A2BE2; /* Neon Purple on hover */
    transform: scale(1.1);
}

/* Shrink header animation */
.header-animation {
    width: 100%;
    max-width: 800px;
    height: 160px; /* Matches the updated size in index.html */
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

/* Center navigation buttons */
.nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0; /* Add spacing around the buttons */
}

.button {
    background: linear-gradient(135deg, #8A2BE2, #00FFFF); /* Neon gradient */
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.3s ease;
    text-align: center;
}

.button:hover {
    background: #00FFFF; /* Neon Blue on hover */
    transform: scale(1.1);
}

/* Center all text */
body, .lesson-body, .platform-list, .footer-content {
    text-align: center;
}

/* Social links with sleek icons */
.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #00FFFF; /* Neon Blue */
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.5rem;
    color: #FFFFFF;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: #8A2BE2; /* Neon Purple on hover */
    transform: scale(1.1);
}

.social-links i {
    pointer-events: none; /* Ensure only the link is clickable */
}

/* Calendar Section */
.calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Updated calendar-day styling with hover color-changing effect */
.calendar-day {
    background: linear-gradient(135deg, #1a1a2e, #16213e); /* Subtle dark gradient */
    color: #00FFFF; /* Neon Blue text */
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 0 0 30px #00FFFF; /* Neon glow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #8A2BE2, #00FFFF) 1; /* Neon Purple to Neon Blue border */
}

.calendar-day h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #FFD700; /* Gold text for headers */
    text-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5); /* Subtle glow */
}

.calendar-day p {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    color: #FFFFFF; /* White text for contrast */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Subtle glow */
}

.calendar-day:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #8A2BE2, #00FFFF); /* Neon Purple to Neon Blue gradient on hover */
    box-shadow: 0 0 20px #00FFFF, 0 0 40px #8A2BE2; /* Enhanced glow on hover */
}

/* Cyberpunk Theme */
body.cyberpunk-theme {
    background: radial-gradient(circle, #1a1a2e, #16213e, #0f3460); /* Dark cyberpunk gradient */
    color: #00FFFF; /* Neon Blue text */
    font-family: 'Orbitron', sans-serif; /* Sci-fi font */
}

.cyberpunk-hero {
    background: linear-gradient(135deg, #8A2BE2, #00FFFF);
    border: 3px solid #FF7EB3;
    box-shadow: 0 0 30px #FF7EB3;
    padding: 3rem 2rem;
    border-radius: 15px;
}

.cyberpunk-subtitle {
    color: #FF7EB3;
    font-style: italic;
    text-shadow: 0 0 10px #FF7EB3;
}

.cyberpunk-body {
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #8A2BE2;
    box-shadow: 0 0 20px #8A2BE2;
    padding: 2rem;
    border-radius: 15px;
}

.cyberpunk-title {
    color: #FF7EB3;
    text-shadow: 0 0 15px #FF7EB3;
    font-size: 2.5rem;
}

.cyberpunk-list li {
    color: #00FFFF;
    font-size: 1.2rem;
    text-shadow: 0 0 5px #00FFFF;
}

.cyberpunk-subheading {
    color: #FF7EB3;
    font-size: 1.8rem;
    text-shadow: 0 0 10px #FF7EB3;
}

.cyberpunk-footer {
    background: rgba(0, 0, 0, 0.9);
    border-top: 3px solid #8A2BE2;
    box-shadow: 0 0 20px #8A2BE2;
    padding: 2rem;
    border-radius: 15px;
    color: #FFFFFF;
}

/* Star Wars-inspired glowing panels */
.star-wars-panel {
    border: 3px solid #FFD700; /* Gold glow */
    box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700;
    padding: 2rem;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.9);
    animation: border-ripple 4s infinite; /* Add ripple animation */
}

/* Star Wars-inspired header */
.star-wars-header {
    border-bottom: 5px solid #FFD700;
    text-align: center;
    position: relative;
    animation: border-ripple 4s infinite; /* Add ripple animation */
}

.star-wars-header .holographic-effect {
    font-size: 1.2rem;
    color: #00FFFF;
    text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF;
    animation: flicker 2s infinite alternate;
}

/* Holographic footer effect */
.star-wars-footer {
    background: rgba(0, 0, 0, 0.9);
    border-top: 3px solid #FFD700; /* Initial Gold glow */
    animation: border-ripple 4s infinite; /* Add ripple animation */
}

.star-wars-footer .holographic-effect {
    font-size: 1rem;
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700;
    animation: flicker 3s infinite alternate;
}

/* Flicker animation */
@keyframes flicker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

/* Ripple animation for glowing borders */
@keyframes border-ripple {
    0% {
        border-color: #FFD700; /* Gold */
        box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700;
    }
    25% {
        border-color: #FF7EB3; /* Neon Pink */
        box-shadow: 0 0 20px #FF7EB3, 0 0 40px #FF7EB3;
    }
    50% {
        border-color: #8A2BE2; /* Neon Purple */
        box-shadow: 0 0 20px #8A2BE2, 0 0 40px #8A2BE2;
    }
    75% {
        border-color: #00FFFF; /* Neon Blue */
        box-shadow: 0 0 20px #00FFFF, 0 0 40px #00FFFF;
    }
    100% {
        border-color: #FFD700; /* Back to Gold */
        box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700;
    }
}

/* Sci-fi icons */
.styled-list li i {
    margin-right: 10px;
    color: #FFD700; /* Gold for Star Wars icons */
}

/* Add particle effect background */
body.cyberpunk-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95));
    z-index: -2;
}

body.cyberpunk-theme::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://preview.redd.it/e42jpx6a8az51.jpg?width=1080&crop=smart&auto=webp&s=7fbf17dd4472a8fa16a4b0e5f4c5b29591417027') repeat; /* Replace with particle effect image */
    opacity: 0.2;
    z-index: -1;
    animation: particle-move 10s linear infinite;
}

@keyframes particle-move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100px, -100px);
    }
}

/* Glowing text animation */
.highlighted-title {
    color: #FFFFFF;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FF7EB3, 0 0 30px #8A2BE2, 0 0 40px #00FFFF;
    font-size: 3rem;
    animation: glow-pulse 3s infinite alternate;
}

@keyframes glow-pulse {
    0% {
        text-shadow: 0 0 10px #FFD700, 0 0 20px #FF7EB3, 0 0 30px #8A2BE2, 0 0 40px #00FFFF;
    }
    100% {
        text-shadow: 0 0 20px #FFD700, 0 0 30px #FF7EB3, 0 0 40px #8A2BE2, 0 0 50px #00FFFF;
    }
}

/* Holographic panel effect */
.star-wars-panel {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #FFD700, #FF7EB3, #8A2BE2, #00FFFF) 1;
    box-shadow: 0 0 20px #FFD700, 0 0 40px #FF7EB3;
    animation: border-ripple 4s infinite, holographic-glow 6s infinite alternate;
}

@keyframes holographic-glow {
    0% {
        box-shadow: 0 0 20px #FFD700, 0 0 40px #FF7EB3;
    }
    100% {
        box-shadow: 0 0 30px #8A2BE2, 0 0 50px #00FFFF;
    }
}

/* Animated gradient for buttons */
.cta-button {
    background: linear-gradient(90deg, #8A2BE2, #00FFFF, #FF7EB3, #FFD700);
    background-size: 400%;
    animation: gradient-shift 5s infinite;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #FFD700, 0 0 30px #FF7EB3;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Sci-fi holographic footer */
.star-wars-footer {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
    border-top: 3px solid transparent;
    border-image: linear-gradient(45deg, #FFD700, #FF7EB3, #8A2BE2, #00FFFF) 1;
    animation: border-ripple 4s infinite, holographic-glow 6s infinite alternate;
    padding: 2rem;
    text-align: center;
    color: #FFFFFF;
}

.star-wars-footer .holographic-effect {
    font-size: 1.2rem;
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FF7EB3;
    animation: flicker 3s infinite alternate;
}

/* Themed frame for embedded video */
.video-frame {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #FFD700, #FF7EB3, #8A2BE2, #00FFFF) 1;
    box-shadow: 0 0 20px #FFD700, 0 0 40px #FF7EB3;
    border-radius: 15px;
    max-width: 800px;
    margin: 2rem auto;
}

.video-frame iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

/* Generation Crimson Section */
.generation-crimson {
    background: linear-gradient(135deg, #8B0000, #FF4500); /* Fiery red gradient */
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 0 20px #FF4500, 0 0 40px #8B0000;
    color: #FFFFFF;
    text-align: center;
    margin: 2rem auto;
    max-width: 800px;
}

.generation-crimson p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.generation-crimson .highlight {
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFD700; /* Gold highlight */
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FF4500;
}