body {
    margin: 0;
    overflow-x: hidden; /* Prevent scrolling caused by oversized elements */
	max-width: 100vw;
}

/* Define CSS Variables for Spotlight Colors */
:root {
	--spotlight-color: rgba(255, 223, 0, 0.5);
	/* Default to light mode */
}

[data-bs-theme="dark"] {
	--spotlight-color: rgba(255, 223, 0, 0.1);
	/* Increased opacity for dark mode */
}

[data-bs-theme="light"] {
	--spotlight-color: rgba(255, 223, 0, 0.2);
	/* Slightly increased for better visibility */
}


.spotlight {
    z-index: -999;
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at center, var(--spotlight-color), transparent 50%);
    border-radius: 50%;
    pointer-events: none;
    animation: moveSpotlight 1s ease forwards;
    opacity: 0.8;

    /* Ensure clipping to the viewport */
    clip-path: circle(50% at 50% 50%);
	layout: layout paint;
}


/* Animation for Moving the Spotlight */
@keyframes moveSpotlight {
    0% {
        transform: translate(-60%, -60%) rotate(180deg) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) rotate(270deg) scale(1);
        opacity: 1;
    }
}