/* Splash screen styles */
#splashScreen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(20, 20, 20);
    z-index: 9999;
    opacity: 0; /* Initial state */
    transition: opacity 0.5s; /* Initial fade-in transition */
}

#splashScreen.show {
    opacity: 1; /* Fade-in state */
}

#splashScreen.hide {
    opacity: 0; /* Fade-out state */
    transition: opacity 0.5s; /* Fade-out transition */
}

#splashScreen h2 {
    font-family: 'Avenir';
    font-size: 50px;
    color: rgb(230, 230, 230);
    font-weight: 400 !important; /* Set font weight to 100 */
    letter-spacing: 0.05em; /* Adjust the value as needed */
    transform: scaleX(1.35);
    opacity: 0; /* Initial state */
    transition: opacity 0.5s; /* Fade-in transition */
}
#splashScreen.show h2 {
    opacity: 1; /* Fade-in state */
}

.splash-logo-container.horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.splash-logo {
    width: 160px;
    height: 160px;
    margin-right: 0px;
    margin-left: -500px; /* Move logo 50px to the left */
    margin-top: -100px;
    opacity: 0.3; /* Makes the logo more transparent */
    filter: brightness(0.2);
}