/* Basic reset for padding and margin */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling for the back button */
.back-button {
    font-size: 18px;
    padding: 15px 15px 15px 15px;
    margin-left: 10px;
    background-color: #02aa0a;   /* Updated to the green color */
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    border-radius: 20px; /* Round edges */
    border: 2px solid black; /* Black border */
}

/* Styling for the image */
.image-container img {
    width: 80%;
    height: auto;
    display: block;
    margin: 50px auto;
    margin-top: 5px;
}

/* Title Section */
.title-section {
    text-align: center;
    margin-top: 20px;
}

.title-section h1 {
    font-size: 32px;
    color: #333; /* Dark gray for contrast */
    margin-bottom: 20px;
}

/* Styling for the text section */
.text-section {
    margin: 30px auto;
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.6;
    max-width: 80%;
    text-align: center;
}

/* Styling for the button container */
.button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adjusts spacing between buttons */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* Styling for buttons */
.button-container button {
    background-color: #28a745;
    color: white;
    padding: 20px;
    font-size: 18px;
    border: none;
    width: 30%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative; /* Required for positioning the falling money container */
    border-radius: 10px; /* Round edges */
    border: 2px solid black; /* Black border */
}

.button-container button:hover {
    background-color: #218838;
}

/* Money Animation Under Button on Hover */
.falling-money-under-button {
    position: absolute;
    top: 100%; /* Position directly below the button */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevent interaction with the falling money */
    overflow: hidden;
    z-index: 999; /* Make sure it stays on top of other elements */
}

.money-under-button {
    position: absolute;
    top: -50px; /* Start off-screen */
    font-size: 30px; /* Increased font size for bigger money */
    color: green;
    animation: fallUnderButton 5s linear infinite, sway 3s ease-in-out infinite;
    opacity: 0.7; /* Semi-transparent */
}

@keyframes fallUnderButton {
    0% {
        top: -50px;
    }
    100% {
        top: 200px; /* Increase the fall distance to make it more dramatic */
    }
}

@keyframes sway {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
}

/* Falling Money on Page Load (unchanged) */
.falling-money {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevent interaction with the falling money */
    overflow: hidden;
    z-index: 9999; /* Place on top of everything */
}

.money {
    position: absolute;
    top: -50px; /* Start off-screen */
    left: 0;
    font-size: 24px;
    color: green;
    animation: fall 10s linear, sway 3s ease-in-out infinite;
    opacity: 0.7; /* Semi-transparent */
}

/* Falling animation */
@keyframes fall {
    0% {
        top: -100px;
    }
    100% {
        top: 110vh; /* Go slightly off-screen at the bottom */
    }
}

/* Swaying effect */
@keyframes sway {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
}

@media (max-width: 600px) { /* Adjust the max-width as needed */
    .button-container {
        flex-direction: column; /* Stacks buttons vertically */
        align-items: center; /* Centers buttons horizontally */
    }

    .button-container button {
        width: 80%; /* Optional: Adjust button width for better appearance */
        max-width: 300px; /* Optional: Set a max width to avoid overly large buttons */
    }

    .sportsBettingBonusButton {
        margin-bottom: 5px;
    }
}

html {
    color-scheme: light;
}


body {
    background-color: #fff;
}

/* Override for dark mode preference */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #ffffff; /* Force white background even in dark mode */
    }
    /* ... apply the same light theme styles to other elements here ... */
}