* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevents scrolling if the image is larger than the viewport */
}

/* Background image styling, now using a class instead of a tag */
.background-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* Ensures the image is behind all other content */
}

.container {
    position: relative; /* Allows z-index to stack children above the background image */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the child to the bottom */
    align-items: center; /* Centers children horizontally */
    z-index: 0; /* Higher than the background image */
    padding-bottom: 20px; /* Adds some space from the bottom */
}

.titel {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    color: white; /* Ensures the text stands out, adjust color as needed */
    padding: 10px; /* Adds space around the text */
    border-radius: 5px; /* Optional: rounds the corners of the background */
    z-index: 1; /* Higher than the container's background */
    width: fit-content; /* Ensures the background only covers the text */
    margin-bottom: 20px; /* If you want more space from the bottom edge */
    font-family: Arial, sans-serif; /* Sets the font to Arial, with sans-serif as a fallback */
}


.fluvius-container {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1; /* Same level as the title but should not overlap */
}

.fluvius-container .fluvius {
    width: auto; /* Adjust width as needed */
    height: 10vh; /* Adjust height as needed */
    object-fit: contain;
}

.titeltop {
    font-size: 30px; /* Adjust the size as needed */
    font-weight: bold; /* Bold font weight for visibility */
    text-align: center; /* Center text horizontally */
    color: rgb(97, 68, 6); /* White text for visibility */
    background-color: rgba(11, 246, 246, 0.40); /* Semi-transparent background */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Optional: rounded corners for the background */
    position: absolute; /* Positioning it absolutely within the .container */
    top: 20px; /* Adjust this value to move closer/farther from the top */
    left: 50%; /* Start at 50% from the left */
    transform: translateX(-50%); /* Shifts the element left by 50% of its width to center it */
    z-index: 1; /* Ensures it is above the background image */
    font-family: Arial, sans-serif; /* Arial font with sans-serif as a fallback */
}

/* Button styling */
.button {
    background-color: rgba(110, 109, 109, 0.6); /* Semi-transparent white background */
    color: #000; /* Black text color */
    padding: 10px 20px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold text */
    text-decoration: none; /* Removes underline from link */
    cursor: pointer; /* Changes cursor to indicate it's clickable */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.7); /* Slightly less transparent on hover */
}