body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Prevent scrollbars */
}

.container {
    position: relative;
    height: 100%;
    text-align: center;
}

.h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.25); /* Add background color */
    padding: 10px 20px; /* Add padding for better appearance */
    border-radius: 10px;
}

.balls {
    position: absolute;
    width: 100%;
    height: 100%;
}

.animation {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    animation: bounce 4s ease infinite;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-10vh); } /* Initial bounce height */
    50% { transform: translateY(0); } /* Bottom of bounce */
    75% { transform: translateY(-15vh); } /* Slightly higher bounce */
    100% { transform: translateY(0); } /* Back to bottom */
}


/* Cookie */
/* Stil für das Overlay */
/* Stil für das Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparentes Schwarz */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Z-Index, um das Overlay über alle anderen Elemente zu platzieren */
    animation: fadeInOverlay 0.5s ease forwards; /* Animation für das Einblenden des Overlays */
}

/* Stil für das Modal */
.modal {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 20px; /* Abstand vom Rand */
    opacity: 0; /* Startwert für die Opazität */
    animation: slideInModal 0.5s ease forwards; /* Animation für das Einblenden des Modals */
}

/* Animation für das Einblenden des Overlays */
@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation für das Einblenden des Modals */
@keyframes slideInModal {
    from {
        transform: translateY(-50px); /* Startposition des Modals */
        opacity: 0;
    }
    to {
        transform: translateY(0); /* Endposition des Modals */
        opacity: 1;
    }
}



/* Stil für die Überschrift */
.modal h2 {
    margin-top: 0;
}

/* Stil für die Schaltflächen */
.modal button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Stil für die Zustimmen-Schaltfläche */
.agree-btn {
    background-color: #4CAF50; /* Grün */
    color: white;
}

/* Stil für die Ablehnen-Schaltfläche */
.reject-btn {
    background-color: #f44336; /* Rot */
    color: white;
}