@import 'z-index_values.css';

.background_image{
    width: 100vw;
    
}

.parallax{
    pointer-events: none;
    width: 110vw;
    left: calc(50%);
    transition: 0.4s cubic-bezier(.2,.49,.32,.99);
    bottom: 0;
    
}

.background-img{
    position: absolute;
    left: calc(50%);
    z-index: var(--z-index-parallaxLayer2);
    bottom: 0;

}

.front-img{
    position: fixed;
    left: calc(50%);
    
    width: 100vw;
    z-index: var(--z-index-parallaxLayer5);
    bottom: 0;

}

.front-img-dawn{
    position: fixed;
    left: calc(50%);
    
    width: 100vw;
    z-index: var(--z-index-parallaxLayer1);
    bottom: 0;
    opacity: 0;
}

.mobileBackground{
    pointer-events: none;
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-index-parallaxLayer2);
    bottom: 0;
}

.front-img-daytime{
    position: fixed;
    left: calc(50%);
    /* display: none; */
    width: 100vw;
    z-index: var(--z-index-parallaxLayer2);
    bottom: 0;

}

.topBG, .topBG-Night{
    position: fixed;
    pointer-events: none;
    left: calc(50%);
    width: 100vw;
    display: flex;
    /* display: none; */
    z-index: var(--z-index-parallaxLayer2);
    transform: translateX(-50%);
        justify-content: center; /* horizontally center the content inside the .topBG */
    
    top: 0;

}

.topBG-Night{
    opacity: 0;
}

.front-img-night{
    position: fixed;
    left: calc(50%);
    
    width: 100vw;
    z-index: var(--z-index-parallaxLayer2);
    bottom: 0;
    opacity: 0;

}

.front-img-black{
    position: fixed;
    left: calc(50%);
    
    width: 100vw;
    z-index: var(--z-index-parallaxLayer2);
    bottom: 0;
    opacity: 0;

}