body {
    margin: 0;
    height: 100vh; /* Ensures the body takes up the full viewport height */
    overflow: hidden; /* Hides any overflow */
    font-family: sans-serif;
    color: #F5E2AB; /* Sets default text color to white */
}

.scrolling-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/bph-background.jpg'); /* Replace with your main background image */
    background-size: cover; /* Cover the entire area */
    background-repeat: repeat-y;
    background-position: center top; /* Center the image horizontally */
    animation: scrollBackground 100s linear infinite;
    z-index: 1; /* Place it behind the logo */
}

.scrolling-background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/bars.png'); /* Replace with your overlay image */
    background-size: cover; /* Cover the entire area */
    background-repeat: repeat-y;
    background-position: center top; /* Center the image horizontally */
    animation: scrollBackgroundOverlay 20s linear infinite; /* Different speed */
    z-index: 2; /* Place it above the main background, but below the logo */
    opacity: .3; /* 50% alpha transparency */
}

.logo-container {
    position: fixed; /* Keeps the logo and email fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the container */
    text-align: center;
    z-index: 10; /* Ensures it's above the background */
}

.logo-container img {
    max-width: 200px; /* Adjust as needed */
    height: auto;
    display: block; /* Removes any extra space below the image */
    margin: 0 auto 10px; /* Centers the image and adds some space below */
}

.logo-container a {
    color: #fff; /* Sets link color to white */
    text-decoration: none; /* Removes underline from the link */
}

@keyframes scrollBackground {
    0% {
        background-position: center 0; /* Start at the top */
    }
    100% {
        background-position: center 100%; /* End at the bottom */
    }
}

@keyframes scrollBackgroundOverlay {
    0% {
        background-position: center 0; /* Start at the top */
    }
    100% {
        background-position: center 100%; /* End at the bottom */
    }
}