Code/UI/SplashScreen.razor.scss
SplashScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    // Default black background
    background-color: black;
    
    // Background image settings
    background-size: cover;
    background-position: center;

    // Center the content wrapper
    display: flex;
    justify-content: center;
    align-items: center;
    
    // Smooth transition for opacity (2 seconds)
    transition: opacity 2s ease-in-out;
    opacity: 0; // Invisible by default
    
    &.fade-in {
        opacity: 1; // Fades in on start
    }

    &.fade-out {
        opacity: 0; // Fades out when IsFadingOut is true
    }

    .content {
        display: flex;
        flex-direction: column; // Stack logo and text vertically
        justify-content: center;
        align-items: center;
        gap: 30px; // Space between the logo and the text block
    }

    .logo {
        // Logo size settings
        width: 600px;
        height: auto;
        object-fit: contain;
    }

    .text-container {
        display: flex;
        flex-direction: column; // Stack text lines vertically
        align-items: center;
        
        // Common text styling (applies to all lines)
        font-family: Poppins, sans-serif;
        font-weight: 800;
        text-align: center;
        letter-spacing: 5px; 
        
        // Text shadow for better readability over images
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
        
        label {
            margin: 0;
            padding: 5px 0; // Small space between individual text lines
        }
    }
}