html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    position: relative;
    min-height: 100%;
    max-width: 100%; /* Example width - adjust as needed */
    margin: auto; /* Centers the container */
    width: 100%; /* Full width of the container */
    z-index: 1; /* Ensure the content is above the background */
    
}

.wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.05)), 
                url('/static/images/background_map.png') no-repeat center center fixed;
    background-size: cover;
    filter: grayscale(1); /* Convert image to black and white */
    opacity: 0.4; /* Set opacity level for the background */
    z-index: -1; /* Place the overlay behind the content */
}

.wrapperNoFade {
    position: relative;
    min-height: 100%;
    max-width: 100%; /* Example width - adjust as needed */
    margin: auto; /* Centers the container */
    width: 100%; /* Full width of the container */
    z-index: 1; /* Ensure the content is above the background */
    
}

.wrapperNoFade::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/static/images/background_map.png') no-repeat center center fixed;
    background-size: cover;
    filter: grayscale(1); /* Convert image to black and white */
    opacity: 0.1; /* Set opacity level for the background */
    z-index: -1; /* Place the overlay behind the content */
}