body,body.pace-done{
    background-color: #ffffff !important;
}
.video_caption1{
    color: white;
    font-size: 3em;
    animation: colorPulse 2s ease-in-out infinite alternate;
    text-align: center;
}

@keyframes colorPulse {
    0% {
        color: white;
    }
    100% {
        color: #d3d3d3; /* light grey */
    }
}
  /* Music book background for login content */
        #loginContent {
            background-color: #ffffff;
            position: relative;
            overflow: hidden;
        }
        
        /* Music notes container */
        .music-notes-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        /* Music note styling */
        .music-note {
            position: absolute;
            font-size: 2rem;
            color: rgba(0, 0, 0, 0.35);
            opacity: 0;
            animation: floatNote 30s infinite ease-in-out;
            user-select: none;
            font-weight: normal;
        }
        
        /* Animation for falling notes */
        @keyframes floatNote {
            0% {
                opacity: 0;
                transform: translateY(-100px) translateX(0) rotate(0deg) scale(0.8);
            }
            10% {
                opacity: 0.5;
            }
            30% {
                opacity: 0.45;
            }
            50% {
                opacity: 0.4;
            }
            70% {
                opacity: 0.45;
            }
            90% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
                transform: translateY(100vh) translateX(var(--random-x, 50px)) rotate(360deg) scale(1.2);
            }
        }
        
        /* Ensure content is above notes */
        #loginContent > .w-100 {
            position: relative;
            z-index: 2;
        }
        
        /* Make sure content takes full width */
        #loginContent .w-100 {
            max-width: 100% !important;
            width: 100% !important;
        }
        
        /* Ensure all child elements respect full width */
        #loginContent * {
            max-width: 100%;
        }
        
        /* Override any container constraints */
        #loginContent .container,
        #loginContent .container-fluid,
        #loginContent [class*="max-w"] {
            max-width: 100% !important;
            width: 100% !important;
        }